How to fix JSX transform failed in React

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

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

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

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

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

Install the required Babel packages if they're missing:

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

Or with Yarn:

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:

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.

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

For React 17+ with automatic runtime:

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

For React 16 and earlier (classic runtime):

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

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

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

npm list react

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

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

Ensure your build tool recognizes JSX syntax in your files:

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

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

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

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

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

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

In jest.config.js or package.json:

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

Install babel-jest if missing:

npm install --save-dev babel-jest

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

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:

pwd -P

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

cd $(pwd -P)
npm start

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