How to fix ReferenceError: React is not defined (check JSX import) in React

First, verify which version of React you have installed. Open your package.json and look for the react dependency version.

Run:

npm list react

If you're on React 17 or later, you should not need to import React for JSX. If you're on React 16 or earlier, you must import React in every file using JSX.

If you're using React 16 or earlier, add this import to the top of your file:

import React from 'react';

Example:

import React from 'react';

function MyComponent() {
  return <div>Hello World</div>;
}

export default MyComponent;

With React 17+, you don't need to import React, but your build tools must be configured for the automatic JSX transform.

If using Create React App 4.0+:
No configuration needed—it's automatic.

If using TypeScript:
Ensure your tsconfig.json has:

{
  "compilerOptions": {
    "jsx": "react-jsx"
  }
}

If using Babel:
Ensure your .babelrc or babel.config.js has:

{
  "presets": [
    [
      "@babel/preset-react",
      { "runtime": "automatic" }
    ]
  ]
}

If you've upgraded to React 17 or later and are using the new JSX transform, you can remove import React from 'react' from your files.

Before:

import React from 'react';

function App() {
  return <h1>Hello</h1>;
}

After:

function App() {
  return <h1>Hello</h1>;
}

This works automatically with React 17+ and proper tooling configuration.

Make sure React and React DOM are properly installed:

npm install react react-dom

If you've recently deleted node_modules or moved the project, reinstall all dependencies:

rm -rf node_modules package-lock.json
npm install

If you're using a custom webpack, Parcel, or other bundler setup, ensure the JSX loader is configured.

Webpack example:

module: {
  rules: [
    {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: [
            ['@babel/preset-react', { runtime: 'automatic' }]
          ]
        }
      }
    }
  ]
}