How to fix Unexpected token < in React

ReactINTERMEDIATEHIGHUpdated Dec 10, 2025· 159 views

This error occurs when JSX syntax is not properly compiled to JavaScript. Your code contains JSX (the `<` character starting an HTML-like tag) but Babel or another transpiler has not been configured to transform it, causing the parser to fail.

Quick fix

Fixes Unexpected token <

npm list @babel/core @babel/preset-react
  1. Verify Babel and React preset are installed
  2. Create or verify .babelrc configuration
  3. Configure webpack babel-loader (if using webpack)
  4. Clear cache and restart dev server
react — error
npm list @babel/core @babel/preset-react
Unexpected token <

What this error means

JSX is not valid JavaScript on its own—it is a syntax extension that must be transformed into regular JavaScript function calls before the code runs. When you write `<Component />`, the JavaScript parser sees the `<` character and doesn't recognize it as valid JavaScript syntax because it doesn't know how to interpret JSX. This error means your build tool or runtime environment has not been configured to transpile JSX to JavaScript. The error typically manifests as 'SyntaxError: Unexpected token <' at the line where JSX appears.

Typical symptoms

  • Code fails to run with 'SyntaxError: Unexpected token <' error in the browser or Node.js
  • Error points to a line containing JSX syntax (a tag like <Component /> or <div>)
  • Application won't start or bundle fails during build
  • Error occurs even though your code appears syntactically correct
  • Works in Create React App but fails in custom webpack/Babel setup

Common causes

  1. Babel is not installed or not included in your build configuration
  2. @babel/preset-react is missing from your Babel presets
  3. babel-loader is not configured in webpack to process .jsx or .js files
  4. .babelrc or babel.config.js file is missing or misconfigured
  5. JSX file has .js extension but Babel is not configured to process it
  6. Webpack or build tool cache contains stale configuration
  7. Using JSX in a Node.js environment without proper transpilation setup
  8. Script tag in HTML has type="text/javascript" instead of type="text/babel"

How to fix "Unexpected token <"

1Verify Babel and React preset are installed

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

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

If these packages are missing, install them:

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

These packages are essential for transforming JSX into JavaScript.

2Create or verify .babelrc configuration

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

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

3Configure webpack babel-loader (if using webpack)

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

bash
npm install --save-dev babel-loader

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

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

4Clear cache and restart dev server

Build tools cache configurations. After making Babel changes:

bash
# 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.

5For Create React App projects

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:

bash
rm -rf node_modules package-lock.json
npm install
npm start
6Verify correct file imports and exports

Ensure your React components are properly exported:

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

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

And properly imported:

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

Missing or incorrect exports can cause similar errors.

Advanced notes

For browser-based JSX (without a build tool), you can use Babel standalone with a script tag:

html
<script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
  function App() {
    return <h1>Hello World</h1>;
  }
  const root = ReactDOM.createRoot(document.getElementById("root"));
  root.render(<App />);
</script>

Note the type="text/babel" attribute, which tells Babel to process the script. However, this approach is not recommended for production applications. For Node.js environments (like server-side rendering or testing), use @babel/register to hook into require and transpile JSX on the fly. In Next.js and Vite, JSX support is built-in and requires no additional configuration.

Frequently asked questions

What does "Unexpected token <" mean?
JSX is not valid JavaScript on its own—it is a syntax extension that must be transformed into regular JavaScript function calls before the code runs. When you write <Component />, the JavaScript parser sees the < character and doesn't recognize it as valid JavaScript syntax because it doesn't know how to interpret JSX. This error means your build tool or runtime environment has not been configured to transpile JSX to JavaScript.
How do I fix "Unexpected token <"?
This error occurs when JSX syntax is not properly compiled to JavaScript. Your code contains JSX (the < character starting an HTML-like tag) but Babel or another transpiler has not been configured to transform it, causing the parser to fail.
What causes "Unexpected token <"?
Babel is not installed or not included in your build configuration @babel/preset-react is missing from your Babel presets babel-loader is not configured in webpack to process .jsx or .js files
Is the "Unexpected token <" 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