SyntaxError: Cannot use import statement outside a module, using aws-amplify-react-native in a Jest environment

[ThomasCarca]

I am working on a react-native project with amplify to help me sign in users via Cognito.
Everything has been ok so far but I've been stuck on the following issue the past days :
When running tests, some fail unexpectedly with the following error :

After doing some research, it seems a similar issue has already happened for the module "ui-react" (#5322, #5282) and a PR was merged recently #5324.

All in all, it seems to me that it has to do with the module not being transpiled from ES6 to ES5, but I have not dived in the code.

The app works fine and the issue happens when running tests on components importing withOAuth from amplify-js-react-native.

I also found this stackoverflow thread and tried the accepted answer.
I added to my jest configuration the following line :

"transformIgnorePatterns": [
    "node_modules/(?!(react-native|aws-amplify-react-native)/)"
]

And got a new error :

From there I am stuck...

Package.json

{
  "name": ...,
  "version": ...,
  "private": true,
  "scripts": {
    ...
  },
  "dependencies": {
    "@react-native-community/async-storage": "^1.8.1",
    "@react-native-community/masked-view": "^0.1.7",
    "@react-native-community/netinfo": "^5.7.1",
    "@react-navigation/native": "^5.0.9",
    "@react-navigation/stack": "^5.1.1",
    "@reduxjs/toolkit": "^1.3.4",
    "@types/enzyme": "^3.10.5",
    "@types/enzyme-adapter-react-16": "^1.0.6",
    "@types/i18n-js": "^3.0.1",
    "@types/react-navigation": "^3.4.0",
    "@types/react-redux": "^7.1.7",
    "@types/redux-mock-store": "^1.0.2",
    "amazon-cognito-identity-js": "^4.2.1",
    "appcenter": "3.0.0",
    "appcenter-analytics": "3.0.0",
    "appcenter-crashes": "3.0.0",
    "aws-amplify": "^3.0.8",
    "aws-amplify-react-native": "^4.0.4",
    "axios": "0.18.0",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.2",
    "graphql": "^14.6.0",
    "graphql-request": "^1.8.2",
    "i18n-js": "^3.5.1",
    "moment": "^2.24.0",
    "normalizr": "^3.6.0",
    "react": "16.9.0",
    "react-dom": "^16.13.0",
    "react-native": "0.61.5",
    "react-native-animatable": "^1.3.3",
    "react-native-config": "^0.12.0",
    "react-native-flash-message": "^0.1.15",
    "react-native-gesture-handler": "^1.6.0",
    "react-native-linear-gradient": "^2.5.6",
    "react-native-localize": "^1.3.3",
    "react-native-logs": "^2.0.2",
    "react-native-material-menu": "^1.1.0",
    "react-native-reanimated": "^1.7.0",
    "react-native-safe-area-context": "^0.7.3",
    "react-native-screens": "^2.2.0",
    "react-native-splash-screen": "^3.2.0",
    "react-native-user-avatar": "^1.0.4",
    "react-native-webview": "^9.0.2",
    "react-redux": "^7.2.0",
    "redux": "^4.0.5",
    "redux-mock-store": "^1.5.4",
    "redux-observable": "^1.2.0",
    "redux-persist": "^6.0.0",
    "rxjs": "^6.5.4",
    "tslint": "^6.0.0",
    "tslint-config-prettier": "^1.18.0",
    "tslint-config-standard": "^9.0.0",
    "tslint-react": "^4.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.6.2",
    "@babel/runtime": "^7.6.2",
    "@react-native-community/eslint-config": "^0.0.5",
    "@types/detox": "^14.5.2",
    "@types/jasmine": "^3.5.7",
    "@types/jest": "^25.1.3",
    "@types/react-native": "^0.60.25",
    "@types/react-native-material-menu": "^1.0.0",
    "@types/react-test-renderer": "16.9.1",
    "@typescript-eslint/eslint-plugin": "^2.24.0",
    "@typescript-eslint/parser": "^2.24.0",
    "babel-jest": "^24.9.0",
    "babel-plugin-module-resolver": "^4.0.0",
    "detox": "^15.4.2",
    "eslint": "^6.8.0",
    "eslint-config-prettier": "^6.10.0",
    "eslint-plugin-prettier": "^3.1.2",
    "eslint-plugin-react": "^7.19.0",
    "jasmine-marbles": "^0.6.0",
    "jest": "^24.9.0",
    "jest-fetch-mock": "^3.0.2",
    "jest-sonar-reporter": "^2.0.0",
    "jest-transform-stub": "^2.0.0",
    "metro-react-native-babel-preset": "^0.56.0",
    "prettier": "^1.19.1",
    "react-native-version": "^4.0.0",
    "react-test-renderer": "16.9.0",
    "redux-devtools-extension": "^2.13.8",
    "sonar-scanner": "^3.1.0",
    "ts-jest": "^25.2.1",
    "typescript": "^3.7.3"
  },
  "jest": {
    "collectCoverage": true,
    "coverageDirectory": "coverage",
    "preset": "react-native",
    "setupFiles": [
      "./setup-tests.ts",
      "./node_modules/react-native-gesture-handler/jestSetup.js"
    ],
    "automock": false,
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ],
    "moduleNameMapper": {
      ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
      "^~store(.*)$": "<rootDir>/src/store$1"
    }
  }
  "test-runner": "jest"
  }
}

