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

#react #vite #errors #note

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.