🧐pro-tabel jest单测时报错 Cannot use import statement outside a module

[panghuhu123]

🧐 问题描述

Ts项目中使用了pro-tabel，jest单测报错Cannot use import statement outside a module

🚑 其他信息

报错信息： ● Test suite failed to run

Jest encountered an unexpected token

This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

Here's what you can do:
 • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
 • If you need a custom transformation specify a "transform" option in your config.
 • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html

Details:

node_modules/antd/es/config-provider/style/index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import './index.less';
                                                                                         ^^^^^^

SyntaxError: Cannot use import statement outside a module

  at Runtime.createScriptFromCode (node_modules/jest/node_modules/jest-runtime/build/index.js:1270:14)
  at Object.<anonymous> (node_modules/@ant-design/pro-provider/lib/index.js:11:1)

[chenshuai2144]

看样子是你设置问题，你要是嫌麻烦 可以使用 lib 的配置，而不是用es

[iamricky]

I ran into the a similar issue when importing @ant-design/pro-list into a Next app.

/Users/workstation/Sites/next-test-app/node_modules/antd/es/form/style/index.js:1
import '../../style/index.less';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (node:internal/modules/cjs/loader:1024:16)
    at Module._compile (node:internal/modules/cjs/loader:1072:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1137:10)
    at Module.load (node:internal/modules/cjs/loader:973:32)
    at Function.Module._load (node:internal/modules/cjs/loader:813:14)
    at Module.require (node:internal/modules/cjs/loader:997:19)
    at require (node:internal/modules/cjs/helpers:92:18)
    at Object.<anonymous> (/Users/workstation/Sites/next-test-app/node_modules/@ant-design/pro-list/lib/index.js:10:1)
    at Module._compile (node:internal/modules/cjs/loader:1108:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1137:10)
    at Module.load (node:internal/modules/cjs/loader:973:32)
    at Function.Module._load (node:internal/modules/cjs/loader:813:14)
    at Module.require (node:internal/modules/cjs/loader:997:19)
    at require (node:internal/modules/cjs/helpers:92:18)
    at eval (webpack-internal:///@ant-design/pro-list:1:18)

import ProList from "@ant-design/pro-list" is all it took to throw errors.

[iamricky]

Here are the contents of my tsconfig.json file for anyone that's interested:

{
    "compilerOptions": {
        "target": "es5",
        "lib": ["dom", "dom.iterable", "esnext"],
        "allowJs": true,
        "skipLibCheck": true,
        "strict": false,
        "forceConsistentCasingInFileNames": true,
        "noEmit": true,
        "esModuleInterop": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "jsx": "preserve"
    },
    "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
    "exclude": ["node_modules"]
}

[ButuzGOL]

+1 also have this issue in /lib it has require("antd/es/layout/style"); and there import '../../style/index.less';

Config Ussing cra with storybook

[shughes-uk]

same issue using @ant-design/pro-layout

[ButuzGOL]

any help because i mostly spent lot of time but cant mock that area but it import lot from es antd/es/layout antd/es/config-provider/style etc ?

[OnionStu]

看样子是你设置问题，你要是嫌麻烦 可以使用 lib 的配置，而不是用es

现在项目是使用 Next app. 按照上面所说的，pro-table 使用的是 @ant-design/pro-table/lib.

现在问题是 pro-table/lib引用了 @ant-design/pro-provider, pro-provider里面 是直接 引用了 antd/es/config-provider es模块继续导致了上述的错误

这个怎么解决呢？

[dumplingJ]

jest.config.js -> moduleNameMapper -> “^antd/es/(.*)$”: “/node_modules/antd/lib/$1”

[ButuzGOL]

Thx works

"^antd/es/(.*)$": "<rootDir>/node_modules/antd/lib/$1",
"^rc-util/es/(.*)$": "<rootDir>/node_modules/@ant-design/pro-layout/node_modules/rc-util/lib/$1"

[yinlianghui]

Thx works

"^antd/es/(.*)$": "<rootDir>/node_modules/antd/lib/$1",
"^rc-util/es/(.*)$": "<rootDir>/node_modules/@ant-design/pro-layout/node_modules/rc-util/lib/$1"

Thanks very much, but are you mean put this config to the webpack config? Can you show out your config code, I'm using this plugin: https://github.com/SolidZORO/next-plugin-antd-less/blob/master/index.js

[ButuzGOL]

no in jest config

"jest": {
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/src/__mocks__/fileMock.js",
      "^@resources/(.*)$": "<rootDir>/src/__mocks__/fileMock.js",
      "^@/(.*)$": "<rootDir>/src/$1",
      "^@utils/(.*)$": "<rootDir>/src/utils/$1",
      "^antd/es/(.*)$": "<rootDir>/node_modules/antd/lib/$1",
      "^rc-util/es/(.*)$": "<rootDir>/node_modules/@ant-design/pro-layout/node_modules/rc-util/lib/$1"
    },

for webpack no need

[yinlianghui]

no in jest config

"jest": {
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/src/__mocks__/fileMock.js",
      "^@resources/(.*)$": "<rootDir>/src/__mocks__/fileMock.js",
      "^@/(.*)$": "<rootDir>/src/$1",
      "^@utils/(.*)$": "<rootDir>/src/utils/$1",
      "^antd/es/(.*)$": "<rootDir>/node_modules/antd/lib/$1",
      "^rc-util/es/(.*)$": "<rootDir>/node_modules/@ant-design/pro-layout/node_modules/rc-util/lib/$1"
    },

for webpack no need

Oh, not worked for me, still tks.

[yinlianghui]

I ran into the a similar issue when importing @ant-design/pro-list into a Next app.

/Users/workstation/Sites/next-test-app/node_modules/antd/es/form/style/index.js:1
import '../../style/index.less';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (node:internal/modules/cjs/loader:1024:16)
    at Module._compile (node:internal/modules/cjs/loader:1072:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1137:10)
    at Module.load (node:internal/modules/cjs/loader:973:32)
    at Function.Module._load (node:internal/modules/cjs/loader:813:14)
    at Module.require (node:internal/modules/cjs/loader:997:19)
    at require (node:internal/modules/cjs/helpers:92:18)
    at Object.<anonymous> (/Users/workstation/Sites/next-test-app/node_modules/@ant-design/pro-list/lib/index.js:10:1)
    at Module._compile (node:internal/modules/cjs/loader:1108:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1137:10)
    at Module.load (node:internal/modules/cjs/loader:973:32)
    at Function.Module._load (node:internal/modules/cjs/loader:813:14)
    at Module.require (node:internal/modules/cjs/loader:997:19)
    at require (node:internal/modules/cjs/helpers:92:18)
    at eval (webpack-internal:///@ant-design/pro-list:1:18)

import ProList from "@ant-design/pro-list" is all it took to throw errors.

Have you solve this problem?

[ButuzGOL]

i havent import pro-list strange this line should help "^antd/es/(.*)$": "/node_modules/antd/lib/$1",

[secreter]

mark

[dzcpy]

Can it be solved with babel-plugin-import?

[dzcpy]

Can it be solved with babel-plugin-import?