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:
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:
/** @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:
"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
- Listen to the Syntax Podcast
![Syntax.fm logo]()
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.