SyntaxError: Cannot use import statement outside a module

[dubzzz]

Hello 👋

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.

1. Go to directory test-in-cra: cd test-in-cra
2. Install dependencies: yarn
3. 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

[ehsankhfr]

By default, babel-jest does not consider (or ignores) transformation of any module under node_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: jestjs/jest#6229 (comment)

[dubzzz]

Thanks a lot @ehfeng, it works perfectly well! Even the --experimental-vm-modules does not seem to be required anymore.

[joshuarobs]

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 run npm test with the new transformIgnorePatterns flag changes in my package.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 the jest.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 my package.json and put a jest field as follows:

"jest": {
    "transform": {
      "^.+\\.[t|j]sx?$": "babel-jest"
    },
    "transformIgnorePatterns": ["node_modules/(?!@shotgunjed)/"]
  },

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 the import keyword.

[RoySegall]

npm i babel-jest

And I changed the test in my package.json to "test": "react-scripts test --transformIgnorePatterns \"node_modules/(?!@codemirror)/\"",

[Appolinars]

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 run npm test with the new transformIgnorePatterns flag changes in my package.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 the jest.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 my package.json and put a jest field as follows:

"jest": {
    "transform": {
      "^.+\\.[t|j]sx?$": "babel-jest"
    },
    "transformIgnorePatterns": ["node_modules/(?!@shotgunjed)/"]
  },

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 the import keyword.

You are my savior. This problem drove me mad two days and only your solution fixed it

[Raam10]

By default, babel-jest does not consider (or ignores) transformation of any module under node_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: facebook/jest#6229 (comment)

Thanks man

[Asiddev]

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 run npm test with the new transformIgnorePatterns flag changes in my package.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 the jest.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 my package.json and put a jest field as follows:

"jest": {
    "transform": {
      "^.+\\.[t|j]sx?$": "babel-jest"
    },
    "transformIgnorePatterns": ["node_modules/(?!@shotgunjed)/"]
  },

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 the import keyword.

Thank you so much. So annoying to see last test failing because of axios import module.

[jhaanji035]

Perfect, This worked for me. Cheers mate