SyntaxError: Cannot use import statement outside a module
See original GitHub issueHello 👋
Describe the bug
I want to run unit tests against my React application.
Unfortunately one of the dependencies I am using is only packaged for ES Modules* and it looks as if the default configuration coming with CRA 4.x is not able to deal with it out-of-the-box. * “type”: “module”
When calling yarn test
I get the following error (which looks as if I was mixing import with require):
Details:
C:\dev\codemirror-next-repro-cra\test-in-cra\node_modules\@codemirror\next\highlight\dist\index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { NodeProp } from 'lezer-tree';
^^^^^^
SyntaxError: Cannot use import statement outside a module
1 | import React from 'react';
> 2 | import { highlighter } from "@codemirror/next/highlight";
| ^
3 | import logo from './logo.svg';
4 | import './App.css';
5 |
at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1327:14)
at Object.<anonymous> (src/App.js:2:1)
While facing this issue I tried to shrink the issue to its simplest case so I also tried without CRA just by using only Jest and it worked as charm (on normal js files without all the babel part).
Did you try recovering your dependencies?
$ yarn --version
1.22.5
$ node --version
v12.18.2
Which terms did you search for in User Guide?
ES Modules, mjs
Environment
$ npx create-react-app --info
npx: installed 91 in 7.53s
Environment Info:
current version of create-react-app: 4.0.0
running from C:\Users\n.dubien\AppData\Roaming\npm-cache\_npx\7752\node_modules\create-react-app
System:
OS: Windows 10 10.0.19042
CPU: (8) x64 Intel(R) Core(TM) i7-10510U CPU @ 1.80GHz
Binaries:
Node: 12.18.2 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.5 - ~\.yarn\bin\yarn.CMD
npm: 6.14.5 - C:\Program Files\nodejs\npm.CMD
Browsers:
Chrome: 86.0.4240.111
Edge: Spartan (44.19041.423.0), Chromium (86.0.622.56)
Internet Explorer: 11.0.19041.1
npmPackages:
react: ^16.13.1 => 16.14.0
react-dom: ^16.13.1 => 16.14.0
react-scripts: 4.0.0 => 4.0.0
npmGlobalPackages:
create-react-app: Not Found
Steps to reproduce
In order to reproduce you can have a look to this minimal reproduction repository: https://github.com/dubzzz/codemirror-next-repro-cra.
- Go to directory test-in-cra:
cd test-in-cra
- Install dependencies:
yarn
- Run the tests:
yarn test
In the repository I also tried to run a test on a file using this package using jest only (see test-in-jest-esm). It required some changes like passing the option --experimental-vm-module
to node.
But I have not succeeded to do the same kind of trick when running Jest through CRA. Passing the flag does not seem to be enough as babel keeps transpiling the import to require when running the test.
Expected behavior
It should run fine when I try to run a test against a file importing a package only designed for ES Modules.
Actual behavior
It crashes.
Reproducible demo
Repro: https://github.com/dubzzz/codemirror-next-repro-cra
See Steps to reproduce
Issue Analytics
- State:
- Created 3 years ago
- Reactions:12
- Comments:7 (1 by maintainers)
Top GitHub Comments
By default,
babel-jest
does not consider (or ignores) transformation of any module undernode_modules
. One solution to fix your issue is to use the following as your test script:react-scripts test --transformIgnorePatterns "node_modules/(?!@codemirror)/"
For further reference, please check: https://github.com/facebook/jest/issues/6229#issuecomment-403539460
I got the same error. After many days of struggling, trying all sorts of different configs, setting
transformIgnorePatterns
here and there without any luck, I managed to figure out the culprit: my IDE, WebStorm. If I runnpm test
with the newtransformIgnorePatterns
flag changes in mypackage.json > scripts > test
, then all my test runs properly. However, if I try to run a test own its own via the IDE, I get the error above. If I edit the test (Run Configuration) in WebStorm by adding the flag, it runs perfectly, but I’m not going to add it manually to every individual test that I click with the green arrow.It seems as though the
transformIgnorePatterns
doesn’t work when set in thejest.config.js
file, wish it did though, with WebStorm.Edit: I think I managed to solve it. The
jest.config.js
file doesn’t even get read by WebStorm. So I just went into mypackage.json
and put ajest
field as follows:My external module that’s in
node_modules
as@shotgunjed/my-custom-library
which was causing the problem, no longer does. Now Jest can interpret the code and no longer act like it’s choking when it encounters theimport
keyword.