SyntaxError: Cannot use import statement outside a module. #322

blopez2010 · 2020-03-10T20:25:11Z

Hello, when I try to add unit tests to my project, I'm having the following error in the console:

console.log: Jest:   ● Test suite failed to run
[Info]      C:\Code\Web\next-js\node_modules\imask\esm\index.js:1
[Info]      ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import './_rollupPluginBabelHelpers-3c58f0e3.js';
[Info]                                                                                               ^^^^^^
[Info]      SyntaxError: Cannot use import statement outside a module
[Info]        at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
[Info]        at node_modules/react-imask/dist/react-imask.js:2:83
[Info]        at Object.<anonymous> (node_modules/react-imask/dist/react-imask.js:3:3)
[Info]        at Object.<anonymous> (src/components/global-components/form-controls/MaskField.js:8:63)
[Info]        at Object.<anonymous> (src/components/global-components/form-controls/index.js:25:62)
[Info]        at Object.<anonymous> (src/components/component-library/examples/TextFieldExample.js:4:1)
[Info]        at Object.<anonymous> (src/__tests__/components/component-library/examples/TextFieldExample.test.js:9:69)

I have tried several fixes in the web but I can't make it work, have you had this issue before?

This is my package.json

{
  "private": true,
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start -p $PORT",
    "postinstall": "next build",
    "test": "jest --maxWorkers=4 --colors",
    "test:watch": "jest --watch",
    "test:coverage": "jest --coverage",
    "test:CI": "jest --maxWorkers=4 --colors --coverage --coverageReporters=cobertura --json --outputFile=coverage/testResults.json --ci --reporters=default --reporters=jest-junit",
    "export": "next export"
  },
  "dependencies": {
    "@babel/core": "^7.8.6",
    "@contentful/rich-text-react-renderer": "^13.4.0",
    "@contentful/rich-text-types": "^14.0.1",
    "@fortawesome/fontawesome-pro": "^5.11.2",
    "@fortawesome/fontawesome-svg-core": "^1.2.25",
    "@fortawesome/free-brands-svg-icons": "^5.11.2",
    "@fortawesome/free-solid-svg-icons": "^5.11.2",
    "@fortawesome/pro-light-svg-icons": "^5.11.2",
    "@fortawesome/pro-regular-svg-icons": "^5.11.2",
    "@fortawesome/pro-solid-svg-icons": "^5.11.2",
    "@fortawesome/react-fontawesome": "^0.1.7",
    "@microsoft/applicationinsights-web": "^2.3.1",
    "@optimizely/react-sdk": "^1.0.1",
    "@types/react": "^16.9.14",
    "@zeit/next-css": "^1.0.1",
    "axios": "^0.19.0",
    "babel-plugin-prismjs": "^1.1.1",
    "compression": "^1.7.4",
    "contentful": "^7.10.0",
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "google-map-react": "^1.1.5",
    "isomorphic-unfetch": "^3.0.0",
    "jest-junit": "^10.0.0",
    "js-cookie": "^2.2.1",
    "lodash": "^4.17.15",
    "next": "^9.2.2",
    "next-redux-wrapper": "^3.0.0",
    "nookies": "^2.0.8",
    "prismjs": "^1.17.1",
    "prop-types": "^15.7.2",
    "react": "^16.13.0",
    "react-click-outside": "^3.0.1",
    "react-dom": "^16.12.0",
    "react-imask": "^6.0.3",
    "react-loading-skeleton": "^1.3.0",
    "react-redux": "^7.1.3",
    "redux": "^4.0.4",
    "redux-devtools-extension": "^2.13.8",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "babel-jest": "^25.1.0",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.2",
    "enzyme-to-json": "^3.4.3",
    "husky": "^4.2.3",
    "istanbul-reports": "^3.0.0",
    "jest": "^24.9.0",
    "jest-fetch-mock": "^3.0.1",
    "react-media": "^1.10.0",
    "react-test-renderer": "^16.12.0",
    "redux-mock-store": "^1.5.4"
  }
}

An this my jest.config.js file:

const esModules = ["react-imask", "imask"].join('|');

