fix(optimizer): discover correct jsx runtime during scan (#20495)

Author: hi-ogawa

packages/vite/src/node/__tests__/fixtures/scan-jsx-runtime/entry-jsx.tsx

@@ -0,0 +1,4 @@
+;(globalThis as any).__test_scan_jsx_runtime ??= 0
+;(globalThis as any).__test_scan_jsx_runtime++
+
+export default <div />

packages/vite/src/node/__tests__/fixtures/scan-jsx-runtime/entry-no-jsx.js

@@ -0,0 +1,3 @@
+import * as vue from 'vue'
+
+export default vue

packages/vite/src/node/__tests__/fixtures/scan-jsx-runtime/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "vue",
+    "strict": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+    "moduleResolution": "Bundler",
+    "module": "ESNext",
+    "target": "ESNext",
+    "lib": ["ESNext", "DOM", "DOM.Iterable"]
+  }
+}

packages/vite/src/node/__tests__/package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@vitejs/parent": "link:./packages/parent",
     "@vitejs/cjs-ssr-dep": "link:./fixtures/cjs-ssr-dep",
-    "@vitejs/test-dep-conditions": "file:./fixtures/test-dep-conditions"
+    "@vitejs/test-dep-conditions": "file:./fixtures/test-dep-conditions",
+    "vue": "^3.5.18"
   }
 }

packages/vite/src/node/__tests__/scan.spec.ts

@@ -1,6 +1,8 @@
+import path from 'node:path'
 import { describe, expect, test } from 'vitest'
 import { commentRE, importsRE, scriptRE } from '../optimizer/scan'
 import { multilineCommentsRE, singlelineCommentsRE } from '../utils'
+import { createServer, createServerModuleRunner } from '..'
 
 describe('optimizer-scan:script-test', () => {
   const scriptContent = `import { defineComponent } from 'vue'
@@ -123,3 +125,46 @@ describe('optimizer-scan:script-test', () => {
     expect(ret).not.toContain('export default')
   })
 })
+
+test('scan jsx-runtime', async (ctx) => {
+  const server = await createServer({
+    configFile: false,
+    logLevel: 'error',
+    root: path.join(import.meta.dirname, 'fixtures', 'scan-jsx-runtime'),
+    environments: {
+      client: {
+        // silence client optimizer
+        optimizeDeps: {
+          noDiscovery: true,
+        },
+      },
+      ssr: {
+        resolve: {
+          noExternal: true,
+        },
+        optimizeDeps: {
+          force: true,
+          noDiscovery: false,
+          entries: ['./entry-jsx.tsx', './entry-no-jsx.js'],
+        },
+      },
+    },
+  })
+
+  // start server to ensure optimizer run
+  await server.listen()
+  ctx.onTestFinished(() => server.close())
+
+  const runner = createServerModuleRunner(server.environments.ssr, {
+    hmr: { logger: false },
+  })
+
+  // flush initial optimizer by importing any file
+  await runner.import('./entry-no-jsx.js')
+
+  // verify jsx won't trigger optimizer re-run
+  const mod1 = await runner.import('./entry-jsx.js')
+  const mod2 = await runner.import('./entry-jsx.js')
+  expect((globalThis as any).__test_scan_jsx_runtime).toBe(1)
+  expect(mod1).toBe(mod2)
+})

packages/vite/src/node/optimizer/scan.ts

@@ -294,8 +294,31 @@ async function prepareEsbuildScanner(
     const { tsconfig } = await loadTsconfigJsonForFile(
       path.join(environment.config.root, '_dummy.js'),
     )
-    if (tsconfig.compilerOptions?.experimentalDecorators) {
-      tsconfigRaw = { compilerOptions: { experimentalDecorators: true } }
+    if (
+      tsconfig.compilerOptions?.experimentalDecorators ||
+      tsconfig.compilerOptions?.jsx ||
+      tsconfig.compilerOptions?.jsxFactory ||
+      tsconfig.compilerOptions?.jsxFragmentFactory ||
+      tsconfig.compilerOptions?.jsxImportSource
+    ) {
+      tsconfigRaw = {
+        compilerOptions: {
+          experimentalDecorators:
+            tsconfig.compilerOptions?.experimentalDecorators,
+          // esbuild uses tsconfig fields when both the normal options and tsconfig was set
+          // but we want to prioritize the normal options
+          jsx: esbuildOptions.jsx ? undefined : tsconfig.compilerOptions?.jsx,
+          jsxFactory: esbuildOptions.jsxFactory
+            ? undefined
+            : tsconfig.compilerOptions?.jsxFactory,
+          jsxFragmentFactory: esbuildOptions.jsxFragment
+            ? undefined
+            : tsconfig.compilerOptions?.jsxFragmentFactory,
+          jsxImportSource: esbuildOptions.jsxImportSource
+            ? undefined
+            : tsconfig.compilerOptions?.jsxImportSource,
+        },
+      }
     }
   }
 
@@ -310,6 +333,7 @@ async function prepareEsbuildScanner(
     format: 'esm',
     logLevel: 'silent',
     plugins: [...plugins, plugin],
+    jsxDev: !environment.config.isProduction,
     ...esbuildOptions,
     tsconfigRaw,
   })