Compatibility Issue: React 16 with Vite (jsx-dev-runtime error)

[Gandalf-hash]

Description:

I am attempting to migrate a React 16 project to Vite, but I am encountering issues with the JSX runtime. Specifically, I get the following error when running the development server:

import { jsxDEV } from "react/jsx-dev-runtime";
       |                          ^
import * as RefreshRuntime from "/@react-refresh";
const inWebWorker = typeof WorkerGlobalScope !== "undefined" && self instanceof WorkerGlobalScope;

Steps Taken:

1. Installed vite and @vitejs/plugin-react.
2. Configured vite.config.js to use the classic JSX runtime for React 16:

   import { defineConfig } from 'vite';
   import react from '@vitejs/plugin-react';
   
   export default defineConfig({
     plugins: [react()],
     esbuild: {
       jsxFactory: 'React.createElement', // Use React 16's JSX factory
       jsxFragment: 'React.Fragment',    // Use React 16's Fragment
     },
     resolve: {
       extensions: ['.js', '.jsx'], // Ensure Vite resolves .jsx files
     },
   });

3. Verified that react and react-dom are both version ^16.4.1 in package.json.

Observations:

• The error suggests that Vite is still trying to use the jsx-dev-runtime module, which is part of the new JSX transform introduced in React 17.
• React 16 relies on the classic JSX runtime (React.createElement), and I have explicitly configured Vite to use it via the esbuild options.
• Disabling @vitejs/plugin-react or removing React Fast Refresh does not resolve the issue.

Questions:

1. Is React 16 officially supported by Vite, or is it expected to work only with React 17+?
2. If React 16 is supported, is there a specific configuration required to avoid the jsx-dev-runtime error?
3. If React 16 is not supported, are there any workarounds or recommendations for migrating older React projects to Vite?

Environment:

• Vite Version: 6.3.1
• @vitejs/plugin-react Version: 4.4.0
• React Version: 16.4.1
• Node Version: v16.x
• OS: Windows 10

Thank you for your help!

[ArnaudBarre]

You should use the jsxRuntime option: react({ jsxRuntime: 'classic' }). You should not need esbuild options once setup

[Gandalf-hash]

Awesome, it works now Thanks so much for your help 🙌 I had placed the jsxRuntime in the wrong spot earlier, but after fixing it, the app is running now. I also eliminated the esbuild 😄