module.exports = {
  moduleDirectories: ["node_modules", "src", "static", "store"],
  modulePathIgnorePatterns: ["<rootDir>/node_modules/prismjs/plugins/line-numbers"],
  transform: {
    [`(${esModules}).+\\.js$`]: 'babel-jest'
  },
  transformIgnorePatterns: [`/node_modules/(?!${esModules})`],
  testPathIgnorePatterns: [
    "<rootDir>/src/components/component-library",
    "<rootDir>/.next",
    "jest.config.js",
    "next.config.js"
  ],
  collectCoverageFrom: [
    "**/src/**",
    "**/store/**",
    "**/pages/**",
    "!**/__tests__/**",
    "!**/node_modules/**",
    "!**/component-library/**"
  ],
  testEnvironment: "node",
  collectCoverage: true,
  verbose: false,
  automock: false,
  setupFiles: ["./setupTests.js"],
  moduleNameMapper: {
    "functions/(.*)$": "<rootDir>/src/components/Functions/$1",
    "scripts(.*)$": "<rootDir>/src/scripts/$1",
    "^/(.*)$": "<rootDir>/src/$1",
    "^store(.*)$": "<rootDir>/store/$1",
    "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
  },
  coveragePathIgnorePatterns: ["/node_modules/"],
  coverageThreshold: {
    global: {
      branches: 25,
      functions: 20,
      lines: 40,
      statements: 40
    }
  }
};

An I can't make it work, could you help me please?

Thank you!

The text was updated successfully, but these errors were encountered:

uNmAnNeR · 2020-03-13T14:20:14Z

seems like imask is not transformed by babel, check your babel.config.js.
jestjs/jest#9395 (comment)
jestjs/jest#4842

rfestag · 2020-03-16T13:39:37Z

I'm a little confused by this...normally babel isn't configured to transpile dependencies. Are you implying that builds should be transpiling react-imask and/or imask? Or am I missing something?

uNmAnNeR · 2020-03-16T14:08:18Z

@rfestag hi. imask ships esm version which is already transpiled by babel, but does not include polyfills. So polyfills should be added separately according environment to run in.
But this issue is about using it with Jest, which does not have support for esm modules, so imask still needs to be transpiled to cjs.

blopez2010 · 2020-03-16T16:28:32Z

Now I'm getting this error:

[Info]  Started Wallaby.js Core v1.0.863
[Info]  console.log: Jest: FAIL pages/__tests__/_document.test.js
[Info]  console.log: Jest:   ● Test suite failed to run
[Info]      C:\Code\Web\next-js\pages\__tests__\_document.test.js:13
[Info]      import React from 'react';
[Info]      ^^^^^^
[Info]      SyntaxError: Cannot use import statement outside a module
[Info]        at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/node_modules/@jest/transform/build/ScriptTransformer.js:537:17)

The issue is now importing React and make babel-jest to transpile it which is weird since babel is trying to transpile all files within the transform config.

rfestag · 2020-03-17T00:02:40Z

@uNmAnNeR: Thanks for the quick reply. Import shouldn't be a polyfill if it's being transpiled down to es5 though, right? I thought the transpile for that inherently replaced with require statements. Can you point me to a correct import for react-imask? I tried switching to the following, and I get the same error:

import {IMaskInput} from 'react-imask/esm/index';

Originally I tried the following from the examples:

import {IMaskInput} from 'react-imask';

Both of which give me a trace something like this:

import 'imask/esm';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:1060:16)
    at Module._compile (internal/modules/cjs/loader.js:1108:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1164:10)
    at Module.load (internal/modules/cjs/loader.js:993:32)
    at Function.Module._load (internal/modules/cjs/loader.js:892:14)
    at Module.require (internal/modules/cjs/loader.js:1033:19)
    at require (internal/modules/cjs/helpers.js:72:18)
...

k1bs · 2020-03-30T20:56:21Z

@uNmAnNeR Hello. I recently had a similar issue using Jest. On a whim, I decided to install version 5.2.1 of your package and it actually resolved the issue. Whatever is causing the react component to break with Jest has just happened since 5.2.1.

grantiverson · 2020-03-30T21:26:20Z

For our project, we prefixed the jest command with NODE_ENV=testing and that got it working for us. We updated our test script to run NODE_ENV=testing jest --verbose ./source and now we don't get any errors from imask.

sem4phor · 2020-04-08T12:34:33Z

