SyntaxError: Cannot use import statement outside a module

Trying to use Ionic with react framework, and when running a basic debug test, I get the following error:

Jest encountered an unexpected token

Details:

C:\Users\<User>\Documents\GitHub\<appname>\node_modules\@codetrix-studio\capacitor-google-auth\dist\esm\index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { registerPlugin } from '@capacitor/core';
                                                                                         ^^^^^^

SyntaxError: Cannot use import statement outside a module

  1 | import { IonButton, IonContent, IonHeader,IonInput,IonLoading,IonPage, IonTitle, IonToolbar, IonIcon} from '@ionic/react';
> 2 | import { GoogleAuth } from '@codetrix-studio/capacitor-google-auth';
    | ^
  3 | import { useEffect, useState } from 'react';
  4 | import { loginUser } from '../firebaseConfig';
  5 | import ExploreContainer from '../components/ExploreContainer';

  at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
  at Object.<anonymous> (src/pages/Login.tsx:2:1)

This ONLY occurs when the capactior-google-auth plugin is used, when that’s taken out, the test runs fine, even though there are plenty of other code modules. Does anyone have any idea what’s causing this?

[villesau]

All the node modules. Some times jest holds a cache somewhere inside node modules and certain changes might corrupt it.

I’m not sure if you should keep your jest config inside babel config? use jest.config.js or package.json for that instead? https://jestjs.io/docs/configuration

Also seems that you are using ts-jest as your transformer: "node_modules/variables/.+\\.(j|t)sx?$": "ts-jest" I don’t think that obeys babel config. You need babel-jest for that.

[MatthewCodes]

Running into the same issue for:

    SyntaxError: Cannot use import statement outside a module

       9 | import { Plugins } from '@capacitor/core';
      10 |
    > 11 | import { GoogleAuth } from '@codetrix-studio/capacitor-google-auth';

jest.config.js

const esModules = ['@codetrix-studio'].join('|');

module.exports = {
    testTimeout: 20000,
    modulePaths: [
    
    "<rootDir>"
  ],
    
    presets:[
      "@babel/preset-env",
      "@babel/preset-react",
      "@babel/preset-typescript"
    ],

    // testPathIgnorePatterns: [
    //   "<rootDir>/node_modules/(?!@codetrix-studio/.*)"
    //   ],
    
    // transformIgnorePatterns: [
    //   "node_modules/(?!@codetrix-studio)"
    // ],

    transform: {
        "node_modules/@codetrix-studio/.+\\.(j|t)sx?$": "babel-jest"
        },

  };

tsconfig.spec.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/spec",
    "allowJs": true,
    "types": [
      "jest",
      "node"
    ]
  },
  "files": [
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.spec.ts",
    "src/**/*.d.ts"
  ]
}

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "types": ["jest"],
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "skipLibCheck": true,
    "lib": [
      "ES2020.String",
      "dom",
      "ES2015",
      "es2017"
    ]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

Right now everything passes except for Google Auth, and if I uncomment transformIgnorePattern or testPathIgnorePattern everything breaks. I’ve also tried removing rootDir.