[plugin:plugin-vue-jsx] Unable to convert tsx correctly when performing server side rendering in SSR mode

[dadajam4]

Describe the bug

The jsx transpiling fails when using vite-ssr and plugin-vue-jsx at the same time.
I think this is because __default__ is not processed correctly in the following source code.

vite/packages/plugin-vue-jsx/index.js

Lines 207 to 210 in 524a018

	if (ssr) {
	let ssrInjectCode =
	`\nimport { ssrRegisterHelper } from "${ssrRegisterHelperId}"` +
	`\nconst __moduleId = ${JSON.stringify(id)}`

The duplication procedure and my fix (I don't know if it's appropriate) can be replicated in the following repository:

Reproduction

It can be reproduced in the following repository.
https://github.com/dadajam4/vite-plugin-vue-jsx-issue-20210324

System Info

Output of npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers:

  System:
    OS: macOS Mojave 10.14.6
    CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
    Memory: 1.79 GB / 32.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 14.15.4 - ~/.nodebrew/current/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.10 - ~/.nodebrew/current/bin/npm
  Browsers:
    Chrome: 89.0.4389.90
    Firefox: 86.0
    Safari: 14.0.3
  npmPackages:
    @vitejs/plugin-vue: ^1.1.5 => 1.1.5
    vite: ^2.1.2 => 2.1.2

Used package manager: npm 6.14.10

Logs

9:48:22 [vite] Error when evaluating SSR module /App.tsx:
ReferenceError: __default__ is not defined
    at eval (/App.tsx:20:41)
    at instantiateModule (/Users/dadajam4/projects/develops/vite-drive/node_modules/vite/dist/node/chunks/dep-efe32886.js:68893:166)
ReferenceError: __default__ is not defined
    at eval (/App.tsx:20:41)
    at instantiateModule (/Users/dadajam4/projects/develops/vite-drive/node_modules/vite/dist/node/chunks/dep-efe32886.js:68893:166)
ReferenceError: __default__ is not defined
    at eval (/App.tsx:20:41)
    at instantiateModule (/Users/dadajam4/projects/develops/vite-drive/node_modules/vite/dist/node/chunks/dep-efe32886.js:68893:166)

---

Before submitting the issue, please make sure you do the following

• 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.
• Provide a description in this issue that describes the bug.
• 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 https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

[dadajam4]

Supplement. The fix I tried is the code below.
I think the cause is that const __default__ = defineComponent does not exist.

https://github.com/dadajam4/vite-plugin-vue-jsx-issue-20210324/blob/ae0279e43a0d88c496e811e83dd49a8f6295b1ef/.customs/plugin-vue-jsx/index.js#L208-L218

[Ttou]

try like this

import { defineComponent } from 'vue'
import { RouterView } from 'vue-router'

const component = defineComponent({
  name: 'App',
  setup() {
    return () => <RouterView />
  }
})

export default component

[dadajam4]

@Ttou
Thank you! However, the error still did not improve.

9:48:57 [vite] Error when evaluating SSR module /pages/index.tsx:
ReferenceError: __default__ is not defined
    at eval (/pages/index.tsx:16:41)
    at instantiateModule (/Users/dadajam4/projects/develops/vite-plugin-vue-jsx-issue-20210324/node_modules/vite/dist/node/chunks/dep-efe32886.js:68893:166)
ReferenceError: __default__ is not defined
    at eval (/pages/index.tsx:16:41)
    at instantiateModule (/Users/dadajam4/projects/develops/vite-plugin-vue-jsx-issue-20210324/node_modules/vite/dist/node/chunks/dep-efe32886.js:68893:166)
Error: Couldn't resolve component "default" at "/"
    at /Users/dadajam4/projects/develops/vite-plugin-vue-jsx-issue-20210324/node_modules/vue-router/dist/vue-router.cjs.js:1998:47
(node:46700) UnhandledPromiseRejectionWarning: Error: Couldn't resolve component "default" at "/"
    at /Users/dadajam4/projects/develops/vite-plugin-vue-jsx-issue-20210324/node_modules/vue-router/dist/vue-router.cjs.js:1998:47

[dadajam4]

@Ttou
sorry. The page view component, which is injected into RouterView, has improved as well with code changes! But, why is this ...?

[dadajam4]

I have found that this approach can work around the problem.
(Thank you @Ttou !!!!!)
But

export default xxx = defineComponent (

Ideally, there should be no problem with the natural syntax of, so keep checking for problems.

[KaelWD]

Copying the default export replace block to line 220 fixes it for me

vite/packages/plugin-vue-jsx/index.js

Lines 196 to 202 in fbecf1e

	if (hasDefault) {
	code =
	code.replace(
	/export default defineComponent/g,
	`const __default__ = defineComponent`
	) + `\nexport default __default__`
	}

vite/packages/plugin-vue-jsx/index.js

Lines 219 to 227 in fbecf1e

	if (ssr) {
	let ssrInjectCode =
	`\nimport { ssrRegisterHelper } from "${ssrRegisterHelperId}"` +
	`\nconst __moduleId = ${JSON.stringify(id)}`
	for (const { local } of hotComponents) {
	ssrInjectCode += `\nssrRegisterHelper(${local}, __moduleId)`
	}
	result.code += ssrInjectCode
	}

if (ssr) {
  if (hasDefault) {
    result.code =
      result.code.replace(
        /export default defineComponent/g,
        `const __default__ = defineComponent`
      ) + `\nexport default __default__`
  }

  let ssrInjectCode =
    `\nimport { ssrRegisterHelper } from "${ssrRegisterHelperId}"` +
    `\nconst __moduleId = ${JSON.stringify(id)}`
  for (const { local } of hotComponents) {
    ssrInjectCode += `\nssrRegisterHelper(${local}, __moduleId)`
  }
  result.code += ssrInjectCode
}

[github-actions]

This issue gets locked because it has been closed for more than 14 days.