How to fix Failed to compile: SyntaxError: Unexpected token < (JSX) in React

Check if you have a .babelrc, babel.config.js, or babel configuration in package.json. If you ejected Create React App, verify the configuration includes the React preset:

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

If you haven't ejected, Create React App handles this automatically. If the file is missing or incorrect, create/fix it.

If you've ejected or are using a custom setup, ensure you have the required packages:

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

For Create React App (not ejected), these are included by default, so this step is only needed for custom setups.

If you ejected Create React App, verify that your webpack.config.js includes babel-loader for JavaScript files:

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

The resolve.extensions ensures webpack recognizes .jsx files.

If you're importing from a linked library (npm link or yarn link) or working in a monorepo, the issue is often that babel-loader excludes node_modules. You need to explicitly include your linked packages:

// In webpack.config.js
{
  test: /\.(js|jsx)$/,
  exclude: /node_modules\/(?!(your-linked-package))/,
  use: 'babel-loader'
}

Alternatively, ensure your linked library is properly transpiled before being consumed. Export components from a built/dist folder rather than source.

Check the file mentioned in the error for JSX syntax issues:

- Ensure all JSX elements are properly closed: <Component /> or <Component></Component>
- Check for unescaped angle brackets in strings (use &lt; and &gt; or wrap in {})
- Verify imports are correct: import React from 'react' (required in React 16 and earlier)

// Correct
<div>Hello {name}</div>

// Incorrect - missing closing tag
<div>Hello {name}

Build tools can cache incorrect configurations. Clear all caches and rebuild:

# Remove build artifacts and cache
rm -rf node_modules/.cache
rm -rf build

# Reinstall dependencies
rm -rf node_modules
npm install

# Rebuild
npm start

For Yarn users, also run: yarn cache clean