Environment

System:
    OS: Linux 5.4 Manjaro Linux
    CPU: (8) x64 Intel(R) Core(TM) i7-8705G CPU @ 3.10GHz
    Memory: 3.76 GB / 15.37 GB
    Container: Yes
    Shell: 3.1.0 - /bin/fish
  Binaries:
    Node: 13.10.1 - /usr/bin/node
    Yarn: 1.22.0 - /usr/bin/yarn
    npm: 6.14.2 - /usr/bin/npm
    Watchman: 4.9.0 - /usr/bin/watchman
  Browsers:
    Firefox: 74.0
  npmPackages:
    @babel/core: ^7.6.2 => 7.9.0 
    @babel/runtime: ^7.6.2 => 7.9.2 
    @react-native-community/async-storage: ^1.8.1 => 1.9.0 
    @react-native-community/eslint-config: ^0.0.5 => 0.0.5 
    @react-native-community/masked-view: ^0.1.7 => 0.1.9 
    @react-native-community/netinfo: ^5.7.1 => 5.7.1 
    @react-navigation/native: ^5.0.9 => 5.1.6 
    @react-navigation/stack: ^5.1.1 => 5.2.11 
    @reduxjs/toolkit: ^1.3.4 => 1.3.5 
    @types/detox: ^14.5.2 => 14.5.2 
    @types/enzyme: ^3.10.5 => 3.10.5 
    @types/enzyme-adapter-react-16: ^1.0.6 => 1.0.6 
    @types/i18n-js: ^3.0.1 => 3.0.2 
    @types/jasmine: ^3.5.7 => 3.5.10 
    @types/jest: ^25.1.3 => 25.2.1 
    @types/react-native: ^0.60.25 => 0.60.31 
    @types/react-native-material-menu: ^1.0.0 => 1.0.0 
    @types/react-navigation: ^3.4.0 => 3.4.0 
    @types/react-redux: ^7.1.7 => 7.1.7 
    @types/react-test-renderer: 16.9.1 => 16.9.1 
    @types/redux-mock-store: ^1.0.2 => 1.0.2 
    @typescript-eslint/eslint-plugin: ^2.24.0 => 2.29.0 
    @typescript-eslint/parser: ^2.24.0 => 2.29.0 
    amazon-cognito-identity-js: ^4.2.1 => 4.2.1 
    appcenter: 3.0.0 => 3.0.0 
    appcenter-analytics: 3.0.0 => 3.0.0 
    appcenter-crashes: 3.0.0 => 3.0.0 
    aws-amplify: ^3.0.8 => 3.0.8 
    aws-amplify-react-native: ^4.0.4 => 4.0.4 
    axios: 0.18.0 => 0.18.0 
    babel-jest: ^24.9.0 => 24.9.0 
    babel-plugin-module-resolver: ^4.0.0 => 4.0.0 
    detox: ^15.4.2 => 15.5.0 
    enzyme: ^3.11.0 => 3.11.0 
    enzyme-adapter-react-16: ^1.15.2 => 1.15.2 
    eslint: ^6.8.0 => 6.8.0 
    eslint-config-prettier: ^6.10.0 => 6.10.1 
    eslint-plugin-prettier: ^3.1.2 => 3.1.3 
    eslint-plugin-react: ^7.19.0 => 7.19.0 
    graphql: ^14.6.0 => 14.6.0 
    graphql-request: ^1.8.2 => 1.8.2 
    i18n-js: ^3.5.1 => 3.5.1 
    jasmine-marbles: ^0.6.0 => 0.6.0 
    jest: ^24.9.0 => 24.9.0 
    jest-fetch-mock: ^3.0.2 => 3.0.3 
    jest-sonar-reporter: ^2.0.0 => 2.0.0 
    jest-transform-stub: ^2.0.0 => 2.0.0 
    metro-react-native-babel-preset: ^0.56.0 => 0.56.4 
    moment: ^2.24.0 => 2.24.0 
    normalizr: ^3.6.0 => 3.6.0 
    prettier: ^1.19.1 => 1.19.1 
    react: 16.9.0 => 16.9.0 
    react-dom: ^16.13.0 => 16.13.1 
    react-native: 0.61.5 => 0.61.5 
    react-native-animatable: ^1.3.3 => 1.3.3 
    react-native-config: ^0.12.0 => 0.12.0 
    react-native-flash-message: ^0.1.15 => 0.1.15 
    react-native-gesture-handler: ^1.6.0 => 1.6.1 
    react-native-linear-gradient: ^2.5.6 => 2.5.6 
    react-native-localize: ^1.3.3 => 1.4.0 
    react-native-logs: ^2.0.2 => 2.1.2 
    react-native-material-menu: ^1.1.0 => 1.1.3 
    react-native-reanimated: ^1.7.0 => 1.8.0 
    react-native-safe-area-context: ^0.7.3 => 0.7.3 
    react-native-screens: ^2.2.0 => 2.5.0 
    react-native-splash-screen: ^3.2.0 => 3.2.0 
    react-native-user-avatar: ^1.0.4 => 1.0.4 
    react-native-version: ^4.0.0 => 4.0.0 
    react-native-webview: ^9.0.2 => 9.2.1 
    react-redux: ^7.2.0 => 7.2.0 
    react-test-renderer: 16.9.0 => 16.9.0 
    redux: ^4.0.5 => 4.0.5 
    redux-devtools-extension: ^2.13.8 => 2.13.8 
    redux-mock-store: ^1.5.4 => 1.5.4 
    redux-observable: ^1.2.0 => 1.2.0 
    redux-persist: ^6.0.0 => 6.0.0 
    rxjs: ^6.5.4 => 6.5.5 
    sonar-scanner: ^3.1.0 => 3.1.0 
    ts-jest: ^25.2.1 => 25.4.0 
    tslint: ^6.0.0 => 6.1.1 
    tslint-config-prettier: ^1.18.0 => 1.18.0 
    tslint-config-standard: ^9.0.0 => 9.0.0 
    tslint-react: ^4.2.0 => 4.2.0 
    typescript: ^3.7.3 => 3.8.3 
  npmGlobalPackages:
    @angular/cli: 9.0.0
    @aws-amplify/cli: 4.18.0
    @vue/cli: 4.2.2
    cloudcms-cli: 1.1.126
    create-react-app: 3.4.0
    generator-jhipster-vuejs: 1.3.0
    generator-jhipster: 6.5.1
    jhipster: 0.0.2
    node-gyp: 6.1.0
    npm: 6.14.2
    semver: 7.1.3
    yarn: 1.22.0
    yo: 3.1.1

