How to fix ReferenceError: React is not defined in React

ReactBEGINNERHIGH

This error occurs when React is not properly imported or in scope when JSX is used. It commonly happens due to missing import statements, incorrect bundler configuration, or issues with the React 17+ JSX transform.

What this error means

The "ReferenceError: React is not defined" error occurs when your JavaScript code tries to use JSX syntax but the React library is not available in the current scope. This is a fundamental requirement because JSX is not native JavaScript - it needs to be transformed into React.createElement() calls (in React 16 and earlier) or jsx-runtime functions (in React 17+). Prior to React 17, every file containing JSX required an explicit `import React from 'react'` statement at the top, even if React wasn't directly referenced in your code. The JSX transformer relied on React being in scope to compile JSX elements. With React 17's new JSX transform, this requirement was removed when using the automatic runtime configuration, but many projects still encounter this error due to misconfiguration or outdated build setups. This error typically manifests during the build process or at runtime when the bundler (Webpack, Vite, etc.) or transpiler (Babel, TypeScript) cannot resolve the React reference needed for JSX compilation.

How to fix "ReferenceError: React is not defined"

1Verify React is installed in your project

Check that React is listed in your package.json dependencies:

bash

npm list react
# or
yarn list react

If React is not installed or shows errors, install it:

bash

npm install react react-dom
# or
yarn add react react-dom

Ensure you're installing compatible versions of React and ReactDOM.

2Add React import to files containing JSX

For React 16 and earlier, or React 17+ without automatic JSX runtime, add this import to the top of every file using JSX:

javascript

import React from 'react';

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

export default MyComponent;

This ensures React is in scope when JSX is transformed to React.createElement() calls.

3Configure the new JSX transform for React 17+ (recommended)

If you're using React 17 or later, enable the automatic JSX runtime to eliminate the need for React imports. Update your Babel configuration:

For .babelrc or babel.config.js:

json

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

For Next.js: This is enabled by default in Next.js 11+.

For Create React App: Automatic since CRA 4.0.0 with React 17+.

For TypeScript (tsconfig.json):

json

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

After this configuration, you no longer need to import React for JSX to work.

4Verify Babel and Webpack configuration

Ensure your build tools are properly configured to handle React:

Check Babel presets include React:

json

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

For Webpack, ensure babel-loader is configured for .jsx and .js files:

javascript

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react']
          }
        }
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx']
  }
};

Install required packages if missing:

bash

npm install --save-dev @babel/core @babel/preset-react babel-loader

5Check script loading order in HTML files

If you're loading React via CDN or script tags, ensure React is loaded before your component code:

html

<!DOCTYPE html>
<html>
<head>
  <!-- Load React first -->
  <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
</head>
<body>
  <div id="root"></div>

  <!-- Load your component code after React -->
  <script src="./your-app.js"></script>
</body>
</html>

The order is critical - React must be available before any code that uses it.

6Clear cache and rebuild

Build tool caches can sometimes cause issues after configuration changes:

bash

# For npm
rm -rf node_modules/.cache
npm run build

# For Webpack
rm -rf node_modules/.cache
npx webpack --mode development

# For Next.js
rm -rf .next
npm run dev

# For Create React App
rm -rf node_modules/.cache
npm start

Also try deleting and reinstalling node_modules if the issue persists:

bash

rm -rf node_modules package-lock.json
npm install

How to fix ReferenceError: React is not defined in React

What this error means

Typical symptoms

Common causes

How to fix "ReferenceError: React is not defined"

Advanced notes

Related errors

Official resources & further reading