How to fix Unexpected token < in React

First, check if you have the necessary Babel packages installed:

npm list @babel/core @babel/preset-react

If these packages are missing, install them:

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

These packages are essential for transforming JSX into JavaScript.

Create a .babelrc file (or babel.config.js for larger projects) in your project root with the following content:

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

The @babel/preset-react preset tells Babel how to transform JSX syntax. The @babel/preset-env preset handles modern JavaScript features.

If you're using webpack, make sure babel-loader is installed and configured:

npm install --save-dev babel-loader

Then update your webpack.config.js to process JSX files:

module: {
  rules: [
    {
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      use: {
        loader: "babel-loader"
      }
    }
  ]
}

This tells webpack to use babel-loader for all .js and .jsx files, applying your Babel configuration.

Build tools cache configurations. After making Babel changes:

# Delete webpack cache
rm -rf node_modules/.cache

# Or for specific tools:
rm -rf .next  # Next.js
rm -rf dist   # General build output

# Restart your dev server
npm start

Cache issues commonly prevent configuration changes from taking effect.

If you're using Create React App (CRA), Babel is already configured. This error usually indicates:

1. A naming issue: make sure your file uses .jsx extension or is properly imported
2. An import/export problem: verify your component is properly exported
3. A dependency issue: try npm install or npm start again

Create React App handles all JSX transpilation automatically, so you shouldn't see this error. If you do, try:

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

Ensure your React components are properly exported:

// Correct: Named export
export function MyComponent() {
  return <div>Hello</div>;
}

// Or default export
export default function MyComponent() {
  return <div>Hello</div>;
}

And properly imported:

import MyComponent from './MyComponent';
// or
import { MyComponent } from './MyComponent';

Missing or incorrect exports can cause similar errors.