[plugin:vite:import-analysis] Failed to resolve import "react/jsx-dev-runtime" from "src/index.tsx". Does the file exist?

A problem while migrating from CRA to Vite

---

Error Message:

[plugin:vite:import-analysis] Failed to resolve import "react/jsx-dev-runtime" from "src/index.tsx". Does the file exist?

---

Solution: Add an option classic to jsxRuntime of the plugin react in the vite config file.

[vite.config.ts]

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import viteTsconfigPaths from 'vite-tsconfig-paths';
import svgrPlugin from 'vite-plugin-svgr';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react({
    jsxRuntime: 'classic' // Add this line
  }), viteTsconfigPaths(), svgrPlugin()],
});

---

@vitejs/plugin-react : By default, the plugin uses the automatic JSX runtime. However, if you encounter any issues, you may opt out using the jsxRuntime option.

Comments

[Fuvavi]

Thanks so much. It's work very well.

[SeongKuk Han]

glad it worked for you :)

[Doan Kim Huy]

Thank you so much!!!

[Vikrant Bhat]

This removed that error but now I'm getting the react import not found error

[Christina Hastenrath]

Thank you, this saved me