How to fix JSX transform failed in React

ReactINTERMEDIATEHIGHUpdated Dec 8, 2025· 162 views

JSX transform failures occur when your build tool cannot convert JSX syntax into JavaScript, typically due to missing Babel plugins, incorrect configuration, or version mismatches between React and your build tooling.

Quick fix

Fixes JSX transform failed

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}
  1. Verify Babel configuration includes React preset
  2. Install missing Babel dependencies
  3. Configure TypeScript jsx compiler option
  4. Update React to version 17 or higher if using automatic runtime
react — error
{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}
JSX transform failed

What this error means

JSX transform failures happen when the build process cannot convert JSX syntax into regular JavaScript that browsers can execute. JSX is not valid JavaScript - it's a syntax extension that needs to be transformed (transpiled) by tools like Babel or TypeScript before it can run. When this transformation fails, your build process stops and you cannot run your React application. This error commonly appears in several forms: "Support for the experimental syntax 'jsx' isn't currently enabled", "Cannot find module '@babel/plugin-transform-react-jsx'", or "'jsx' is not exported by node_modules/react/jsx-runtime.js". Each variation points to different configuration issues in your build pipeline. The transformation process involves either the classic transform (converting JSX to React.createElement calls) or the newer automatic runtime introduced in React 17 (which auto-imports special functions from react/jsx-runtime). Failures can occur at any stage - missing dependencies, incorrect Babel configuration, TypeScript compiler settings, or version incompatibilities between React and build tools.

Typical symptoms

  • Build process fails with 'Support for the experimental syntax jsx isn't currently enabled'
  • Error message 'Cannot find module @babel/plugin-transform-react-jsx' appears after ejecting from Create React App
  • TypeScript shows 'Cannot use JSX unless the --jsx flag is provided'
  • Jest tests fail to parse JSX files with syntax errors
  • Build succeeds but runtime error 'jsx is not exported by react/jsx-runtime.js' occurs
  • Webpack or Vite build hangs or crashes when processing .jsx or .tsx files
  • Components with JSX render as '[object Object]' instead of proper HTML

Common causes

  1. Missing @babel/preset-react or @babel/plugin-transform-react-jsx in Babel configuration
  2. Babel dependencies not installed or corrupted node_modules directory
  3. TypeScript tsconfig.json missing or has incorrect 'jsx' compiler option setting
  4. React version older than 17.0 being used with automatic JSX runtime configuration
  5. Build tool (Webpack, Vite, esbuild) configured to use 'js' loader for files containing JSX
  6. Conflicting Babel presets or plugins that override JSX transformation settings
  7. Jest configuration missing babel-jest or preset-react for test transformation
  8. Working directory contains symbolic links preventing proper module resolution

How to fix "JSX transform failed"

1Verify Babel configuration includes React preset

Check your .babelrc, babel.config.js, or package.json for Babel configuration. Ensure you have @babel/preset-react in the presets array:

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

If using the new automatic JSX runtime (React 17+), configure it explicitly:

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

The runtime: "automatic" option enables the new transform that doesn't require importing React in every file.

2Install missing Babel dependencies

Install the required Babel packages if they're missing:

bash
npm install --save-dev @babel/preset-react @babel/plugin-transform-react-jsx

Or with Yarn:

bash
yarn add --dev @babel/preset-react @babel/plugin-transform-react-jsx

If you recently ejected from Create React App or suspect corrupted dependencies, delete node_modules and reinstall:

bash
rm -rf node_modules package-lock.json
npm install

Ensure your Babel version is 7.9.0 or higher for new JSX transform support: npm list @babel/core.

3Configure TypeScript jsx compiler option

If using TypeScript, verify your tsconfig.json has the correct jsx setting:

For React 17+ with automatic runtime:

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

For React 16 and earlier (classic runtime):

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

The react-jsx option uses the new automatic runtime, while react uses the classic React.createElement transform.

4Update React to version 17 or higher if using automatic runtime

The automatic JSX runtime requires React 17.0.0 or later. Check your current version:

bash
npm list react

If below 17.0.0 and you've configured automatic runtime, either upgrade React:

bash
npm install react@latest react-dom@latest

Or revert your Babel/TypeScript configuration to use classic runtime by removing "runtime": "automatic" from Babel preset options and setting TypeScript's jsx to "react" instead of "react-jsx".

5Configure build tool file loaders correctly

Ensure your build tool recognizes JSX syntax in your files:

Webpack: Verify babel-loader processes .jsx and .js files containing JSX:

javascript
module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  }
};

Vite: Add esbuild jsx configuration if using .js files with JSX:

javascript
export default {
  esbuild: {
    loader: 'jsx',
    include: /src/.*\.jsx?$/,
  }
}

Alternatively, rename files with JSX from .js to .jsx extension.

6Fix Jest configuration for test files

If JSX transform fails in Jest tests, ensure your Jest configuration includes proper transformation:

In jest.config.js or package.json:

javascript
module.exports = {
  transform: {
    '^.+\.(js|jsx|ts|tsx)$': 'babel-jest'
  }
};

Install babel-jest if missing:

bash
npm install --save-dev babel-jest

Ensure your .babelrc or babel.config.js is in the project root where Jest can find it.

7Resolve symbolic link issues in working directory

If your terminal is in a directory accessed via symbolic links, React's build tools may fail to resolve modules correctly. Get the real path:

bash
pwd -P

Navigate to the actual path (not the symlink) and run your build command:

bash
cd $(pwd -P)
npm start

This ensures Create React App and other tools resolve dependencies from the correct absolute path.

Advanced notes

ESLint Configuration: When using automatic JSX runtime, you can disable the react/jsx-uses-react and react/react-in-jsx-scope ESLint rules since importing React is no longer necessary. Add to your .eslintrc:

json
{
  "rules": {
    "react/jsx-uses-react": "off",
    "react/react-in-jsx-scope": "off"
  }
}

Pragma Conflicts: Avoid mixing JSX pragmas (/** @jsx */ or /** @jsxFrag */) with automatic runtime - you'll get "pragma and pragmaFrag cannot be set when runtime is automatic". Remove pragma comments when using runtime: "automatic".

Build Tool Differences: Different build tools handle JSX transformation differently. Create React App includes all necessary configuration out of the box, Vite uses esbuild for fast transformation, and custom Webpack setups require explicit babel-loader configuration. If migrating between tools, verify each tool's JSX handling requirements.

Monorepo Considerations: In monorepos with hoisted dependencies, ensure @babel/preset-react is installed at the workspace root or configure Babel to resolve presets from the correct location using the rootMode option.

React Native Web: When using react-native-web, packages may fail with JSX syntax errors if they're not transpiled. Configure your build tool to process specific node_modules packages that contain untranspiled JSX.

Frequently asked questions

What does "JSX transform failed" mean?
JSX transform failures happen when the build process cannot convert JSX syntax into regular JavaScript that browsers can execute. JSX is not valid JavaScript - it's a syntax extension that needs to be transformed (transpiled) by tools like Babel or TypeScript before it can run. When this transformation fails, your build process stops and you cannot run your React application.
How do I fix "JSX transform failed"?
JSX transform failures occur when your build tool cannot convert JSX syntax into JavaScript, typically due to missing Babel plugins, incorrect configuration, or version mismatches between React and your build tooling.
What causes "JSX transform failed"?
Missing @babel/preset-react or @babel/plugin-transform-react-jsx in Babel configuration Babel dependencies not installed or corrupted node_modules directory TypeScript tsconfig.json missing or has incorrect 'jsx' compiler option setting
Is the "JSX transform failed" 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