How do I fix SyntaxError: Cannot use import statement outside a module using Jest?

Question

I have tried just about every single tutorial and approach to get Jest to recognize import statements. However, I cannot find a working solution in 2021.

Things I have tried:

All of the advice from this stack overflow post
Jest's documentation page on this here
Babel's documentation page on configuring Jest here

Here is my current layout. I have tried many others as well.

Error message:

  
    /Users/lukeanglin/Desktop/Convene/frontend/convene/node_modules/expo-secure-store/build/SecureStore.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import { UnavailabilityError } from 'expo-modules-core';
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      1 | import { LOGIN_URL } from '../config/globals';
      2 | import { LOG } from '../config/logger-conf';
    > 3 | import * as SecureStore from 'expo-secure-store';
        | ^
      4 | import axios from 'axios';
      5 | export async function login(email, password) {
      6 |   // Returns true if login succeeds and false on fail (also logs error message)
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      1 | import { LOGIN_URL } from '../config/globals';
      2 | import { LOG } from '../config/logger-conf';
    > 3 | import { SecureStore } from 'expo-secure-store';
        | ^

babel.config.json

{
    "presets": ["@babel/preset-env"]
}

package.json

// stuff here 
"type": "module",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject",
    "lint": "eslint .",
    "lint:fix": "eslint --fix",
    "format": "prettier --write './**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc",
    "test": "jest"
  },
  "jest": {
    "transform": {
      "^.+\\.[t|j]sx?$": "babel-jest"
    }
},
// stuff here

Steps to reproduce:

Create an expo project
Install Jest and babel, and expo-secure-store
Attempt to import SecureStore
Right a function doing something with the file that attempts to import SecureStore

Additionally, the entire content of the file that causes the error on the import is here:

login.js

import { LOGIN_URL } from '../config/globals';
import { LOG } from '../config/logger-conf';
import * as SecureStore from 'expo-secure-store';
import axios from 'axios';
export async function login(email, password) {
  // Returns true if login succeeds and false on fail (also logs error message)
  try {
    const response = await axios.post(LOGIN_URL, {
      username: email,
      password: password
    });
    // Save the token
    const token = response['data']['token']
    await SecureStore.setItemAsync('token', token);
    return true;
  } catch (error) {
    LOG.error(
      'Error on GET request to login for authentication OR error on storing token with SecureStore: \n' +
        error
    );
    return false;
  }
}

and the test tests the function login.

Anyone with working configurations of Jest and Babel to make ES6 modules like SecureStore functional (and import statements, exports, etc.) who can help me, I will greatly appreciate you!

TLDR - How do I fix SyntaxError: Cannot use import statement outside a module using Jest?

Does this help? https://stackoverflow.com/a/64655153/12417483 — nlta, Dec 31 '21 at 20:50
You can't use commonjs import like you used in your login.js file. Change it to es6 import — Kalle, Dec 31 '21 at 21:11
@nlta if you see my package.json i actually already have that — Luke Anglin, Dec 31 '21 at 21:40
@DerEchteKroate could you specify what you mean by changing it to an es6 import? — Luke Anglin, Dec 31 '21 at 21:40
@Luke Anglin look at your login.js file. You are clearly importing axios on line 4 with the commonjs method. Change it to es6 import — Kalle, Dec 31 '21 at 21:43
I just tried that. I still get the error on line 3 with the import SecureStore — Luke Anglin, Dec 31 '21 at 21:47
This issue has been raised in the [project repo](https://github.com/axios/axios/issues/5026) and there is not yet a solution — Kmelow, Dec 28 '22 at 18:44

score 0 · Accepted Answer · answered Jan 03 '22 at 02:50

0

Eventually, I learned this is not a problem with Babel or Jest config, but rather this is limited to the SecureStore item itself. This module seems to pose problems specifically, as other imports work.

answered Jan 03 '22 at 02:50

Luke Anglin

43
4

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jan 03 '22 at 03:37

How do I fix SyntaxError: Cannot use import statement outside a module using Jest?

1 Answers1