Component is missing template or render function

[brc-dd]

Describe the bug

Hi! We are switching to Vite v3 in VitePress, but there is a blocker. We are not able to make it work without legacy.buildSsrCjsExternalHeuristics set to true. It is set here in Vite docs too:

vite/docs/vite.config.ts

Line 8 in cd59ee4

buildSsrCjsExternalHeuristics: true

Steps to reproduce:

• Clone the repo, checkout chore/vite-3
• Run pnpm i && pnpm docs-build

Sorry that the provided repo is not minimal and the issue may not be with Vite itself, but any help will be appreciated. Thanks!

Reproduction

https://github.com/vuejs/vitepress/tree/chore/vite-3

System Info

System:
    OS: Windows 10 10.0.25140
  Binaries:
    Node: 16.15.0 - C:\Program Files\nodejs\node.EXE
    npm: 8.5.5 - C:\Program Files\nodejs\npm.CMD
  npmPackages:
    @vitejs/plugin-vue: ^3.0.0-beta.0 => 3.0.0-beta.0
    vite: ^3.0.0-beta.0 => 3.0.0-beta.1

Used Package Manager

pnpm

Logs

Click to expand!

Error: vitepress data not properly injected in app
    at useData (file:///C:/Users/brc-dd/Desktop/vitepress/docs/.vitepress/.temp/VPTeamMembers.c1ba75f5.js:990:11)
    at setup (file:///C:/Users/brc-dd/Desktop/vitepress/docs/.vitepress/.temp/app.js:563:22)
    at callWithErrorHandling (C:\Users\brc-dd\Desktop\vitepress\node_modules\.pnpm\@vue+runtime-core@3.2.37\node_modules\@vue\runtime-core\dist\runtime-core.cjs.prod.js:119:22)
    at setupStatefulComponent (C:\Users\brc-dd\Desktop\vitepress\node_modules\.pnpm\@vue+runtime-core@3.2.37\node_modules\@vue\runtime-core\dist\runtime-core.cjs.prod.js:5789:29)
    at setupComponent (C:\Users\brc-dd\Desktop\vitepress\node_modules\.pnpm\@vue+runtime-core@3.2.37\node_modules\@vue\runtime-core\dist\runtime-core.cjs.prod.js:5770:11)
    at renderComponentVNode (C:\Users\brc-dd\Desktop\vitepress\node_modules\.pnpm\@vue+server-renderer@3.2.37_vue@3.2.37\node_modules\@vue\server-renderer\dist\server-renderer.cjs.prod.js:169:17)
    at Module.renderToString (C:\Users\brc-dd\Desktop\vitepress\node_modules\.pnpm\@vue+server-renderer@3.2.37_vue@3.2.37\node_modules\@vue\server-renderer\dist\server-renderer.cjs.prod.js:443:26)
    at file:///C:/Users/brc-dd/Desktop/vitepress/dist/node/serve-ab4066b2.js:40270:86
    at async renderPage (file:///C:/Users/brc-dd/Desktop/vitepress/dist/node/serve-ab4066b2.js:40270:19)
    at async build (file:///C:/Users/brc-dd/Desktop/vitepress/dist/node/serve-ab4066b2.js:40566:9)
[Vue warn]: Component VitePressApp is missing template or render function.

VitePressApp is defined here: https://github.com/vuejs/vitepress/blob/5dbca1f5e23532c930593865de8cfac0ef76f3c2/src/client/app/index.ts#L21

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[sapphi-red]

It worked if I removed this part.
https://github.com/vuejs/vitepress/blob/00fe8092d9e097d2dd24c06787fcb740310bdda7/src/node/alias.ts#L56-L61
Because vue is aliased to a path, Vite does not externalize Vue and includes it to bundle. That might duplicate Vue instance.

I am not sure if this is a bug in Vite.

In v2, ssr.external is set here, so Vue will be externalized. I don't know what will happen when alias is used.

vite/packages/plugin-vue/src/index.ts

Line 127 in d4dcdd1

external: ['vue', '@vue/server-renderer']

[brc-dd]

Awesome! Thanks a lot. This seems to work. I am also seeing ~20% performance speed-up compared to what we had before. 🚀

[brc-dd]

Now this is causing another issue, the SSR is not working. The builds are succeeding but the generated HTML has only layout, no content. After building, check any HTML file inside docs/.vitepress/dist, they have content like this:

When that external heuristics option is set:

It seems that useRoute, useData, etc. aren't working properly. Removing that alias has prevented that Error: vitepress data not properly injected in app error, but that data is still not present. Here is the relevant function:

https://github.com/vuejs/vitepress/blob/6174362c53ef68cf460180ea62a7fe8d98ca115c/src/client/app/index.ts#L50

[sapphi-red]

Closing as that was not a bug in Vite.

I created a PR fixing it. See vuejs/vitepress#855 for details.