How to fix Module parse failed: Unexpected character '<' in React

ReactINTERMEDIATEHIGH

This webpack error occurs when files containing JSX, special syntax, or binary content are processed without the appropriate loader configured. The bundler attempts to parse the file as plain JavaScript but encounters characters it cannot understand.

What this error means

This error indicates that webpack encountered a file it cannot parse because no appropriate loader is configured to handle its content. The "unexpected character" is typically JSX syntax (like '<'), special characters from CSS/SCSS files ('@'), private class fields ('#'), or binary content from non-JavaScript files. Webpack needs explicit instructions (loaders) to transform different file types into JavaScript that browsers can understand. When it tries to parse a file without the right loader, it treats the content as plain JavaScript and fails when it encounters syntax or characters that aren't valid JavaScript. In React projects, this most commonly happens when JSX files aren't being processed by babel-loader, or when third-party dependencies use modern JavaScript features that aren't being transpiled properly.

How to fix "Module parse failed: Unexpected character '<'"

1Identify the problematic file and character

Check the error message to see which file is causing the issue:

bash

Module parse failed: Unexpected character '<' (1:0)
File was processed with these loaders:
 * ./node_modules/some-package/file.js

Note the file path and the unexpected character. Common characters indicate:
- '<' = JSX syntax
- '@' = CSS/SCSS syntax
- '#' = Private class fields
- '�' = Binary file content

2Verify babel-loader is configured for JSX files

If the error involves JSX (unexpected '<'), ensure your webpack config includes babel-loader:

javascript

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

For TypeScript projects, add tsx support:

javascript

test: /\.(ts|tsx)$/,
use: 'ts-loader'

3Update dependencies if error is from node_modules

If the error comes from a third-party package, update it to a version that's properly transpiled:

bash

npm update package-name
# or
npm install package-name@latest

For Create React App projects, update react-scripts:

bash

npm install react-scripts@latest

Then clear cache and reinstall:

bash

rm -rf node_modules package-lock.json
npm install

4Add appropriate loaders for non-JavaScript files

If importing CSS, images, or other assets, ensure loaders are configured:

javascript

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource'
      }
    ]
  }
};

Install required loaders:

bash

npm install --save-dev style-loader css-loader

5Configure babel to transpile node_modules if needed

If a specific package in node_modules needs transpilation, modify the exclude rule:

javascript

{
  test: /\.(js|jsx)$/,
  exclude: /node_modules\/(?!(problematic-package)\/).*/,
  use: 'babel-loader'
}

Or for Create React App without ejecting, create a .babelrc in the package causing issues, or report the issue to the package maintainer.

How to fix Module parse failed: Unexpected character '<' in React

What this error means

Typical symptoms

Common causes

How to fix "Module parse failed: Unexpected character '<'"

Advanced notes

Related errors

Official resources & further reading