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

ReactBEGINNERHIGHUpdated Dec 9, 2025· 130 views

This error occurs when Babel cannot transform JSX syntax because the required JSX plugin or preset is missing from your Babel configuration. Babel needs @babel/preset-react or @babel/plugin-transform-react-jsx to convert JSX into regular JavaScript that browsers can execute. Installing the missing dependency and configuring Babel properly resolves this issue.

Quick fix

Fixes Babel plugin for JSX is not installed

# 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
  1. Verify that @babel/preset-react is installed
  2. Create or update your Babel configuration file
  3. Verify that your build tool is using Babel
  4. Clear the build cache and rebuild
react — error
# 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
Babel plugin for JSX is not installed

What this error means

JSX is a syntax extension that lets you write HTML-like code in JavaScript. Browsers cannot natively understand JSX, so Babel (a JavaScript transpiler) must convert it to standard JavaScript function calls like React.createElement(). When this error appears, it means Babel is trying to process your JSX code but cannot find the plugin that handles this transformation. This happens because either the @babel/preset-react preset (which includes JSX support) or the @babel/plugin-transform-react-jsx plugin is not installed in your project's dependencies, or your Babel configuration file does not reference it. Without the proper plugin, Babel sees the JSX syntax as invalid JavaScript and fails to compile your code.

Typical symptoms

  • Build fails with "Support for the experimental syntax 'jsx' isn't currently enabled" error
  • Compilation stops when processing .jsx or .tsx files containing JSX code
  • Console error mentioning "babel-plugin" or "preset" is missing
  • Hot module replacement (HMR) or webpack dev server fails on JSX files
  • Tests fail with Jest unable to parse JSX components
  • Production builds fail at the transpilation step
  • Local development server crashes when you create a new JSX component

Common causes

  1. Missing @babel/preset-react or @babel/plugin-transform-react-jsx in package.json dependencies
  2. Running npm install but the JSX plugin was not saved as a dev dependency (not installed locally)
  3. Babel configuration file (.babelrc, babel.config.js, or babel.config.json) does not include @babel/preset-react in the presets array
  4. Using a custom Babel setup without the JSX plugin specified in the plugins array
  5. Upgrading Babel or other build tools without installing the required JSX dependencies
  6. Workspace or monorepo setup where JSX dependencies are installed at the root but not in the child package
  7. Copy-pasted Babel configuration from an example that references presets/plugins not actually installed

How to fix "Babel plugin for JSX is not installed"

1Verify that @babel/preset-react is installed

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.

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

2Create or update your Babel configuration file

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

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

Alternatively, you can use babel.config.js:

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

3Verify that your build tool is using Babel

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:

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

Install babel-loader if needed:

bash
npm install --save-dev babel-loader
4Clear the build cache and rebuild

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.

bash
# 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
5Check if you need the automatic JSX runtime (React 17+)

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

json
{
  "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".

6Verify your Babel configuration is being loaded

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

bash
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

7Check for version mismatches between Babel packages

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

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

bash
npm install --save-dev @babel/core@latest @babel/preset-react@latest @babel/preset-env@latest
8For TypeScript projects, ensure proper configuration

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

json
{
  "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:

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

Advanced notes

In monorepo or workspace setups using npm workspaces or yarn workspaces, Babel packages must be installed at the workspace root, not in individual package subdirectories. If you see the error only in specific packages, check that they can resolve Babel dependencies from the root node_modules. For Next.js projects, the framework includes Babel configuration automatically, so you rarely need to add @babel/preset-react manually—however, if you customize Babel in next.config.js, ensure you include the React preset. The Babel 8.x release introduced breaking changes; if upgrading from Babel 7.x, check the migration guide to ensure plugin configurations remain compatible. Create React App (CRA) provides Babel configuration out of the box; if you eject from CRA, you must manually configure Babel with @babel/preset-react. For Jest testing, include @babel/preset-react in your Babel configuration even if not using Babel for production builds, because Jest uses Babel to transpile test files. If using Babel with custom plugins, load the JSX plugin first in the plugins array or use @babel/preset-react, which applies plugins in the correct order internally.

Frequently asked questions

What does "Babel plugin for JSX is not installed" mean?
JSX is a syntax extension that lets you write HTML-like code in JavaScript. createElement(). When this error appears, it means Babel is trying to process your JSX code but cannot find the plugin that handles this transformation.
How do I fix "Babel plugin for JSX is not installed"?
This error occurs when Babel cannot transform JSX syntax because the required JSX plugin or preset is missing from your Babel configuration. Babel needs @babel/preset-react or @babel/plugin-transform-react-jsx to convert JSX into regular JavaScript that browsers can execute. Installing the missing dependency and configuring Babel properly resolves this issue.
What causes "Babel plugin for JSX is not installed"?
Missing @babel/preset-react or @babel/plugin-transform-react-jsx in package.json dependencies Running npm install but the JSX plugin was not saved as a dev dependency (not installed locally) Babel configuration file (.babelrc, babel.config.js, or babel.config.json) does not include @babel/preset-react in the presets array
Is the "Babel plugin for JSX is not installed" 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