Error: SyntaxError: Cannot use import statement outside a module #9292
Comments
|
I am also seeing this issue. For me it has cropped up when upgrading to the new react-native-modal-datetime-picker module that has an import and export default in it's index.js file and is isolated to our jest unit tests. Any insight you have on this issue would be appreciated. |
|
We enabled tests in a Heroku pipeline for one of our apps, and this error started popping up. I can't replicate it locally, or in a Docker container (node 8 and LTS tested). I have no idea what's causing this, and the fact that it only happens in my Heroku environment has me scratching my head even more. UPDATE |
|
I'm seeing this with crossfilter2 with jest unit tests.
Using jest@24.9.0 from react-scripts@3.3.0 importing crossfilter2@1.5.0. Update: I resolved my issue with crossfilter by upgrading to crossfilter 1.5.1 which changed it's CommonJS entry point. |
|
In my configurations and this solved the issue |
|
I could resolve the issue with this help: |
|
@lukmajewski answer helped me too. |
|
I am having the same issue, i'm using CRA, don't know what to do. |
|
I am having this issue with @react-native-firebase/app v6 My jest config is in the package.json as follows, could it be a problem? {
"scripts": {
"postinstall": "jetify",
"android": "react-native run-android",
"ios": "react-native run-ios",
"web": "expo start --web",
"start": "react-native start",
"test": "jest"
},
"dependencies": {
"@react-native-community/async-storage": "^1.7.1",
"@react-native-firebase/app": "^6.2.0",
"@react-native-firebase/auth": "^6.2.0",
"@react-native-firebase/crashlytics": "^6.2.0",
"@react-native-firebase/firestore": "^6.2.0",
"expo": "~36.0.0",
"expo-asset": "^8.0.0",
"expo-font": "^8.0.0",
"expo-linear-gradient": "^8.0.0",
"expo-location": "^8.0.0",
"expo-permissions": "^8.0.0",
"formik": "^2.0.8",
"geofirestore": "^3.3.1",
"geolib": "^3.2.0",
"haversine": "^1.1.1",
"js-sha256": "^0.9.0",
"lodash": "^4.17.15",
"moment": "^2.24.0",
"moment-duration-format": "^2.3.2",
"native-base": "^2.13.8",
"react": "~16.9.0",
"react-dom": "~16.9.0",
"react-native": "~0.61.4",
"react-native-base64": "^0.0.2",
"react-native-dotenv": "^0.2.0",
"react-native-elements": "^1.2.7",
"react-native-gesture-handler": "~1.5.0",
"react-native-keyboard-aware-scroll-view": "^0.9.1",
"react-native-maps": "^0.26.1",
"react-native-maps-animated-polyline": "^1.0.6",
"react-native-maps-super-cluster": "^1.6.0",
"react-native-reanimated": "~1.4.0",
"react-native-safe-area-context": "0.6.0",
"react-native-safe-area-view": "^1.0.0",
"react-native-scalable-image": "^1.0.0",
"react-native-screens": "~2.0.0-alpha.12",
"react-native-splash-screen": "^3.2.0",
"react-native-svg": "^9.13.6",
"react-native-unimodules": "~0.7.0",
"react-native-web": "~0.11.7",
"react-navigation": "^4.0.10",
"react-navigation-drawer": "^2.2.2",
"react-navigation-header-buttons": "^3.0.4",
"react-navigation-stack": "^1.9.4",
"react-navigation-tabs": "^2.5.6",
"react-redux": "^7.1.1",
"redux": "^4.0.4",
"redux-thunk": "^2.3.0",
"reselect": "^4.0.0",
"throttle-debounce": "^2.1.0"
},
"devDependencies": {
"@babel/core": "~7.6.0",
"babel-jest": "~24.9.0",
"jest": "~24.9.0",
"jest-expo": "^36.0.0",
"jetifier": "~1.6.4",
"metro-react-native-babel-preset": "~0.56.0",
"react-native-svg-transformer": "^0.14.3",
"react-test-renderer": "~16.9.0",
"redux-devtools-extension": "^2.13.8"
},
"jest": {
"projects": [
{
"preset": "jest-expo/ios"
},
{
"preset": "jest-expo/android"
}
],
"transformIgnorePatterns": [
"node_modules/(?!(jest-)?react-native|react-clone-referenced-element|@react-native-community|expo(nent)?|@expo(nent)?/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|@react-native-firebase/.*|react-native-firebase)"
]
},
"private": true
}What am I missing? I am new to unit testing so any help will be very much appreciated!!! |
|
@lean's StackOverflow link helped me solve this issue. Thanks! |
|
Hi , I am new to Vue Unit Testing and i keep getting the same Error after trying my first test.It seems to work for the first 2 import statements , but not for the epic-spinners one .I tried everything and looked up a lot over the forums and Github , but i couldnt find a solution. everything i try doesnt seem to work. I need help please ! Thanks :) Error package.json (with Jest config) .babelrc babel.config.js |
|
I wrote an article to sum up the solutions as i was unable to find a proper solution for the issue. Hope this will help https://xperimentalhamid.com/how-do-i/fix-cannot-use-import-statement-outside-a-module/ |
I'm having this problem I've never had before. What can I do.
|
|
and how can i solve this problem in a vue project using @vue/composition it is my jest.config.js |
|
I solved the f***ing thing by migrating the |
Ditto 🤦♂️. I had to move over to a |
I solved the thing by actually creating any sort of babel configuration file in the first place! Duh... |
|
Facing same problem. package.json One of the test case which I am executing On running npm test Is there anything in my initial configuration, as it was working fine when i was using react native 0.53 version. |
Have a similar issueHi everyone, I'm workin' with a I already did the I always get these errors in all my projects, both with
|
|
Also had this issue recently. Posted a working configuration here https://stackoverflow.com/a/63118113/6456392 Hope it helps! 🙌 |
|
If you're using Typescript, then you should install |
|
Similar issue, but the module I'm having problems with has both es6 and cjs versions, and I'd rather use the cjs version rather than transpile the es6 one. The fixes I've seen all seem to be forcing babel to transpile, which seems like a bad fix when an already transpiled version is available. Is there a way to have jest prefer the commonjs version Edit: this is very odd, because it seems like Edit: OK, it's because I'm explicitly importing the module path version, because the thing I want isn't exported from the default entry 🤦 Edit: I wish there was a sane way to do a |
|
In my case I'm using nextJs, and I solved my problem removing "next/babel" preset when I'm on Test enviroment (For any reason, using "next/babel", console shows the error: "SyntaxError: Cannot use import statement outside a module"): babel.config.js |
|
@kauecastro NextJS is very nice. What solved the problem for me was rather simple. An upgrade from Jest v23 to v24 resolved the issue. I tried everything here and also tweaked my jest.config.js and babel.config.js and nothing worked. Here's what is in my package.json and it works perfectly: |
|
Just a quick reminder for everyone (including my future self in about 6 months – Hi 👋 Yes, I'm talking to you!): This can also occur when you're trying to import a file that is importing a dependency that is simply not using the ES6 syntax. Most jest configurations are not (re-)compiling files from the |
|
As a relative beginner to configuring jest, I had a hard time figuring out why this error was happening on my project. What worked for me was to make sure that the |
|
I still get the error. Any help please! FAIL tests/topup-package/topup-package.spec.ts
● Test suite failed to run
/home/fsevenm/nodejs-projects/deliverit/tests/test-environment.ts:1
import NodeEnvironment from "jest-environment-node";
^^^^^^
SyntaxError: Cannot use import statement outside a module
at runTestInternal (node_modules/jest-runner/build/runTest.js:223:5)
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 0.025 s// test-environment.ts
import NodeEnvironment from "jest-environment-node";
import { createUser, destroyUsers } from "./utils";
class TestEnvironment extends NodeEnvironment {
async setup(): Promise<void> {
await super.setup();
const { token } = await createUser();
this.global.authToken = token;
}
async teardown(): Promise<void> {
await destroyUsers();
await super.teardown();
}
}
export default TestEnvironment;// jest.config.js
module.exports = {
preset: "ts-jest",
testEnvironment: "<rootDir>/tests/test-environment.ts",
moduleNameMapper: {
"@src/(.*)$": "<rootDir>/src/$1",
},
testPathIgnorePatterns: ["/node_modules/", "<rootDir>/build/"],
globalTeardown: "<rootDir>/tests/teardown.ts",
}; |
|
What worked for me was changing the {
"presets": [
["@babel/preset-env", { "modules": "auto" }]
]
} |
Thanks for helping me |
thank you so much! |
|
This work for me: Add an file .babelrc {
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "entry",
"corejs": {"version": "3"}
}
]
]
} |
|
For those who are running into this issue only on CircleCI, I was finally able to fix it there, the issue was that I hadn't added Thought I was going crazy. Had to SSH into CircleCI to fix, which I didn't know was an option and is a handy debugging tool. |
|
This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. |
and others
I have this issue when I'm trying to run the tests with this configuration:
jest.config.js
babel.config.js
Then, the error:
The text was updated successfully, but these errors were encountered: