SyntaxError: Cannot use import statement outside a module

[tflahert]

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]

Getting the same error in jest tests and there is no good workaround.

[villesau]

Got this solved like this: https://stackoverflow.com/a/68193471/2201572

but instead I had:

    "transformIgnorePatterns": [
      "node_modules/(?!@codetrix-studio)"
    ],

In any case I don't think it's a good practice to publish such sources to NPM at this point, they should be transpiled to user friendly format that all the environments supports.

[tflahert]

Thanks @villesau I tried your solution but sadly it doesn't seem to help. Is it just adding a babel.config.json with that 'transformIgnorePatterns' or are there other parts from that stackoverflow question that I should be adding to my project?

[villesau]

@tflahert I'd remove & reinstall node modules just in case Jest caches something. Did you use the transformIgnorePatterns form my previous message instead of stack overflow answer? What versions are you running?

[villesau]

Also, I'm not sure how your babel config looks like, but you need to have "@babel/preset-env" in presets.

[tflahert]

Remove and reinstall all the node modules? Or just the codetrix-studio module? Also, I'll just post my babel.config.json

{ 
    "presets":[
        "@babel/preset-env",
        "@babel/preset-react",
        "@babel/preset-typescript"
      ],
    "plugins": [
        "@babel/plugin-transform-runtime",
        "@babel/proposal-class-properties",
        "@babel/transform-regenerator",
        "@babel/plugin-transform-template-literals",
        "react-hot-loader/babel"
      ],
    "jest": {
        "preset": "ts-jest",
        "testEnvironment": "node",
        "transform": {
            "node_modules/variables/.+\\.(j|t)sx?$": "ts-jest"
            },
    
    "transformIgnorePatterns": [
        "node_modules/(?!@codetrix-studio)"
        ]
    }
}

[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.

[tflahert]

Well the good news is that at the very least, following your advice on moving my jest config into my package.json fixed that particular error! I'm now running into a config error

[tflahert]

Alright, I was able to fix that one on my own, the problem was that jest was picking up the .css files so I needed to add

"moduleNameMapper": {
      "\\.(css|scss)$": "<rootDir>/empty-module.js"
    }

Into my package.json and create that js file with just module.exports = {}; inside.

The debug test is running without any errors now. Thanks so much for your help @villesau

[villesau]

No prob! :)

[villesau]

@tflahert I think this is still a valid issue. The library should be transpiled.

[tflahert]

@villesau Fair enough

[aminBenSlimen]

any updates for this issue ?

[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.

[civic-in]

I am running into same issue SyntaxError: Cannot use import statement outside a module for import { remark } from 'remark';