How to Fix Reactjs ‘SyntaxError: Unexpected token’ Error: Causes and Solutions

Introduction

If you’ve been developing with React, you may have encountered the frustrating Reactjs ‘SyntaxError: Unexpected token’ error. This error commonly arises when there is an issue with JSX syntax or the project build configuration. An example of such an error might look like:

SyntaxError: Unexpected token '<'

This article explains the underlying reasons for this error, provides step-by-step solutions, and illustrates real-world examples to help you quickly resolve this common React compile error.

---

Common Causes of ‘Unexpected token’ in React

Before we dive into solutions, let’s explore some common reasons why you might encounter the ‘Unexpected token’ error:

1. Improper JSX Syntax

One of the most common triggers is incorrect JSX syntax, such as unclosed tags or improper nesting.

2. Missing Babel Transpilation

JSX isn’t plain JavaScript. Without Babel, browsers can’t understand JSX. Missing or incorrect Babel configuration often leads to this error.

3. Wrong Webpack Configuration

Webpack requires proper loaders (like babel-loader) to recognize JSX files. Incorrect configuration here results in the unexpected token issue.

4. Importing HTML/JSX Directly without Loaders

Attempting to directly import JSX or HTML files without loaders configured in Webpack will throw this error.

5. Using ES6+ Features Without Proper Setup

React heavily uses ES6+ syntax, and missing proper presets or polyfills can cause compile errors.

---

Real Examples & Fixes

✅ JSX Error: Unclosed Tags

A simple but common JSX error:

function MyComponent() {
  return (
    <div>
      <h1>Hello, World!</h1>
    <div> {/* ❌ This opening <div> is never closed */}
  );
}

Fix: Close your JSX tags properly.

function MyComponent() {
  return (
    <div>
      <h1>Hello, World!</h1>
    </div> {/* ✅ Properly closed */}
  );
}

✅ JSX Outside Return Block

function MyComponent() {
  <div>Hello</div>
}

Fix: Ensure JSX is returned explicitly.

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

✅ Webpack or Babel Config Not Recognizing JSX

If Webpack or Babel isn’t configured properly, you’ll see this:

Module parse failed: Unexpected token (5:6)

Fix: Set up Babel and Webpack correctly:

• Install dependencies:

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

• Configure .babelrc:

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

• Configure webpack.config.js:

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

✅ Trying to Render an Object Instead of Component

Incorrect component rendering:

const myComponent = { content: "Hello" };

function App() {
  return <div>{myComponent}</div>;
}

Fix: Render JSX or valid React components, not plain objects.

const MyComponent = () => <div>Hello</div>;

function App() {
  return <MyComponent />;
}

---

How to Fix the Error Step-by-Step

Step 1: Use Babel with Proper Presets

Install required Babel presets:

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

Configure .babelrc:

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

Step 2: Set Up Webpack Loader for JSX

Install the loader:

npm install --save-dev babel-loader

Add to webpack.config.js:

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

Step 3: Correct JSX Syntax Issues

Ensure proper JSX syntax:

• Always close tags properly
• Return JSX explicitly from functions

Step 4: Check File Extensions

Use .jsx or .js extensions consistently and set Webpack rules accordingly.

Step 5: Use Correct Component Import/Export

Correctly export components:

export default function MyComponent() {}

And import correctly:

import MyComponent from './MyComponent';

---

React Version & Build Tools Compatibility

• Regularly check compatibility between React, Babel, and Webpack versions.
• Recommended setups:
  • Create React App: Automatically handles JSX.
  • Vite: Uses ESBuild, minimal setup required.
  • Next.js: Built-in JSX support, minimal manual configuration needed.

---

Best Practices to Avoid Syntax Errors

• Use ESLint + Prettier for automatic code linting and formatting.
• Always close JSX tags properly.
• Validate syntax regularly during development.
• Avoid mixing raw HTML directly within JS files.

---

FAQs

What does ‘Unexpected token <‘ mean in React?

It typically means your build environment is not configured to understand JSX syntax.

How do I fix Babel JSX syntax errors?

Use Babel presets (@babel/preset-react) and configure your .babelrc correctly.

Why do I see this error after importing a component?

This often means you’re importing JSX or incorrectly exporting/importing components without proper Babel setup.

Does this error occur in Next.js/Vite?

Rarely, as they handle JSX internally. If it happens, verify custom Babel/Webpack setups.

How do I enable JSX support in my project?

Use Babel (@babel/preset-react) and a loader like babel-loader in Webpack.

---

Conclusion

The Reactjs ‘SyntaxError: Unexpected token’ error typically arises from incorrect JSX syntax or improperly configured build environments. By following the provided solutions—properly configuring Babel, correctly setting up Webpack loaders, and ensuring accurate JSX syntax—you can resolve these common React compile errors efficiently.

Adopt best practices and developer tools to catch syntax errors early and ensure smoother development workflows.

About The Author