fix(react): respect tsconfig jsxImportSource by default (#726)

hi-ogawa · claude · web-flow · commit e2f0c78a4ff0 · 2025-08-19T11:17:55.000+09:00
Co-authored-by: Claude &lt;noreply@anthropic.com&gt;
diff --git a/packages/plugin-react/CHANGELOG.md b/packages/plugin-react/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+### Respect tsconfig `jsxImportSource` ([#726](https://github.com/vitejs/vite-plugin-react/pull/726))
+
 ### Fix `reactRefreshHost` option on rolldown-vite ([#716](https://github.com/vitejs/vite-plugin-react/pull/716))
 
 ### Fix `RefreshRuntime` being injected twice for class components on rolldown-vite ([#708](https://github.com/vitejs/vite-plugin-react/pull/708))
diff --git a/packages/plugin-react/README.md b/packages/plugin-react/README.md
@@ -38,7 +38,7 @@ export default defineConfig({
 
 ### jsxImportSource
 
-Control where the JSX factory is imported from. Default to `'react'`
+Control where the JSX factory is imported from. By default, this is inferred from `jsxImportSource` from corresponding a tsconfig file for a transformed file.
 
 ```js
 react({ jsxImportSource: '@emotion/react' })
diff --git a/packages/plugin-react/src/index.ts b/packages/plugin-react/src/index.ts
@@ -153,7 +153,7 @@ export default function viteReact(opts: Options = {}): Plugin[] {
             oxc: {
               jsx: {
                 runtime: 'automatic',
-                importSource: jsxImportSource,
+                importSource: opts.jsxImportSource,
                 refresh: command === 'serve',
               },
               jsxRefreshInclude: include,
@@ -174,7 +174,8 @@ export default function viteReact(opts: Options = {}): Plugin[] {
         return {
           esbuild: {
             jsx: 'automatic',
-            jsxImportSource: jsxImportSource,
+            // keep undefined by default so that vite's esbuild transform can prioritize jsxImportSource from tsconfig
+            jsxImportSource: opts.jsxImportSource,
           },
           optimizeDeps: { esbuildOptions: { jsx: 'automatic' } },
         }
diff --git a/playground/tsconfig-jsx-preserve/__tests__/tsconfig-jsx-preserve.spec.ts b/playground/tsconfig-jsx-preserve/__tests__/tsconfig-jsx-preserve.spec.ts
@@ -0,0 +1,6 @@
+import { expect, test } from 'vitest'
+import { page } from '~utils'
+
+test('override tsconfig jsx preserve', async () => {
+  await expect.poll(() => page.textContent('#app')).toBe('ok')
+})
diff --git a/playground/tsconfig-jsx-preserve/index.html b/playground/tsconfig-jsx-preserve/index.html
@@ -0,0 +1,2 @@
+<div id="app"></div>
+<script type="module" src="./src/main.tsx"></script>
diff --git a/playground/tsconfig-jsx-preserve/package.json b/playground/tsconfig-jsx-preserve/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "@vitejs/test-react-tsconfig-jsx-preserve",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "debug": "node --inspect-brk vite",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.9",
+    "@types/react-dom": "^19.1.7",
+    "@vitejs/plugin-react": "workspace:*"
+  }
+}
diff --git a/playground/tsconfig-jsx-preserve/src/App.tsx b/playground/tsconfig-jsx-preserve/src/App.tsx
@@ -0,0 +1,3 @@
+export default function App() {
+  return <div>ok</div>
+}
diff --git a/playground/tsconfig-jsx-preserve/src/main.tsx b/playground/tsconfig-jsx-preserve/src/main.tsx
@@ -0,0 +1,4 @@
+import ReactDOM from 'react-dom/client'
+import App from './App.jsx'
+
+ReactDOM.createRoot(document.getElementById('app')!).render(<App />)
diff --git a/playground/tsconfig-jsx-preserve/tsconfig.json b/playground/tsconfig-jsx-preserve/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "include": ["src"],
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "types": ["vite/client"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  }
+}
diff --git a/playground/tsconfig-jsx-preserve/vite.config.ts b/playground/tsconfig-jsx-preserve/vite.config.ts
@@ -0,0 +1,6 @@
+import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  plugins: [react()],
+})
diff --git a/playground/tsconfig/__tests__/tsconfig.spec.ts b/playground/tsconfig/__tests__/tsconfig.spec.ts
@@ -0,0 +1,10 @@
+import { expect, test } from 'vitest'
+import { page } from '~utils'
+
+test('respect tsconfig jsxImportSource', async () => {
+  await expect
+    .poll(() =>
+      page.getByTestId('emotion').evaluate((el) => getComputedStyle(el).color),
+    )
+    .toBe('rgb(255, 0, 0)')
+})
diff --git a/playground/tsconfig/index.html b/playground/tsconfig/index.html
@@ -0,0 +1,2 @@
+<div id="app"></div>
+<script type="module" src="./src/main.tsx"></script>
diff --git a/playground/tsconfig/package.json b/playground/tsconfig/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "@vitejs/test-react-tsconfig",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "debug": "node --inspect-brk vite",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.9",
+    "@types/react-dom": "^19.1.7",
+    "@vitejs/plugin-react": "workspace:*"
+  }
+}
diff --git a/playground/tsconfig/src/App.tsx b/playground/tsconfig/src/App.tsx
@@ -0,0 +1,7 @@
+export default function App() {
+  return (
+    <div data-testid="emotion" css={{ color: 'rgb(255, 0, 0)' }}>
+      This should be red
+    </div>
+  )
+}
diff --git a/playground/tsconfig/src/main.tsx b/playground/tsconfig/src/main.tsx
@@ -0,0 +1,4 @@
+import ReactDOM from 'react-dom/client'
+import App from './App.jsx'
+
+ReactDOM.createRoot(document.getElementById('app')!).render(<App />)
diff --git a/playground/tsconfig/tsconfig.json b/playground/tsconfig/tsconfig.json
@@ -0,0 +1,26 @@
+{
+  "include": ["src"],
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "types": ["vite/client"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "@emotion/react",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  }
+}
diff --git a/playground/tsconfig/vite.config.ts b/playground/tsconfig/vite.config.ts
@@ -0,0 +1,6 @@
+import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  plugins: [react()],
+})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+<div id="app"></div>`
	`2`	`+<script type="module" src="./src/main.tsx"></script>`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export default function App() {`
	`2`	`+ return <div>ok</div>`
	`3`	`+}`