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

ghost · 2020-09-24T12:28:31Z

🧐 问题描述

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)

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

chenshuai2144 · 2020-09-25T04:05:38Z

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

iamricky · 2021-02-11T03:25:40Z

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 · 2021-02-11T03:33:35Z

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 · 2021-02-19T16:19:35Z

+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 · 2021-02-19T22:11:18Z

same issue using @ant-design/pro-layout

ButuzGOL · 2021-02-23T12:21:42Z

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 · 2021-02-24T04:31:13Z

看样子是你设置问题，你要是嫌麻烦可以使用 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 · 2021-02-25T03:17:05Z

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

ButuzGOL · 2021-02-25T16:40:36Z

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 · 2021-02-26T09:49:40Z

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 · 2021-02-26T09:54:04Z

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 · 2021-02-26T10:29:01Z

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 · 2021-02-26T10:30:52Z

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 · 2021-02-26T10:40:31Z

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

secreter · 2021-04-14T09:42:56Z

mark

yf-hk · 2023-01-01T04:17:36Z

Can it be solved with babel-plugin-import?

yf-hk · 2023-01-01T04:17:41Z

Can it be solved with babel-plugin-import?

bijaypoudel1 · 2024-08-21T19:58:30Z

Same issue with antd DatePicker.RangePicker

chenshuai2144 closed this as completed Sep 25, 2020

ghost mentioned this issue Sep 30, 2020

怎么能让pro components打包后引用lib而不是es #636

Closed

This was referenced Jan 17, 2023

🐛[BUG] SyntaxError: Cannot use import statement outside a module, NEXTJS 13 #6525

Closed

@ant-design/pro-components : Cannot use import statement outside a module #6527

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

ghost commented Sep 24, 2020

chenshuai2144 commented Sep 25, 2020

iamricky commented Feb 11, 2021 •

edited

Loading

iamricky commented Feb 11, 2021

ButuzGOL commented Feb 19, 2021 •

edited

Loading

shughes-uk commented Feb 19, 2021

ButuzGOL commented Feb 23, 2021

OnionStu commented Feb 24, 2021

dumplingJ commented Feb 25, 2021

ButuzGOL commented Feb 25, 2021

yinlianghui commented Feb 26, 2021

ButuzGOL commented Feb 26, 2021

yinlianghui commented Feb 26, 2021 •

edited

Loading

yinlianghui commented Feb 26, 2021

ButuzGOL commented Feb 26, 2021

secreter commented Apr 14, 2021

yf-hk commented Jan 1, 2023

yf-hk commented Jan 1, 2023

bijaypoudel1 commented Aug 21, 2024

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

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

Comments

ghost commented Sep 24, 2020

🧐 问题描述

🚑 其他信息

chenshuai2144 commented Sep 25, 2020

iamricky commented Feb 11, 2021 • edited Loading

iamricky commented Feb 11, 2021

ButuzGOL commented Feb 19, 2021 • edited Loading

shughes-uk commented Feb 19, 2021

ButuzGOL commented Feb 23, 2021

OnionStu commented Feb 24, 2021

dumplingJ commented Feb 25, 2021

ButuzGOL commented Feb 25, 2021

yinlianghui commented Feb 26, 2021

ButuzGOL commented Feb 26, 2021

yinlianghui commented Feb 26, 2021 • edited Loading

yinlianghui commented Feb 26, 2021

ButuzGOL commented Feb 26, 2021

secreter commented Apr 14, 2021

yf-hk commented Jan 1, 2023

yf-hk commented Jan 1, 2023

bijaypoudel1 commented Aug 21, 2024

iamricky commented Feb 11, 2021 •

edited

Loading

ButuzGOL commented Feb 19, 2021 •

edited

Loading

yinlianghui commented Feb 26, 2021 •

edited

Loading