How to fix ReferenceError: React is not defined in React

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.

Typical symptoms

• Error appears in browser console: "Uncaught ReferenceError: React is not defined"
• Build process fails with reference errors during JSX compilation
• Components render as blank or crash immediately when loaded
• Error occurs specifically in files containing JSX syntax
• Problem appears after upgrading React version or build configuration changes
• Development server crashes on file save with JSX components

Common causes

1. Missing "import React from 'react'" statement at the top of a file containing JSX (React 16 and earlier, or React 17+ without automatic runtime)
2. React not installed in project dependencies (missing from package.json)
3. Babel configuration missing @babel/preset-react or configured incorrectly
4. Using React 17+ new JSX transform without configuring "runtime: automatic" in Babel preset
5. Webpack or bundler not configured to handle React files properly
6. Incorrect script loading order in HTML files (React script tag loaded after components)
7. Using JSX syntax in files not processed by the bundler or transpiler
8. TypeScript configuration not including JSX support or incorrect jsx compiler option

How to fix "ReferenceError: React is not defined"

npm list react
# or
yarn list react

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

import React from 'react';

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

export default MyComponent;

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

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

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

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

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

<!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>

# 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

rm -rf node_modules package-lock.json
npm install

Advanced notes

Frequently asked questions

What does "ReferenceError: React is not defined" mean?

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

How do I fix "ReferenceError: React is not defined"?

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 causes "ReferenceError: React is not defined"?

Missing "import React from 'react'" statement at the top of a file containing JSX (React 16 and earlier, or React 17+ without automatic runtime) React not installed in project dependencies (missing from package.json) Babel configuration missing @babel/preset-react or configured incorrectly

Is the "ReferenceError: React is not defined" error serious?

Yes. This is a high-severity error that usually blocks work until it is fixed, but the steps above resolve it.

Related errors

• Warning: An update to ForwardRef(Component) inside a test was not wrapped in act(...)

  Warning: An update inside a test was not wrapped in act(...)

  HIGH

• Component is not exported as default

  Fix React components that are not exported as default

  MEDIUM

• Cannot read properties of null (reading "props")

  Cannot read properties of null (reading "props")

  HIGH

• Accessing a component property on a non-existent key in props

  Accessing a component property on a non-existent key in props

  LOW

• Failed to resolve import. Does the file exist?

  How to fix "Failed to resolve import" in React

  HIGH

• npm ERR! code ETIMEDOUT npm ERR! network request to https://registry.npmjs.org timed out

  npm registry request timed out

  MEDIUM

Official resources & further reading

• 📚React Official Documentation
• 📖
  Introducing the New JSX Transform - React Blog(Official Docs)
• 📖
  React 17 introduces new JSX transform - Saeloun Blog(Official Docs)
• Referenceerror: react is not defined [SOLVED]
• 🔗
  React Is Not Defined: Unraveling the Bug With Quick Fixes
• 🐙
  React 17 new JSX Transform: ReferenceError: React is not defined - Gatsby(GitHub)
• 🐙
  "React is not defined" when using a custom _app.tsx and .babelrc using React 17 - Next.js(GitHub)