Thank you for your help !

[amhinson]

@ThomasCarca I'm looking into the 1st error you are seeing. But it also looks like that 2nd error message is for a different library (react-native-flash-message). Could you try adding that library to the transformIgnorePatterns list as well to see if that allows your tests to run?

[ThomasCarca]

Putting

    "transformIgnorePatterns": [
      "node_modules/(?!(react-native|aws-amplify-react-native)|react-native-flash-message/)"
    ]

yields the following error :

Then

"transformIgnorePatterns": [
      "node_modules/(?!(react-native|aws-amplify-react-native|react-native-flash-message|react-native-iphone-x-helper)/)"
    ]

gives :

Looking at other files, I'm getting all kinds of errors of the same type :

I doubt adding more dependencies to the transformIgnorePatterns array is the right solution.

[amhinson]

Can you post your babel and/or jest configuration as well?

[ThomasCarca]

babel.config.js :

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./src'],
        alias: {
          '~assets': './src/assets',
          '~components': './src/components',
          '~config': './src/config',
          '~constants': './src/constants',
          '~containers': './src/containers',
          '~mocks': './__mocks__',
          '~models': './src/models',
          '~store': './src/store',
          '~stubs': './__stubs__',
          '~utils': './src/utils',
        },
      },
    ],
  ],
};

