SyntaxError: Cannot use import statement outside a module #4969
Replies: 21 comments 13 replies
-
|
Research pointed me towards:
However my temp solution has been to remove the EDIT: ticket also created at: jestjs/jest#11881 |
Beta Was this translation helpful? Give feedback.
-
|
Hey, I've been struggling with this all day but have finally found the solution. My webpack was set up to support this and I had my imports set like they specify in the create react app section so when I would run yarn start (starting webpack dev server), it worked, but my jest tests would fail giving me errors along the lines of "Cannot use import statement outside a module". The fix for this is to
NOTE: fileTransform.js file should look something like this: If this isn't enough, try explicitly setting |
Beta Was this translation helpful? Give feedback.
-
|
Worked for me, many thanks! |
Beta Was this translation helpful? Give feedback.
-
|
This is still not working for me. I have tried every fix I can find. Please help! jest.config.json: package.json: |
Beta Was this translation helpful? Give feedback.
-
|
Your jest.config.js is wrong, More info: https://stackoverflow.com/a/72926763 this is nextjs issue for |
Beta Was this translation helpful? Give feedback.
-
|
THANK YOU. What a life saver. Entire days of my life gone trying to work this out. |
Beta Was this translation helpful? Give feedback.
-
|
anisorigin |
Beta Was this translation helpful? Give feedback.
-
|
Hello. I've been having a similar issue with Angular. Anyone's had any success in getting Swiper 7 to work with Jest & Angular 13? |
Beta Was this translation helpful? Give feedback.
-
|
I'm having the same issue - this solution does not seem to resolve it. Any updates? |
Beta Was this translation helpful? Give feedback.
-
|
I am still seeing this issue using Swiper 8.2.1 w/ NextJS and Jest. `\node_modules\swiper\react\swiper-react.js:13 |
Beta Was this translation helpful? Give feedback.
-
|
If you made your react app using create next app, then adding The package.json then should look something like this. { |
Beta Was this translation helpful? Give feedback.
-
|
Is it resolved yet? |
Beta Was this translation helpful? Give feedback.
-
|
Having the same issue, if someone has fixed it pls share the fix with us |
Beta Was this translation helpful? Give feedback.
-
|
How can I fix this problem |
Beta Was this translation helpful? Give feedback.
-
|
@Allan-Nava if you go to Type error occurs due to undefined Fixed solution can be |
Beta Was this translation helpful? Give feedback.
-
I used this version and it fixed |
Beta Was this translation helpful? Give feedback.
-
This version works well |
Beta Was this translation helpful? Give feedback.
-
|
Error Facing in React Next App that uses Webpack while testing using React testing Library My Entire code: Component type: (ProductGallery.types.ts) Component: (ProductGallery.tsx) Story: (ProductGallery.stories.tsx) Test: (ProductGallery.test.tsx) (Causing Problem here)Package.JSON: jest.config.js:
Tried so far:I've tried many things like, adding the transformIgnorePatterns option to jest.config.js but it didn’t fix the error. After some more debugging, I modified the test:rtl script to this in package.json:
I'm looking for a lifesaver here. Thanks in advance. 🙏 |
Beta Was this translation helpful? Give feedback.
-
|
This answer worked for me. React + Nextjs + Swiper module.exports = async () => ({
/**
* Using ...(await createJestConfig(customJestConfig)()) to override transformIgnorePatterns
* provided byt next/jest.
*
* @link https://github.com/vercel/next.js/issues/36077#issuecomment-1096635363
*/
...(await createJestConfig(customJestConfig)()),
/**
* Swiper uses ECMAScript Modules (ESM) and Jest provides some experimental support for it
* but "node_modules" are not transpiled by next/jest yet.
*
* @link https://github.com/vercel/next.js/issues/36077#issuecomment-1096698456
* @link https://jestjs.io/docs/ecmascript-modules
*/
transformIgnorePatterns: [
'node_modules/(?!(swiper|ssr-window|dom7)/)',
]
}) |
Beta Was this translation helpful? Give feedback.
-
|
My solution for CreateReactApp (React 18.1) + Swiper 8.4.6 add to package.json "jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx,ts,tsx}",
"!<rootDir>/node_modules/",
"!<rootDir>/path/to/dir/"
],
"transformIgnorePatterns": [
"'/node_modules/(?![swiper/react/swiper-react.js])'",
"'/node_modules/(?![swiper/react/swiper.js])'"
],
"coverageThreshold": {
"global": {
"branches": 90,
"functions": 90,
"lines": 90,
"statements": 90
}
}
},GOOD imports in components MUST look like this: WRONG import variants that cause problems in my case: |
Beta Was this translation helpful? Give feedback.
-
|
I am using Nextjs 13 typescript and Swipe 9.0.5 and also got into this issue, I'm using like below: and it works fine, but in unit test it throwing error. I've tried all suggestion above but still not working, did I missed anything in config? .babelrc is jest.setup.ts is Can anyone help check did I missed anything? |
Beta Was this translation helpful? Give feedback.
-
|
adding this line to your jest.config.js will fix the error
|
Beta Was this translation helpful? Give feedback.
-
|
i had the same error with the imports of swiper.js you have to be careful when you add this module and specify the files what are causing issue in your project. Not necessary the files what caused issue in my project, are the same files are causing issues in to you. PDD: sorry if my english is not perfect. i am spanish speaking |
Beta Was this translation helpful? Give feedback.
-
|
Test suite failed to run my jest.config.js const nextJest = require('next/jest') const createJestConfig = nextJest({ // Add any custom config to be passed to Jest testEnvironment: 'jest-environment-jsdom', // createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async my package.json |
Beta Was this translation helpful? Give feedback.
-
|
The solution provided by @anisorigin here help me but I needed something else. Apart from that, I had to include the Let me explain: If you're using the following statement as it says in the current docs of existent Swiper v10 for React (I guess this should be working fine also for Vue or any other framework): import { Swiper, SwiperSlide } from 'swiper/react';Such path does not exist in your In my case I was using in my code the following ones: import { Swiper, SwiperSlide } from 'swiper/react';
import { FreeMode, Navigation } from 'swiper/modules';So after adding the following lines in my moduleNameMapper: {
"^swiper/react": "<rootDir>/node_modules/swiper/swiper-react.d.ts",
"^swiper/modules": "<rootDir>/node_modules/swiper/types/modules/index.d.ts",
}Allow me to run successfully my tests with Jest 🚀 Notes (1) As you can see in the provided code chunk, you need to express the absolute path to the real file (you can achieve it thanks to the |
Beta Was this translation helpful? Give feedback.
-
|
Thank you @cpinamtz. I used your solution for mapping the ESM modules for Swiper v11 by adding this to the jest config. Cheers 🥳
|
Beta Was this translation helpful? Give feedback.
-
|
Can anyone help me ? I'm using React 17 and getting the same import error and this is my jest.config.js and this is my babel.config.js my fileTransform.js is the same as suggested by @anisorigin i am getting same error |
Beta Was this translation helpful? Give feedback.
-
|
This issue should have a higher priority, but it hasn't been fixed yet( |
Beta Was this translation helpful? Give feedback.
-
|
I find solution for this problem: I mocked the swiper/react lib |
Beta Was this translation helpful? Give feedback.
-
|
It's not a solution, it's just a temporary hiccup) |
Beta Was this translation helpful? Give feedback.
-
|
Yeah I'm blocked by this. Surprised it's been opened for so long but hey...someone wrote this mostly for free (assuming they're making SOME ROI) |
Beta Was this translation helpful? Give feedback.
-
|
nextjs: const nextConfig = {
transpilePackages: ['swiper']
}; |
Beta Was this translation helpful? Give feedback.
-
|
Recently, I'm faced this problem with Next@14.1 + Jest + Swiper@11. Basically, Jest transpiles and runs according to the transform property specified in package.json {
"name": "...",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"test": "jest",
"test:ci": "jest --ci"
},
"dependencies": {
"next": "14.1.0",
"react": "^18",
"react-dom": "^18",
"react-intersection-observer": "^9.5.3",
"sharp": "^0.33.2",
"styled-components": "^6.1.8",
"swiper": "^11.0.5"
},
"devDependencies": {
"@testing-library/dom": "^9.3.4",
"@testing-library/jest-dom": "^6.4.2",
"@testing-library/react": "^14.2.1",
"@testing-library/user-event": "^14.5.2",
"@types/jest": "^29.5.11",
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"autoprefixer": "^10.0.1",
"eslint": "^8",
"eslint-config-next": "14.1.0",
"identity-obj-proxy": "^3.0.0",
"intersection-observer": "^0.12.2",
"jest": "^29.7.0",
"jest-environment-jsdom": "^29.7.0",
"typescript": "^5"
}
}jest.config.ts const nextJest = require('next/jest');
const createJestConfig = nextJest({
dir: './',
})
const customJestConfig = {
setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
moduleDirectories: ['node_modules', '<rootDir>'],
testEnvironment: "jsdom",
};
export default async () => ({
...(await createJestConfig(customJestConfig)()),
transformIgnorePatterns: ["node_modules/(?!(swiper)/)"],
});jest.setup.js import '@testing-library/jest-dom'__tests__/_app.tests.tsx import { render, screen } from "@testing-library/react";
import Home from "@/pages";
describe("Home", () => {
it("Render Home", () => {
render(<Home />);
// do something
});
});swiper code in some.tsx import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/swiper-bundle.css"; |
Beta Was this translation helpful? Give feedback.
and others
-
I have the swiper up and running - however I'm seeing the following issue when running my jest test suite. #4966
A link to the repo reproducing the error is also at: https://github.com/chrisj-skinner/swiper-nx-angular
My env is an nx angular workspace
Beta Was this translation helpful? Give feedback.
All reactions