Sentry Answers>React>

Jest encountered an unexpected token - SyntaxError: Unexpected token 'export'

Jest encountered an unexpected token - SyntaxError: Unexpected token 'export'

Matthew C.

—

The Problem

When running the Jest JavaScript testing framework in a React app, you may encounter an error such as the following:

Click to Copy
Jest encountered an unexpected token
Jest failed to parse a file.

...

Details:

./node_modules/react-markdown/index.js:6
export {uriTransformer} from './lib/uri-transformer.js'
^^^^^^

SyntaxError: Unexpected token 'export'
> 1 | import ReactMarkdown from 'react-markdown';

The Solution

This error occurs because Jest does not support JavaScript ES Modules, and a Node module needs to be transpiled from an ES Module to a CommonJS module.

Use the transformIgnorePatterns option in your jest.config.js file to specify that the Node module that is an ES Module package must be transpiled by Babel:

Click to Copy
/** @type {import('jest').Config} */
const config = {
  ...
  "transformIgnorePatterns": [
    "node_modules/(?!(react-markdown)/)"
  ],
};

module.exports = config;

Note

Jest does not support ES Modules; it uses CommonJS modules. ES Modules use the export syntax to export a module, while CommonJS uses the exports object.

Jest uses Babel to compile JavaScript ES Modules to CommonJS, using the @babel/plugin-transform-modules-commonjs Babel plugin. By default, Babel excludes Node modules from transformation. This can be an issue if an ES Module-only package, such as react-markdown, is not pre-transpiled.

If your project uses TypeScript, Jest transforms your TypeScript files to JavaScript using the babel-jest transformer. Make sure that you explicitly add the default babel-jest transformer in your babel.config.js file if you use additional code preprocessors:

Click to Copy
"transform": {
  "\\.[jt]sx?$": "babel-jest",
  "\\.css$": "a-css-transformer",
}

Jest is in the process of adding ES Module support. It currently has experimental support.

  • Sentry BlogGuide to Error & Exception Handling in React
  • Sentry BlogHow to identify fetch waterfalls in React
  • Syntax.fmReact Server Components
  • Sentry BlogSentry can’t fix React hydration errors, but it can really help you debug them
  • Syntax.fmWhy the jQuery Creator Uses React and Typescript
  • Syntax.fmListen to the Syntax Podcast
  • Sentry BlogReact Native Debugging and Error Tracking During App Development
  • Syntax.fmDiscussion on building native iOS and Android apps with React Native
  • SentryReact Error & Performance Monitoring
  • Sentry BlogFixing memoization-breaking re-renders in React
  • SentryReact Debug Hub
  • Syntax.fm logo
    Listen to the Syntax Podcast

    Tasty treats for web developers brought to you by Sentry. Get tips and tricks from Wes Bos and Scott Tolinski.

    SEE EPISODES

Considered “not bad” by 4 million developers and more than 100,000 organizations worldwide, Sentry provides code-level observability to many of the world’s best-known companies like Disney, Peloton, Cloudflare, Eventbrite, Slack, Supercell, and Rockstar Games. Each month we process billions of exceptions from the most popular products on the internet.

learn more about sentryjoin our discord
© 2025 • Sentry is a registered Trademark of Functional Software, Inc.