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.

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