How to fix Cannot parse JSX in React

ReactINTERMEDIATEHIGHUpdated Dec 8, 2025· 223 views

This error occurs when your build tool or linter encounters JSX syntax but lacks the proper configuration to parse it. JSX must be transformed into regular JavaScript before browsers can execute it, requiring Babel presets or TypeScript compiler options.

Quick fix

Fixes Cannot parse JSX

npm install --save-dev @babel/core @babel/preset-env @babel/preset-react
  1. Install required Babel packages for React
  2. Create or update your Babel configuration
  3. Configure webpack to process JSX files
  4. Fix Jest configuration for JSX testing
react — error
npm install --save-dev @babel/core @babel/preset-env @babel/preset-react
Cannot parse JSX
shell
npm install --save-dev @babel/core @babel/preset-env @babel/preset-react

What this error means

The "Cannot parse JSX" error indicates that a tool in your development workflow—such as Babel, webpack, Jest, ESLint, or TypeScript—has encountered JSX syntax but doesn't have the necessary parser or transformer configured. JSX is not valid JavaScript; it's a syntax extension that must be compiled into standard JavaScript function calls (like React.createElement()) before execution. This error typically appears during build time (webpack/Vite), test time (Jest), or linting (ESLint). The specific error message varies by tool: webpack shows "Module parse failed: Unexpected token", Jest reports "Support for the experimental syntax 'jsx' isn't currently enabled", and ESLint displays "Parsing error: Unexpected token". The root cause is always the same: the tool processing your code needs explicit configuration telling it how to handle JSX syntax. Without the appropriate preset (@babel/preset-react), plugin, or compiler option, the parser treats angle brackets and JSX elements as invalid syntax.

Typical symptoms

  • Build fails with "Module parse failed: Unexpected token <" when importing React components
  • Webpack displays error "You may need an appropriate loader to handle this file type" for .jsx or .js files containing JSX
  • Jest throws "Support for the experimental syntax 'jsx' isn't currently enabled" when running tests
  • ESLint shows "Parsing error: Unexpected token" at the first JSX element in your file
  • TypeScript compiler reports "Cannot use JSX unless the '--jsx' flag is provided"
  • Standard or other linters fail to parse React component files
  • Build succeeds but runtime shows syntax errors when JSX isn't properly transpiled

Common causes

  1. Missing @babel/preset-react in your Babel configuration (.babelrc, babel.config.js, or package.json)
  2. webpack babel-loader not configured to process .jsx or .js files containing JSX syntax
  3. Jest configuration lacks babel-jest transformer or proper Babel preset for JSX
  4. ESLint parser not set to babel-eslint or @babel/eslint-parser to handle JSX
  5. TypeScript tsconfig.json missing "jsx" compiler option (should be "react", "react-jsx", or "react-jsxdev")
  6. File extension is .js instead of .jsx and your build tool only processes .jsx files
  7. node_modules dependencies contain JSX but are excluded from babel-loader processing
  8. Using outdated or incompatible versions of Babel, webpack, or React that don't work together

How to fix "Cannot parse JSX"

1Install required Babel packages for React

First, ensure you have the necessary Babel packages installed. For modern React projects, you need the core Babel packages and the React preset:

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

If using webpack, also install babel-loader:

bash
npm install --save-dev babel-loader

For Jest testing, babel-jest is usually installed automatically with Jest, but you can explicitly add it:

bash
npm install --save-dev babel-jest

These packages provide the transformation pipeline that converts JSX into standard JavaScript.

2Create or update your Babel configuration

Add the React preset to your Babel configuration. You can use .babelrc, babel.config.js, or the babel field in package.json.

Create or update .babelrc:

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

Or use babel.config.js for more control:

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

For TypeScript + React projects, include both:

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

The React preset enables JSX transformation and React-specific optimizations.

3Configure webpack to process JSX files

Update your webpack configuration to use babel-loader for JavaScript and JSX files. In webpack.config.js:

javascript
module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx?$/,  // Match both .js and .jsx files
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react']
          }
        }
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx']  // Allow importing without extension
  }
};

If you need to process JSX from node_modules (e.g., linked packages):

javascript
{
  test: /\.jsx?$/,
  include: [
    path.resolve(__dirname, 'src'),
    path.resolve(__dirname, 'node_modules/your-jsx-package')
  ],
  use: 'babel-loader'
}

This tells webpack to transform JSX before bundling.

4Fix Jest configuration for JSX testing

If Jest can't parse JSX in your test files, ensure your Jest configuration includes the Babel transformer. In jest.config.js:

javascript
module.exports = {
  transform: {
    '^.+\\.(js|jsx)$': 'babel-jest',
  },
  moduleFileExtensions: ['js', 'jsx'],
};

Or in package.json:

json
{
  "jest": {
    "transform": {
      "^.+\\.(js|jsx)$": "babel-jest"
    },
    "moduleFileExtensions": ["js", "jsx"]
  }
}

Jest will automatically use your .babelrc configuration when babel-jest is configured. Clear the Jest cache after changing config:

bash
npx jest --clearCache
5Configure ESLint to parse JSX syntax

If ESLint shows parsing errors on JSX, configure it to use a parser that understands JSX. Install the parser:

bash
npm install --save-dev @babel/eslint-parser

Update .eslintrc.json:

json
{
  "parser": "@babel/eslint-parser",
  "parserOptions": {
    "requireConfigFile": false,
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "extends": ["eslint:recommended", "plugin:react/recommended"]
}

For TypeScript projects, use @typescript-eslint/parser instead:

json
{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    }
  }
}

This allows ESLint to understand and lint JSX syntax properly.

6Set TypeScript JSX compiler option

For TypeScript projects, configure the JSX compiler option in tsconfig.json:

json
{
  "compilerOptions": {
    "jsx": "react-jsx",  // For React 17+ with new JSX transform
    "target": "ES2020",
    "module": "esnext",
    "lib": ["ES2020", "DOM"]
  },
  "include": ["src/**/*"]
}

JSX option values:
- "react-jsx": Modern JSX transform (React 17+), no need to import React
- "react": Classic transform, requires import React from 'react'
- "preserve": Keep JSX syntax, let Babel handle transformation

Use .tsx file extension for TypeScript files containing JSX. TypeScript disallows angle bracket type assertions in .tsx files; use as instead:

typescript
// Wrong in .tsx
const myElement = <MyComponent>element as MyComponent;

// Correct in .tsx
const myElement = element as MyComponent;
7Verify file extensions and naming

Ensure your React component files use the correct extensions:

- Use .jsx for JavaScript files with JSX
- Use .tsx for TypeScript files with JSX
- Or configure tools to process .js files containing JSX

If your build tool only processes .jsx files but you're using .js, either rename:

bash
mv src/MyComponent.js src/MyComponent.jsx

Or update your webpack/Vite config to process .js files with JSX:

javascript
// webpack
{
  test: /\.js$/,
  include: /src/,
  use: 'babel-loader'
}

Some tools (like Create React App) automatically process JSX in .js files, while others require explicit configuration.

8Clear build caches and rebuild

After configuration changes, clear all caches and reinstall dependencies:

bash
# Clear node_modules and lockfile
rm -rf node_modules package-lock.json

# Reinstall dependencies
npm install

# Clear Jest cache
npx jest --clearCache

# Clear webpack cache (if using webpack 5)
rm -rf node_modules/.cache

# Clear Babel cache
rm -rf node_modules/.cache/babel-loader

# Rebuild
npm run build

For persistent issues, try legacy dependency resolution:

bash
npm install --legacy-peer-deps

Restart your development server and verify the build succeeds without parsing errors.

Advanced notes

Version Compatibility: Ensure compatible versions across your toolchain. Babel 7+ requires @babel/preset-react (not the old babel-preset-react). React 17+ supports the new JSX transform that doesn't require importing React in every file—set "runtime": "automatic" in your preset config:

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

Monorepo Considerations: In monorepos or when using linked npm packages, you may need to include those packages in babel-loader processing. Use the include option instead of just exclude: /node_modules/ to explicitly process specific packages.

Vite Users: Vite uses esbuild for fast builds but may require explicit JSX configuration. In vite.config.js, ensure the React plugin is configured:

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

export default defineConfig({
  plugins: [react()],
  esbuild: {
    loader: 'jsx',
    include: /src\/.*\.jsx?$/,
  }
})

Production Builds: Parsing errors that only appear in production builds (not development) often indicate environment-specific Babel configurations. Check for .babelrc.production or environment-specific presets.

Prevention: Modern React project generators (Create React App, Vite, Next.js) configure JSX parsing automatically. Manual webpack setups require explicit configuration. Always test your configuration with both development and production builds, and include JSX tests in your Jest suite to catch parsing issues early.

Frequently asked questions

What does "Cannot parse JSX" mean?
The "Cannot parse JSX" error indicates that a tool in your development workflow—such as Babel, webpack, Jest, ESLint, or TypeScript—has encountered JSX syntax but doesn't have the necessary parser or transformer configured. createElement()) before execution. This error typically appears during build time (webpack/Vite), test time (Jest), or linting (ESLint).
How do I fix "Cannot parse JSX"?
This error occurs when your build tool or linter encounters JSX syntax but lacks the proper configuration to parse it. JSX must be transformed into regular JavaScript before browsers can execute it, requiring Babel presets or TypeScript compiler options.
What causes "Cannot parse JSX"?
Missing @babel/preset-react in your Babel configuration (.babelrc, babel.config.js, or package.json) webpack babel-loader not configured to process .jsx or .js files containing JSX syntax Jest configuration lacks babel-jest transformer or proper Babel preset for JSX
Is the "Cannot parse JSX" 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