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

ReactINTERMEDIATEHIGH

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

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

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

What this error means

Typical symptoms

Common causes

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

Advanced notes

Related errors

Official resources & further reading