How to fix Cannot parse JSX in React

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

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

If using webpack, also install babel-loader:

npm install --save-dev babel-loader

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

npm install --save-dev babel-jest

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

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:

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

Or use babel.config.js for more control:

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

For TypeScript + React projects, include both:

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

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

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

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):

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

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

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

Or in package.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:

npx jest --clearCache

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

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

Update .eslintrc.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:

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

This allows ESLint to understand and lint JSX syntax properly.

For TypeScript projects, configure the JSX compiler option in tsconfig.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:

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

// Correct in .tsx
const myElement = element as MyComponent;

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:

mv src/MyComponent.js src/MyComponent.jsx

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

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

After configuration changes, clear all caches and reinstall dependencies:

# 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:

npm install --legacy-peer-deps

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