Open erikmuttersbach opened 10 months ago
You are probably using babel-jest for transforming TS and TSX files. Take a look at your jest config file and in the "transform" option try switching to ts-jest for these two file types.
preset: 'ts-jest',
transform: {
'^.+\\.(ts|tsx)?$': 'ts-jest',
'^.+\\.(js|jsx)$': 'babel-jest',
},
Same here for me:
node_modules/antd/es/message/index.js:3 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray"; SyntaxError: Cannot use import statement outside a module at internalCompileFunction (node:internal/vm:77:18) at wrapSafe (node:internal/modules/cjs/loader:1288:20) at Module._compile (node:internal/modules/cjs/loader:1340:27) at Module._extensions..js (node:internal/modules/cjs/loader:1435:10) at Module.load (node:internal/modules/cjs/loader:1207:32) at Module._load (node:internal/modules/cjs/loader:1023:12) at Module.require (node:internal/modules/cjs/loader:1235:19) at mod.require (/home/ubuntu/jenkins/workspace/ONE-DX/CICD_SERVER_68/ONEDX_FE_CORE_CUSTOMERS_PIPELINE/node_modules/next/dist/server/require-hook.js:64:28) at require (node:internal/modules/helpers:176:18) at 9573 (/home/ubuntu/jenkins/workspace/ONE-DX/CICD_SERVER_68/ONEDX_FE_CORE_CUSTOMERS_PIPELINE/build-workplace/server/pages/_app.js:1:1302) { type: 'SyntaxError' }
Although the code has no changes, the build is completely difference
When I use nextjs 14.0.2, the error disappear. The cause could be the version 14.0.3
I'm seeing the same issue as @thesonpb with next@14.0.3
and antd@4.24.15
. It seems like next@14.0.3
includes this change which changes how antd
is modularized: https://github.com/vercel/next.js/pull/57968. I'm pretty sure it's what breaks this for us.
Note: My issue is not when running jest
, but when doing npm run build
. My build fails during the "Collecting page data" step (output below).
Not sure how to fix this, or if it should be reported as a separate issue. For now, I'm pinning 14.0.2.
✓ Creating an optimized production build
✓ Compiled successfully
Collecting page data ../app/node_modules/antd/es/spin/index.js:1
import _extends from "@babel/runtime/helpers/esm/extends";
^^^^^^
SyntaxError: Cannot use import statement outside a module
at internalCompileFunction (node:internal/vm:73:18)
at wrapSafe (node:internal/modules/cjs/loader:1153:20)
at Module._compile (node:internal/modules/cjs/loader:1197:27)
at Module._extensions..js (node:internal/modules/cjs/loader:1287:10)
at Module.load (node:internal/modules/cjs/loader:1091:32)
at Module._load (node:internal/modules/cjs/loader:938:12)
at Module.require (node:internal/modules/cjs/loader:1115:19)
at mod.require (/app/node_modules/next/dist/server/require-hook.js:64:28)
at require (node:internal/modules/helpers:130:18)
at 2600 (/app/.next/server/pages/admin.js:1:2698)
> Build error occurred
Error: Failed to collect page data for /admin
at /app/node_modules/next/dist/build/utils.js:1217:15
at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
type: 'Error'
}
@victorandree, @thesonpb I cannot confirm that this is connected to the issue I am posting. Changing to the nextjs version you mentioned does not help for me.
What ultimately ended up working for me is to add the problematic packages into transformIgnorePatterns
:
jest.config.ts
const tsconfig = require("./tsconfig.json");
const moduleNameMapper = require("tsconfig-paths-jest")(tsconfig)
module.exports = {
preset: 'ts-jest',
setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
moduleNameMapper,
testEnvironment: 'jest-environment-jsdom',
"transform": {
"^.+\\.(ts|tsx)$": "ts-jest",
'^.+\\.(js|jsx)$': 'babel-jest'
},
"transformIgnorePatterns": [
"node_modules/(?!(ora|chalk|cli-cursor))",
],
}
@erikmuttersbach Seems likely. I've reported my issue as a new one: https://github.com/vercel/next.js/issues/58817.
I also got this issue, I am pretty new to setting up Jest so I hope someone can help me here is my jest.config.js
const nextJest = require('next/jest');
const createJestConfig = nextJest({
// Provide the path to your Next.js app to load next.config.js and .env files in your test environment
dir: './',
});
// Add any custom config to be passed to Jest
const customJestConfig = {
setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
testEnvironment: 'jest-environment-jsdom',
preset: 'ts-jest',
transformIgnorePatterns: [
'node_modules/(?!@azure/msal-react)',
'node_modules/(?!antd)/',
],
transform: {
'^.+\\.jsx?$': 'babel-jest',
'^.+\\.(js|jsx|ts|tsx)$': 'ts-jest',
},
moduleNameMapper: {
'@azure/msal-react': '<rootDir>/mocked/module.js',
},
};
// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
module.exports = createJestConfig(customJestConfig);
this code I follow the jest example in Nextjs source code, I got this issue when running jest to test component render
\node_modules\antd\es\button\index.js:3
import Button from './button';
^^^^^^
SyntaxError: Cannot use import statement outside a module
Verify canary release
Provide environment information
Expected Behavior
Using the same packages for running the application works. I was expecting jest to behave the same
To Reproduce
Start with a clean setup:
Introduce breaking changes:
Edit
app/client/page.test.tsx
(or any other test file) and use chalk:Now
npx jest
fails: