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

ReactBEGINNERHIGHUpdated Dec 10, 2025· 202 views

This error occurs when JSX code is used in a file without properly importing React. With React 17+, the new JSX transform eliminates the need for explicit imports, but configuration issues or older React versions may still cause this error.

Quick fix

Fixes ReferenceError: React is not defined (check JSX import)

npm list react
  1. Check your React version
  2. For React 16 and earlier: Import React
  3. For React 17+: Verify JSX transform configuration
  4. If upgrading from React 16 to 17+: Remove React imports
react — error
npm list react
ReferenceError: React is not defined (check JSX import)

What this error means

React components use JSX syntax, which is transformed into function calls at compile time. Before React 17, every file using JSX needed to import React to have it in scope. React 17 introduced a new JSX transform that automatically imports the necessary runtime functions, but if your tooling isn't configured correctly or you're using an older React version, you'll see this error when the browser tries to execute the transformed code. The error message indicates that the JavaScript code tries to reference the `React` object, but it hasn't been imported or isn't available in the current scope.

Typical symptoms

  • Browser console shows 'ReferenceError: React is not defined'
  • Error occurs on JSX elements like <Component /> or <div>
  • Application fails to load or renders blank page
  • ESLint warnings about React not being in scope (older versions)

Common causes

  1. React is not imported at the top of the file (React <17 with classic JSX transform)
  2. Build tool is not configured for React 17+ new JSX transform
  3. Babel or TypeScript configuration does not have JSX runtime set to 'automatic'
  4. Mixing old and new JSX transforms in the same project
  5. TypeScript tsconfig.json has incorrect jsx compiler option
  6. Custom bundler configuration missing JSX transform plugin

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

1Check your React version

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

Run:

bash
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.

2For React 16 and earlier: Import React

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

javascript
import React from 'react';

Example:

javascript
import React from 'react';

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

export default MyComponent;
3For React 17+: Verify JSX transform configuration

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:

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

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

json
{
  "presets": [
    [
      "@babel/preset-react",
      { "runtime": "automatic" }
    ]
  ]
}
4If upgrading from React 16 to 17+: Remove React imports

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:

javascript
import React from 'react';

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

After:

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

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

5Verify dependencies are installed

Make sure React and React DOM are properly installed:

bash
npm install react react-dom

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

bash
rm -rf node_modules package-lock.json
npm install
6For custom bundlers: Check webpack/bundler config

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

Webpack example:

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

Advanced notes

JSX Pragma Compatibility: If you're using a CSS-in-JS library (like Emotion) with JSX pragmas, be aware that JSX pragmas (/** @jsx */) may conflict with the new automatic runtime. As a workaround, use /** @jsxRuntime classic */ to revert to the classic transform for that file.

ESLint Configuration: Older ESLint rules required React to be in scope (react/jsx-no-undef and react/react-in-jsx-scope). With React 17+, these rules can generate false positives. Update your ESLint config to disable react-in-jsx-scope if using React 17+:

json
{
  "rules": {
    "react/react-in-jsx-scope": "off"
  }
}

Backward Compatibility: The new JSX transform has been backported to React 15.7.0, React 16.14.0, and React 0.14.10, so you can use modern JSX patterns without upgrading beyond the minimum version.

Module Resolution: If you have TypeScript with skipLibCheck enabled, ensure @types/react is installed: npm install --save-dev @types/react.

Frequently asked questions

What does "ReferenceError: React is not defined (check JSX import)" mean?
React components use JSX syntax, which is transformed into function calls at compile time. Before React 17, every file using JSX needed to import React to have it in scope. React 17 introduced a new JSX transform that automatically imports the necessary runtime functions, but if your tooling isn't configured correctly or you're using an older React version, you'll see this error when the browser tries to execute the transformed code.
How do I fix "ReferenceError: React is not defined (check JSX import)"?
This error occurs when JSX code is used in a file without properly importing React. With React 17+, the new JSX transform eliminates the need for explicit imports, but configuration issues or older React versions may still cause this error.
What causes "ReferenceError: React is not defined (check JSX import)"?
React is not imported at the top of the file (React <17 with classic JSX transform) Build tool is not configured for React 17+ new JSX transform Babel or TypeScript configuration does not have JSX runtime set to 'automatic'
Is the "ReferenceError: React is not defined (check JSX import)" error serious?
Yes. This is a high-severity error that usually blocks work until it is fixed, but the steps above resolve it.

Official resources & further reading