How to fix Babel plugin for JSX is not installed in React

Check your package.json file to see if @babel/preset-react (or @babel/plugin-transform-react-jsx) is listed in devDependencies. If it is missing, you need to install it.

# Install the recommended Babel React preset
npm install --save-dev @babel/preset-react @babel/core

# Or using yarn
yarn add --dev @babel/preset-react @babel/core

# Or if you prefer the individual plugin instead
npm install --save-dev @babel/plugin-transform-react-jsx @babel/core

Note: @babel/core is the Babel compiler itself and must always be installed.

Babel needs a configuration file to know which presets and plugins to use. Create a .babelrc file in the root of your project (same directory as package.json).

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

Alternatively, you can use babel.config.js:

module.exports = {
  presets: ["@babel/preset-react", "@babel/preset-env"]
};

The @babel/preset-react preset automatically includes all the plugins Babel needs to transform React JSX into JavaScript. The @babel/preset-env preset handles modern JavaScript syntax.

Make sure your webpack, Parcel, or other bundler is configured to run Babel on JavaScript and JSX files. For webpack, check that you have babel-loader installed and configured:

// webpack.config.js
module: {
  rules: [
    {
      test: /\.(js|jsx|ts|tsx)$/,
      exclude: /node_modules/,
      use: {
        loader: "babel-loader"
      }
    }
  ]
}

Install babel-loader if needed:

npm install --save-dev babel-loader

Build tools like webpack, Next.js, and Create React App cache compiled files. Clear the cache and rebuild to ensure Babel processes your files with the new configuration.

# For most projects using npm scripts
npm run build

# For Next.js projects
rm -rf .next && npm run build

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

# For webpack projects
rm -rf dist && npm run build

In React 17 and later, you can use the new automatic JSX runtime, which simplifies configuration. Update your .babelrc to use it:

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

With the automatic runtime, you no longer need to import React in every file that uses JSX. Babel handles the import automatically. If you are using React 16 or older, omit the runtime option or set it to "classic".

Run Babel with the --show-config flag to see which configuration is actually being used:

npx babel --show-config

This command displays the merged Babel configuration for the current directory. Verify that @babel/preset-react (or your JSX plugin) is listed in the output. If it is not, Babel is not finding your configuration file. Check that:

1. The configuration file (.babelrc or babel.config.js) is in the correct directory (project root)
2. The file syntax is valid (proper JSON or JavaScript)
3. The file is not ignored by .babelignore or other ignoring mechanisms

All Babel packages should use the same major version. Mismatches can cause the JSX plugin not to work. Run:

npm list @babel/core @babel/preset-react @babel/preset-env

Verify that all @babel/* packages are at the same major version (e.g., all @7.x.x or all @8.x.x). If versions differ, update them to match:

npm install --save-dev @babel/core@latest @babel/preset-react@latest @babel/preset-env@latest

If you are using TypeScript with JSX, you may need @babel/preset-typescript as well:

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

Alternatively, you can let TypeScript handle JSX transformation and configure it in tsconfig.json:

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