When building getting this error: Could not load vue/dist/vue.esm-bundler.js/server-renderer...

[liu-huitao]

Describe the bug

When I try to run vitepress build I get:

✖ building client + server bundles...
build error:
[vite:load-fallback] Could not load vue/dist/vue.esm-bundler.js/server-renderer (imported by node_modules/.pnpm/vitepress@1.6.3_@algolia+client-search@5.21.0_@types+node@22.13.10_async-validator@4.2.5_axio_dswlsf7js4zfbtehsxenr54umq/node_modules/vitepress/dist/client/app/ssr.js): ENOENT: no such file or directory, open 'E:\learn-collect\vite\potato-vite-plugins\pt-docs\vue\dist\vue.esm-bundler.js\server-renderer'
[vite:load-fallback] Could not load vue/dist/vue.esm-bundler.js/server-renderer (imported by node_modules/.pnpm/vitepress@1.6.3_@algolia+client-search@5.21.0_@types+node@22.13.10_async-validator@4.2.5_axio_dswlsf7js4zfbtehsxenr54umq/node_modules/vitepress/dist/client/app/ssr.js): ENOENT: no such file or directory, open 'E:\learn-collect\vite\potato-vite-plugins\pt-docs\vue\dist\vue.esm-bundler.js\server-renderer'
    at async open (node:internal/fs/promises:639:25)
    at async Object.readFile (node:internal/fs/promises:1242:14)
    at async Object.load (file:///E:/learn-collect/vite/potato-vite-plugins/pt-docs/node_modules/.pnpm/vite@5.4.14_@types+node@22.13.10_less@4.2.2/node_modules/vite/dist/node/chunks/dep-CHZK6zbr.js:65249:25)
    at async PluginDriver.hookFirstAndGetPlugin (file:///E:/learn-collect/vite/potato-vite-plugins/pt-docs/node_modules/.pnpm/rollup@4.36.0/node_modules/rollup/dist/es/shared/node-entry.js:21867:28)
    at async file:///E:/learn-collect/vite/potato-vite-plugins/pt-docs/node_modules/.pnpm/rollup@4.36.0/node_modules/rollup/dist/es/shared/node-entry.js:20990:33
    at async Queue.work (file:///E:/learn-collect/vite/potato-vite-plugins/pt-docs/node_modules/.pnpm/rollup@4.36.0/node_modules/rollup/dist/es/shared/node-entry.js:22077:32)
 ELIFECYCLE  Command failed with exit code 1.

Reproduction

1. Add the following configuration to the config.mjs file.

resolve: {
    alias: {
      vue: "vue/dist/vue.esm-bundler.js",
    },
  },

2. Run vitepress build
3. Get the error

Additional context

When I don't add the vue: "vue/dist/vue.esm-bundler.js" configuration, the build can succeed.

I found that 'E: \ pt docs \ ode_modules . pnpm'\ vitepress@1.6.3_ @algolia+ client-search@5.21.0_ @types+ node@22.13.10_async-validator @the code in the file "4.2.5a_xi_odswsf7js4zfbtehsxenr54umq \ ode_modules \ vitepress \ dist \ client \ app \ ssr. js" refers to "vue/server renderer". The code is as follows:

// entry for SSR
import {
    renderToString
} from 'vue/server-renderer';
import {
    createApp
} from './index';
export async function render(path) {
    const {
        app,
        router
    } = await createApp();
    await router.go(path);
    const ctx = {
        content: '',
        vpSocialIcons: new Set()
    };
    ctx.content = await renderToString(app, ctx);
    return ctx;
}

When I changed the configuration to the following alternative solution, I still couldn't solve it
Option 1:

resolve: {
  alias: [
    { 
      find: /^vue$/, // 精确匹配，只匹配"vue"，不匹配"vue/anything"
      replacement: 'vue/dist/vue.esm-bundler.js'
    }
  ]
}

Option 2:

resolve: {
  alias: {
    "^vue$": 'vue/dist/vue.esm-bundler.js'
  }
}

[brc-dd]

The second to last snippet you posted should work fine -

https://stackblitz.com/edit/vite-z5p237kb?file=docs/index.md,docs/.vitepress/config.ts (#4587 (reply in thread))

[liu-huitao]

The second to last snippet you posted should work fine -

https://stackblitz.com/edit/vite-z5p237kb?file=docs/index.md,docs/.vitepress/config.ts (#4587 (reply in thread))

Indeed, you are right. Previously, when I configured the following settings, I did not carefully check the new error logs. After investigation, I found the problem. Since the vue version in my document is the latest, it may not match the vue@3.4.38 required by the @vitepress-demo-preview/component plugin. After switching to 3.4.38, the packaging was successful.

resolve: {
  alias: [
    { 
      find: /^vue$/, // 精确匹配，只匹配"vue"，不匹配"vue/anything"
      replacement: 'vue/dist/vue.esm-bundler.js'
    }
  ]
}

see: https://github.com/flingyp/vitepress-demo-preview/blob/main/example/package.json

I've solved this issue. You can close it now. 🎉