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

ReactINTERMEDIATEHIGHUpdated Dec 10, 2025· 149 views

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.

Quick fix

Fixes Module parse failed: Unexpected character '<'

Module parse failed: Unexpected character '<' (1:0)
File was processed with these loaders:
 * ./node_modules/some-package/file.js
  1. Identify the problematic file and character
  2. Verify babel-loader is configured for JSX files
  3. Update dependencies if error is from node_modules
  4. Add appropriate loaders for non-JavaScript files
react — error
Module parse failed: Unexpected character '<' (1:0)
File was processed with these loaders:
 * ./node_modules/some-package/file.js
Module parse failed: Unexpected character '<'

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.

Typical symptoms

  • Build fails with 'Module parse failed: Unexpected character' error
  • Error message points to a specific file and character position
  • Development server crashes when importing certain files
  • Error occurs after adding a new dependency or file type
  • JSX syntax highlighted in error stack trace

Common causes

  1. JSX/TSX files not configured with babel-loader or ts-loader in webpack
  2. Missing or incorrect file extension in webpack module rules
  3. Third-party dependency uses modern JavaScript features (private fields, decorators) without transpilation
  4. Importing non-JavaScript files (CSS, images, fonts) without appropriate loaders
  5. Outdated react-scripts or webpack configuration missing modern syntax support
  6. Custom webpack config missing necessary loaders after ejecting from Create React App

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.

Advanced notes

For Create React App users: CRA abstracts webpack configuration, so you typically can't modify loaders without ejecting. If you encounter this error with CRA:

1. First try updating react-scripts to the latest version
2. Check if the problematic dependency has a newer version
3. As a last resort, use react-app-rewired or CRACO to override configuration without ejecting
4. Only eject if you absolutely need custom webpack configuration

Private class fields (#): Modern JavaScript features like private fields may not be supported by older versions of babel-loader or @babel/preset-env. Ensure you're using:
- @babel/preset-env with targets configured
- @babel/plugin-proposal-class-properties (or @babel/plugin-proposal-private-methods)

Webpack 5: If using Webpack 5, some loader syntax has changed. For example, file-loader and url-loader are replaced by Asset Modules (type: 'asset/resource').

Monorepo considerations: In monorepo setups, you may need to explicitly include workspace packages in babel-loader rules since they're technically in node_modules but should be transpiled.

Frequently asked questions

What does "Module parse failed: Unexpected character '<'" mean?
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.
How do I fix "Module parse failed: Unexpected character '<'"?
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 causes "Module parse failed: Unexpected character '<'"?
JSX/TSX files not configured with babel-loader or ts-loader in webpack Missing or incorrect file extension in webpack module rules Third-party dependency uses modern JavaScript features (private fields, decorators) without transpilation
Is the "Module parse failed: Unexpected character '<'" 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