Most of our jest configuration is directly in the package.json file :
package.json :

...
"jest": {
    "collectCoverage": true,
    "coverageDirectory": "coverage",
    "preset": "react-native",
    "setupFiles": [
      "./setup-tests.ts",
      "./node_modules/react-native-gesture-handler/jestSetup.js"
    ],
    "automock": false,
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ],
    "moduleNameMapper": {
      ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
      "^~store(.*)$": "<rootDir>/src/store$1"
    },
    "transformIgnorePatterns": [
      "node_modules/(?!(react-native|aws-amplify-react-native|react-native-flash-message|react-native-iphone-x-helper|@aws-sdk)/)"
    ]
  },
...

We're using a setup-tests.ts file to do some setup :
setup-tests.ts :

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import { enableFetchMocks } from 'jest-fetch-mock';
import L from '~utils/logger.util';
import mockRNCNetInfo from '@react-native-community/netinfo/jest/netinfo-mock.js';

jest.mock('@react-native-community/netinfo', () => mockRNCNetInfo);

Enzyme.configure({ adapter: new Adapter() });
enableFetchMocks();

// Fixes unwanted warnings when running tests with jest-environment and Enzyme
// see issue : https://github.com/enzymejs/enzyme/issues/1436
console.error = (message: any) => message;

// Set the severity on error to not print logs when running test, unless the log
// is very important such as an error
L.setSeverity('error');

[ThomasCarca]

I have successfully resolved my issue this morning after semi-randomly tweaking the transformIgnorePatterns array.

The resulting array is the following :

"transformIgnorePatterns": [
      "node_modules/(?!(react-native|aws-amplify-react-native|@aws-sdk/eventstream-serde-browser|@react-native-community/masked-view))"
    ]

Please note I have removed the / character in the regexp, and it helped a lot :
from

"transformIgnorePatterns": [
      "node_modules/(?!(...|...|...)/)"
    ]

... in my previous posts, to :

"transformIgnorePatterns": [
      "node_modules/(?!(...|...|...))"
    ]

Now, all tests pass successfully.
I still think this is a hack and the problem should be addressed.

[amhinson]

Ok thanks for the update! It does look like the code isn't being transpiled (which doesn't cause any issues when running the app). I'll mark this as a feature request for now so we can come back around to it in the future.

[madhu-sudhan-bhat]

import React, { Component } from "react"
[0] ^^^^^^
[0]
[0] SyntaxError: Cannot use import statement outside a module

getting same error in react.js

[tannerabread]

Hi 👋 Closing this as resolved. This package is now deprecated. We recommend that you migrate to the new amplify UI library.

Thank you!