I solved it with jest manual mocks (https://jestjs.io/docs/en/manual-mocks). This way you cant test any mask functionality though.

Create folder __mocks__ in root
Create file vue-imask.js
Put Object.create(null) in it

plinionaves · 2020-06-19T14:17:25Z

If someone is still experiencing this error, the solution is quite simple.

Many npm modules don't pre-compile their source code before publishing, and ES6 code needs to be compiled before it can be run by Jest.

Just add this configuration to the jest.config.js file:

module.exports = {
	...
	transformIgnorePatterns: ['node_modules/(?!(imask)/)']
}

Sources:
jest#9292
StackOverflow
Jest Docs

vashchukmaksim · 2020-07-15T21:57:59Z

Have the same issue but not with Jest, with SSR build. Nothing works. Tried to include it to babel transpile process - no effect. Any help?

exclude: /node_modules\/(?!(imask)\/).*/,
include: path.join(__dirname, 'node_modules', 'imask')

include: [
    path.resolve('src'),
    path.resolve('node_modules/imask'),
    path.resolve('node_modules/react-imask'),
],

Neither works. I spent 4 hours trying to solve this and no luck.

MatheusRyuki · 2020-07-16T19:05:45Z

This error is not fixed, the imask react-plugin dont work at Nextjs (ssr).

aryehb · 2020-07-27T16:13:53Z

We had this issue with Webpack and babel-loader. iI turned out that the cause was that our Webpack config for babel-loader excluded the entire node_modules, which meant imask wasn't being transpiled.

We changed our config from:

      {
        test: /\.js$/,
        loader: 'babel',
        exclude: /node_modules/,
      },

to:

      {
        test: /\.js$/,
        loader: 'babel',
        exclude(modulePath) {
          // Exclude node_modules, but include imask
          return /node_modules/.test(modulePath) && !(/imask/).test(modulePath);
        }
      },

zeyuri · 2020-07-31T12:36:28Z

For those using Create React App you can add this to your test script in package.json

--transformIgnorePatterns \"node_modules/(?!(imask)/)/\""

vnt32 · 2020-09-02T10:23:27Z

I can't figure out what the problem is. WebPack configured with Vue Cli I am using @ uvue / ssr

vate · 2020-10-06T13:55:16Z

If someone is still experiencing this error, the solution is quite simple.

Many npm modules don't pre-compile their source code before publishing, and ES6 code needs to be compiled before it can be run by Jest.

Just add this configuration to the jest.config.js file:
module.exports = {
	...
	transformIgnorePatterns: ['node_modules/(?!(imask)/)']
}
Sources:
jest#9292
StackOverflow
Jest Docs

This worked for me, thanks!

jqweryjson · 2020-11-21T16:03:13Z

I can't figure out what the problem is. WebPack configured with Vue Cli I am using @ uvue / ssr

I solved this. Try to add
transformIgnorePatterns: ['node_modules/(?!(vue-masked-input)/)'], into your jest.config.js it is working for me

uNmAnNeR closed this as completed Mar 13, 2020

aryehb mentioned this issue Jul 26, 2020

SyntaxError: Cannot use import statement outside a module #383

Closed

donaldthai mentioned this issue Dec 9, 2020

MB-4638 Storybook allowances viewer form authorized weight transcom/mymove#5439

Merged

6 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

SyntaxError: Cannot use import statement outside a module. #322

SyntaxError: Cannot use import statement outside a module. #322

blopez2010 commented Mar 10, 2020

uNmAnNeR commented Mar 13, 2020

rfestag commented Mar 16, 2020

uNmAnNeR commented Mar 16, 2020

blopez2010 commented Mar 16, 2020

rfestag commented Mar 17, 2020

k1bs commented Mar 30, 2020

grantiverson commented Mar 30, 2020

sem4phor commented Apr 8, 2020

plinionaves commented Jun 19, 2020 •

edited

Loading

vashchukmaksim commented Jul 15, 2020 •

edited

Loading

MatheusRyuki commented Jul 16, 2020

aryehb commented Jul 27, 2020

zeyuri commented Jul 31, 2020

vnt32 commented Sep 2, 2020 •

edited

Loading

vate commented Oct 6, 2020

jqweryjson commented Nov 21, 2020

SyntaxError: Cannot use import statement outside a module. #322

SyntaxError: Cannot use import statement outside a module. #322

Comments

blopez2010 commented Mar 10, 2020

uNmAnNeR commented Mar 13, 2020

rfestag commented Mar 16, 2020

uNmAnNeR commented Mar 16, 2020

blopez2010 commented Mar 16, 2020

rfestag commented Mar 17, 2020

k1bs commented Mar 30, 2020

grantiverson commented Mar 30, 2020

sem4phor commented Apr 8, 2020

plinionaves commented Jun 19, 2020 • edited Loading

vashchukmaksim commented Jul 15, 2020 • edited Loading

MatheusRyuki commented Jul 16, 2020

aryehb commented Jul 27, 2020

zeyuri commented Jul 31, 2020

vnt32 commented Sep 2, 2020 • edited Loading

vate commented Oct 6, 2020

jqweryjson commented Nov 21, 2020

plinionaves commented Jun 19, 2020 •

edited

Loading

vashchukmaksim commented Jul 15, 2020 •

edited

Loading

vnt32 commented Sep 2, 2020 •

edited

Loading