Jest ScriptTransformer throws SyntaxError when importing scoped NPM package which uses ES2015 modules

[gykf]

Is this a bug report?

Yes, it's a bug report.

Can you also reproduce the problem with npm 4.x?

Yes, the bug occurs using NPM 5.3.0 and 4.6.1 also.

Which terms did you search for in User Guide?

Jest, scoped, es6

Environment

1. node -v: 8.3.0
2. npm -v: 5.3.0
3. yarn --version (if you use Yarn): 0.27.5
4. npm ls react-scripts (if you haven’t ejected): 1.0.11

Then, specify:

1. Operating system: Ubuntu Linux
2. Browser and version (if relevant): N/A

Steps to Reproduce

1. Create a new app by running create-react-app
2. Install scoped NPM package which uses ES2015 modules, e.g. by running yarn add @material/checkbox
3. Import a module from said scoped NPM package, e.g. by adding the following line to src/App.js:

import MDCCheckboxFoundation from '@material/checkbox/foundation'

4. Run yarn test, (press a to run all tests,) and observe error output in console.

Expected Behavior

The tests should run without any errors occuring.

Actual Behavior

The test runner fails with an exception such as this:

    SyntaxError: Unexpected token import
      
      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/ScriptTransformer.js:289:17)
      at Object.<anonymous> (src/App.js:4:19)
      at Object.<anonymous> (src/App.test.js:3:12)

Reproducible Demo

Example project:
https://github.com/gyorgy-farkas/cra-jest-issue-170811

Steps to reproduce:

1. Check out repository.
2. Run yarn to install dependencies.
3. Run yarn test to see test runner throw error.

[gaearon]

This is expected and not a bug.

Jest runs in a Node environment. Node does not yet support ES modules, and any packages using them are not valid in Node.

Please file an issue with @material/checkbox and ask them to precompile their code to CommonJS before publishing it on npm. It is possible to provide both ES and CommonJS versions if they prefer so. But without a CommonJS version it cannot run in Node.

[gykf]

Thank you for looking into this.

For anyone stumbling across the same problem, in the case of @material packages, you can import the UMD modules as described in their readme, for example:

import {MDCCheckboxFoundation} from '@material/checkbox/dist/mdc.checkbox'