diff --git a/packages/plugin-react/README.md b/packages/plugin-react/README.md index 1bfe0ef25..88db1a786 100644 --- a/packages/plugin-react/README.md +++ b/packages/plugin-react/README.md @@ -34,12 +34,10 @@ react({ ### Configure the JSX import source -Control where the JSX factory is imported from. This option is ignored for classic `jsxRuntime`. +Control where the JSX factory is imported from. For TS projects this is inferred from the tsconfig. ```js -react({ - jsxImportSource: '@emotion/react', -}) +react({ jsxImportSource: '@emotion/react' }) ``` ## Babel configuration diff --git a/packages/plugin-react/src/index.ts b/packages/plugin-react/src/index.ts index cb4e52ba0..c8e5f2650 100644 --- a/packages/plugin-react/src/index.ts +++ b/packages/plugin-react/src/index.ts @@ -27,8 +27,8 @@ export interface Options { jsxRuntime?: 'classic' | 'automatic' /** * Control where the JSX factory is imported from. - * This option is ignored when `jsxRuntime` is not `"automatic"`. - * @default "react" + * https://esbuild.github.io/api/#jsx-import-source + * For TS projects this is read from tsconfig */ jsxImportSource?: string /** @@ -314,6 +314,12 @@ export default function viteReact(opts: Options = {}): PluginOption[] { name: 'vite:react-refresh', enforce: 'pre', config: () => ({ + optimizeDeps: { + // We can't add `react-dom` because the dependency is `react-dom/client` + // for React 18 while it's `react-dom` for React 17. We'd need to detect + // what React version the user has installed. + include: ['react'], + }, resolve: { dedupe: ['react', 'react-dom'], }, @@ -340,24 +346,7 @@ export default function viteReact(opts: Options = {}): PluginOption[] { }, } - const reactJsxRuntimeId = 'react/jsx-runtime' - const reactJsxDevRuntimeId = 'react/jsx-dev-runtime' - const viteReactJsx: Plugin = { - name: 'vite:react-jsx', - enforce: 'pre', - config() { - return { - optimizeDeps: { - // We can't add `react-dom` because the dependency is `react-dom/client` - // for React 18 while it's `react-dom` for React 17. We'd need to detect - // what React version the user has installed. - include: [reactJsxRuntimeId, reactJsxDevRuntimeId, 'react'], - }, - } - }, - } - - return [viteBabel, viteReactRefresh, useAutomaticRuntime && viteReactJsx] + return [viteBabel, viteReactRefresh] } viteReact.preambleCode = preambleCode diff --git a/playground/ssr-react/vite.config.js b/playground/ssr-react/vite.config.js index 266400b86..6a35552d0 100644 --- a/playground/ssr-react/vite.config.js +++ b/playground/ssr-react/vite.config.js @@ -3,6 +3,7 @@ import react from '@vitejs/plugin-react' export default defineConfig({ plugins: [react()], + optimizeDeps: { include: ['react/jsx-dev-runtime'] }, build: { minify: false, },