Fixing "Support for the experimental syntax 'jsx' isn't currently enabled"

This error occurs when Babel, the JavaScript compiler, encounters JSX syntax but isn't properly configured to process it. JSX allows you to write HTML-like syntax in JavaScript, but it needs to be transformed into regular JavaScript that browsers can understand.

Common Causes and Solutions

Missing Babel Presets Configuration

The most common cause is improper Babel configuration. Babel needs specific presets to understand and transform JSX.

babel.config.js

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

.babelrc

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

Webpack Configuration Issues

If using Webpack, ensure your babel-loader is configured with the correct presets:

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

File Extension Issues

Make sure React components use the correct file extensions:

• Use .jsx for files containing JSX
• Or configure Babel to process .js files with JSX

TIP

When converting from Create React App to Vite or other build tools, rename .js files containing JSX to .jsx to avoid confusion.

Monorepo and Workspace Configuration

If using yarn workspaces or monorepos, you may need to configure Babel to look beyond the current package:

// webpack.config.js
{
  test: /\.(js|jsx)$/,
  use: ['babel-loader'],
  options: {
    presets: ['@babel/preset-env'],
    babelrcRoots: ['../*'] // Look for babel config in parent directories
  }
}

React Version Considerations

For React 18+ with the new JSX transform, use this configuration:

module.exports = {
  presets: [
    ["@babel/preset-env", { targets: { node: "current" } }],
    ["@babel/preset-react", { runtime: "automatic" }], // Automatic runtime
  ],
};

Framework-Specific Solutions

Create React App Ejected Projects

If you've ejected from Create React App, check that babelrc and configFile aren't set to false in your webpack config:

// webpack.config.js (after ejecting)
{
  // @remove-on-eject-begin
  babelrc: true, // Change from false to true
  configFile: true,
  // @remove-on-eject-end
}

Rails with Webpacker

For Rails applications using Webpacker, ensure JSX extensions are included:

# config/webpacker.yml
extensions:
  - .jsx
  - .mjs
  - .js
  # ... other extensions

Then run:

bin/rails webpacker:install:react

TypeScript Projects

For TypeScript projects using ts-jest, ensure proper configuration:

npx ts-jest config:init

This adds the necessary transform configuration to your Jest config.

Troubleshooting Steps

1. Verify Dependencies: Ensure all required Babel packages are installed:

   npm install --save-dev @babel/preset-react @babel/preset-env babel-loader

2. Check File Locations: Place Babel config files (babel.config.js or .babelrc) in your project root.

3. Verify Import Paths: Ensure you're importing from compiled distributions, not source directories:

   // ❌ Avoid importing from src
   import { Component } from 'library/src';
   
   // ✅ Import from main package
   import { Component } from 'library';

4. Check JSON Syntax: Validate your package.json has proper JSON syntax (no missing brackets).

5. Clear Cache: Sometimes Babel cache causes issues. Try:

   rm -rf node_modules/.cache/babel-loader

Complete Working Example

Here's a complete setup that should work for most React projects:

package.json

{
  "scripts": {
    "dev": "webpack serve --mode development",
    "build": "webpack --mode production"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.22.0",
    "@babel/preset-env": "^7.22.0",
    "@babel/preset-react": "^7.22.0",
    "babel-loader": "^9.1.0",
    "webpack": "^5.88.0",
    "webpack-cli": "^5.1.0",
    "webpack-dev-server": "^4.15.0"
  }
}

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx']
  }
};

babel.config.js

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

By following these configurations and troubleshooting steps, you should be able to resolve the JSX support error and successfully compile your React application.