Support SSR in plugin-vue-jsx

[seanaye]

Describe the bug

Vite is unable to SSR when using jsx/tsx style Vue components. I have been told by a Vue maintainer this is is because @vite/plugin-vue-jsx is failing to inject modules into ssr context. Please see original issue for more context

Reproduction

Please provide a link to a repo that can reproduce the problem you ran into.

https://github.com/seanaye/vue3-tsx-tailwind

1. clone
2. yarn
3. yarn dev
4. open localhost:3000

Cannot read property forEach of undefined

I previously assumed this error came from renderToString from @vue/server-renderer, see line 16 of entry-server.ts. Apparently this comes from the jsx plugin not injecting modules into ssr context.

System Info

• vite version: 2.0.0 beta 65
• Operating System: Mac OS Big Sur M1 Chip
• Node version: 15.3.0
• Package manager (npm/yarn/pnpm) and version: yarn 1.22.10

[seanaye]

I think I will try my hand at a PR for this tomorrow. Would love to contribute to such an awesome project

[seanaye]

Started a PR but I haven't made much progress. https://github.com/seanaye/vite/tree/seanaye/fix/supportSsrJsx/packages/plugin-vue-jsx

[yyx990803]

Fixed in 30e92a1 - but thanks for your interest in working on a PR!

[seanaye]

@yyx990803 Thanks Evan! This works great for imported components but it doesn't work for App or page level components. Please see repro https://github.com/seanaye/vue3-tsx-tailwind.

[yyx990803]

Should be addressed in 7a6aa2a

Note Vue 3's JSX transform has issues with SSR when using text nodes - e.g. <div>foo { bar }</div> will result in a hydration mismatch because it compiles to two text VNodes but the browser merges them into a single text node. This might be something we'll have to fix in either the jsx babel plugin or Vue 3 core. For now you'll have to use

<div>{`foo ${bar}`}</div>

to work around it.

[seanaye]

The latest @vitejs/plugin-vue-jsx is giving a new error. This can be reproduced with repo above.

I have updated all the text nodes to use template literals, but this appears to be unrelated.

11:38:13 a.m. [vite] Error when evaluating SSR module /__vue-jsx-ssr-register-helper:
Error: Cannot find module 'vue' from '/'
    at Function.resolveSync [as sync] (/Users/seanaye/dev/vue3-tsx-tailwind/node_modules/resolve/lib/sync.js:90:15)
    at resolveFrom (/Users/seanaye/dev/vue3-tsx-tailwind/node_modules/vite/dist/node/chunks/dep-5645e129.js:13111:29)
    at resolve$2 (/Users/seanaye/dev/vue3-tsx-tailwind/node_modules/vite/dist/node/chunks/dep-5645e129.js:67629:22)
    at nodeRequire (/Users/seanaye/dev/vue3-tsx-tailwind/node_modules/vite/dist/node/chunks/dep-5645e129.js:67610:36)
    at ssrImport (/Users/seanaye/dev/vue3-tsx-tailwind/node_modules/vite/dist/node/chunks/dep-5645e129.js:67571:20)
    at eval (/__vue-jsx-ssr-register-helper:3:31)
    at ssrLoadModule (/Users/seanaye/dev/vue3-tsx-tailwind/node_modules/vite/dist/node/chunks/dep-5645e129.js:67597:166)
    at async Promise.all (index 2)
    at async ssrLoadModule (/Users/seanaye/dev/vue3-tsx-tailwind/node_modules/vite/dist/node/chunks/dep-5645e129.js:67558:5)
11:38:13 a.m. [vite] Error when evaluating SSR module /src/components/Foo.tsx:
TypeError: __vite_ssr_import_2__.ssrRegisterHelper is not a function
    at eval (/src/components/Foo.tsx:23:23)
    at ssrLoadModule (/Users/seanaye/dev/vue3-tsx-tailwind/node_modules/vite/dist/node/chunks/dep-5645e129.js:67597:166)
    at async Promise.all (index 1)
    at async ssrLoadModule (/Users/seanaye/dev/vue3-tsx-tailwind/node_modules/vite/dist/node/chunks/dep-5645e129.js:67558:5)
11:38:13 a.m. [vite] Error when evaluating SSR module /src/pages/Home.tsx:
TypeError: __vite_ssr_import_3__.ssrRegisterHelper is not a function
    at eval (/src/pages/Home.tsx:25:23)
    at ssrLoadModule (/Users/seanaye/dev/vue3-tsx-tailwind/node_modules/vite/dist/node/chunks/dep-5645e129.js:67597:166)
TypeError: Cannot read property 'beforeRouteEnter' of undefined
    at /Users/seanaye/dev/vue3-tsx-tailwind/node_modules/vue-router/dist/vue-router.cjs.js:1986:52
node:internal/process/promises:225
          triggerUncaughtException(err, true /* fromPromise */);
          ^

TypeError: Cannot read property 'beforeRouteEnter' of undefined
    at /Users/seanaye/dev/vue3-tsx-tailwind/node_modules/vue-router/dist/vue-router.cjs.js:1986:52
error Command failed with exit code 1.

Thanks very much for your support on this @yyx990803

[yyx990803]

Oh yeah this relies on a new Vite core release

[seanaye]

@yyx990803 I think it's getting very close. Using with the latest vite core gives following error. Maybe this is a vue-router issue now and not a vite one?

TypeError: Cannot read property 'beforeRouteEnter' of undefined
    at /Users/seanaye/dev/vue3-tsx-tailwind/node_modules/vue-router/dist/vue-router.cjs.js:1986:52
node:internal/process/promises:225
          triggerUncaughtException(err, true /* fromPromise */);
          ^

TypeError: Cannot read property 'beforeRouteEnter' of undefined
    at /Users/seanaye/dev/vue3-tsx-tailwind/node_modules/vue-router/dist/vue-router.cjs.js:1986:52