A way to distinguish client and server build?

[JoJk0]

I need to include a component inside Vitepress page that uses runtime Vue renderer.

I have current config that allows it to run in Vitepress as long as it's just dev mode:

// .vitepress/config.mts
import { defineConfig } from 'vitepress'

export default defineConfig({
// ...
  vite: {
    resolve: {
      alias: {
        vue: resolve(__dirname, '../node_modules/vue/dist/vue.esm-bundler.js'),
      }
    },
  },
})

However, the issue arises at build time when SSR build is being produced:

Error: ENOENT: no such file or directory, open '***\node_modules\vue\dist\vue.esm-bundler.js\server-renderer'

Is there any way to add condition inside Vitepress config so that I can make vue alias to be only applied on client build?

I've tried to use function for vite config so I can access isSsrBuild property but Vitepress only seem to support plain object.

[brc-dd]

You need to set alias for vue/server-renderer too:

alias: {
  'vue': resolve(__dirname, '../node_modules/vue/dist/vue.esm-bundler.js'),
  'vue/server-renderer': resolve(__dirname, '../node_modules/@vue/server-renderer/dist/server-renderer.esm-bundler.js'),
                                             // node_modules/vue/server-renderer/index.mjs might also work the same
}

(explicitly install @vue/server-renderer if you're using pnpm or use require.resolve instead)

[juliodialpad]

The order is important here, this solved an issue I was having with VuePress using

bundler: viteBundler({
    viteOptions: {
      ...
      resolve: {
        alias: {
          'vue/server-renderer': path.resolve(__dirname, '../node_modules/vue/server-renderer/index.js'),
          vue: path.resolve(__dirname, '../node_modules/vue/dist/vue.esm-bundler.js'),
      },
      ...
}),