Fixing “React is not defined” Error in Your React Application

This error occurs when you’re trying to use JSX syntax without properly importing React. Here’s how to resolve it and understand why it happens.

Why This Error Occurs

1. Missing React Import: JSX gets transformed to React.createElement() calls
2. Incorrect Babel Configuration: JSX transformation not set up properly
3. New JSX Transform (React 17+): Different import requirements

Solutions

1. Import React (Traditional Approach – Pre React 17)

// ✅ Add this at the top of your component file
import React from 'react';

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

2. Using New JSX Transform (React 17+)

If you’re using React 17+ with updated tooling:

1. First ensure your Babel config supports the new transform:

// babel.config.json or .babelrc
{
  "presets": [
    ["@babel/preset-react", {
      "runtime": "automatic"
    }]
  ]
}

2. Then you can write components without importing React:

// ✅ No React import needed with new JSX transform
function MyComponent() {
  return <div>Hello World</div>;
}

3. For Create React App Users

Create React App v4+ uses the new JSX transform automatically. Just ensure you have:

// package.json
"dependencies": {
  "react": "^17.0.0 || ^18.0.0",
  "react-dom": "^17.0.0 || ^18.0.0"
}

Common Fixes for Different Scenarios

1. If Using Webpack

Ensure your webpack config includes:

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

2. If Using TypeScript

Update your tsconfig.json:

{
  "compilerOptions": {
    "jsx": "react-jsx" // or "react-jsxdev" for development
  }
}

3. If Using ESLint

Configure your .eslintrc.json:

{
  "rules": {
    "react/react-in-jsx-scope": "off" // For new JSX transform
  }
}

Verification Steps

1. Check React version:

   npm list react

2. Verify Babel configuration
3. Check for syntax errors in your components

Best Practices

1. Consistent Imports: Either always import React or use new transform
2. Update Tooling: Use current versions of React, Babel, Webpack
3. TypeScript Users: Configure jsx properly
4. Linting: Set up ESLint to catch missing imports

If You’re Still Seeing the Error

1. Clear your cache:

   npm start -- --reset-cache

2. Check for conflicting React versions:

   npm ls react

3. Verify your entry point (usually index.js) imports React:

   import React from 'react';
   import ReactDOM from 'react-dom/client';

Remember that since React 17, you have two options:

1. Traditional: Import React in every file using JSX
2. New JSX Transform: Configure your build tools and don’t import React

Choose one approach and be consistent across your project.