How to fix The JSX syntax extension is not enabled in React

ReactINTERMEDIATEHIGHUpdated Dec 10, 2025· 287 views

This error occurs when your build configuration is not properly set up to handle JSX syntax. JSX requires explicit configuration in your bundler, Babel setup, or TypeScript compiler to be transformed into valid JavaScript code that browsers can understand.

Quick fix

Fixes The JSX syntax extension is not enabled

{
  "compilerOptions": {
    "jsx": "react-jsx"
  }
}
  1. Check your build tool configuration
  2. For TypeScript projects, add jsx to tsconfig.json
  3. For Babel projects, install and configure @babel/preset-react
  4. For esbuild, enable JSX in build configuration
react — error
{
  "compilerOptions": {
    "jsx": "react-jsx"
  }
}
The JSX syntax extension is not enabled

What this error means

JSX is a special syntax that looks like HTML/XML but must be transformed into JavaScript function calls before the code runs. When your build tool (Webpack, Babel, TypeScript, esbuild, or Vite) is not configured to process JSX, it treats the syntax as invalid JavaScript and throws this error. The error typically occurs during the build process, in tests, or when loading the file.

Typical symptoms

  • Build fails with 'JSX syntax extension is not enabled' during compilation
  • Jest or test runner reports JSX syntax error
  • esbuild or TypeScript compiler rejects .jsx or .tsx files
  • Code containing JSX elements fails to parse
  • Error occurs even though you can see the JSX in your code

Common causes

  1. Babel configuration (@babel/preset-react) is missing or not installed
  2. TypeScript tsconfig.json is missing the jsx compiler option
  3. Build tool (Webpack, esbuild, Vite) is not configured to handle JSX
  4. Test runner like Jest is not set up to process JSX before testing
  5. Wrong file extension used (.js instead of .jsx for JavaScript files)
  6. Using new React JSX runtime but old Babel configuration

How to fix "The JSX syntax extension is not enabled"

1Check your build tool configuration

Identify which tool is processing your code:

- Create React App / Next.js: These have JSX built-in, so the error is unusual
- Webpack: Check webpack.config.js for jsx loader
- esbuild: Check build configuration for jsx: 'automatic' or 'transform'
- Vite: Needs @vitejs/plugin-react
- TypeScript: Check tsconfig.json for jsx option
- Jest: Check jest.config.js or package.json jest section

2For TypeScript projects, add jsx to tsconfig.json

Update your tsconfig.json compilerOptions:

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

Common jsx options:
- "react-jsx" - React 17+ automatic transform (recommended)
- "react" - Classic React transform (requires import React)
- "preserve" - Don't transform, let another tool handle it

3For Babel projects, install and configure @babel/preset-react

Install the required preset:

bash
npm install --save-dev @babel/preset-react

Update your .babelrc or babel.config.js:

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

For TypeScript with Babel, include @babel/preset-typescript:

json
{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-typescript",
    [
      "@babel/preset-react",
      { "runtime": "automatic" }
    ]
  ]
}
4For esbuild, enable JSX in build configuration

Add JSX loader to your esbuild configuration:

javascript
const esbuild = require('esbuild');

esbuild.build({
  entryPoints: ['src/index.jsx'],
  loader: {
    '.jsx': 'jsx',
    '.tsx': 'tsx'
  },
  jsx: 'automatic',
  outfile: 'dist/bundle.js'
});

Or for a craco wrapper around Create React App:

javascript
module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      const jsxRule = webpackConfig.module.rules.find(
        (rule) => rule.test && rule.test.test('file.jsx')
      );
      if (jsxRule) {
        jsxRule.loader = 'esbuild-loader';
        jsxRule.options = { loader: 'tsx', target: 'es2015' };
      }
      return webpackConfig;
    }
  }
};
5For Jest, configure test environment to handle JSX

Update your jest.config.js or package.json jest section:

javascript
module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
  globals: {
    'ts-jest': {
      tsconfig: {
        jsx: 'react-jsx'
      }
    }
  },
  transform: {
    '^.+\\.(ts|tsx)$': 'ts-jest',
    '^.+\\.(js|jsx)$': 'babel-jest'
  }
};

Alternatively, use Babel for Jest:

json
{
  "presets": [
    "@babel/preset-react",
    "@babel/preset-env"
  ]
}
6For Vite projects, install and configure the React plugin

Install the React plugin:

bash
npm install --save-dev @vitejs/plugin-react

Update your vite.config.js:

javascript
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [react()]
});
7Verify your file extensions are correct

Make sure you're using the right file extensions:

- JavaScript with JSX: Use .jsx extension
- TypeScript with JSX: Use .tsx extension
- JavaScript without JSX: Use .js extension
- TypeScript without JSX: Use .ts extension

Some tools may only process JSX in files with the correct extension. If you have JSX in a .js file, rename it to .jsx.

8Clear build cache and rebuild

Sometimes cached build artifacts cause issues:

bash
# Clear common cache directories
rm -rf node_modules/.cache
rm -rf .next  # For Next.js
rm -rf dist   # For custom builds

# Reinstall dependencies
npm install

# Rebuild your project
npm run build

Advanced notes

React 17+ Automatic Transform: React 17 introduced the automatic JSX transform, which doesn't require importing React in files that use JSX. Set your build tool to jsx: 'automatic' or jsx: 'react-jsx' in TypeScript to use this. This is the recommended approach for new projects.

Multiple Transform Versions: Ensure you're not mixing old and new JSX transforms in the same project. The classic transform (jsx: 'react') requires import React from 'react' in every file with JSX, while the automatic transform doesn't.

Monorepos and Workspaces: In monorepo setups, ensure each package has its own proper JSX configuration. Shared Babel or TypeScript configs should include JSX processing.

esbuild Specific: When using esbuild directly or through tools like craco, the loader must be set to either 'jsx' or 'tsx' depending on file type. Setting loader to 'ts' for .tsx files will cause this error.

Babel Caching: If you update your .babelrc, clear Babel cache with rm -rf node_modules/.cache/babel-loader.

Frequently asked questions

What does "The JSX syntax extension is not enabled" mean?
JSX is a special syntax that looks like HTML/XML but must be transformed into JavaScript function calls before the code runs. When your build tool (Webpack, Babel, TypeScript, esbuild, or Vite) is not configured to process JSX, it treats the syntax as invalid JavaScript and throws this error. The error typically occurs during the build process, in tests, or when loading the file.
How do I fix "The JSX syntax extension is not enabled"?
This error occurs when your build configuration is not properly set up to handle JSX syntax. JSX requires explicit configuration in your bundler, Babel setup, or TypeScript compiler to be transformed into valid JavaScript code that browsers can understand.
What causes "The JSX syntax extension is not enabled"?
Babel configuration (@babel/preset-react) is missing or not installed TypeScript tsconfig.json is missing the jsx compiler option Build tool (Webpack, esbuild, Vite) is not configured to handle JSX
Is the "The JSX syntax extension is not enabled" 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