SyntaxError: Cannot use import statement outside a module in my test

[jong-hui]

I writing test code using "ReactTestUtils"
and I use gapiScript in the "SomeComponent"

My test case is "is render SomeComponent"

Here my code

it("is render SomeComponent", () => {
  act(() => {
    ReactDOM.render(<SomeComponent />, container)
  })
})

SomeComponent is well rendered in my browser. but Test suite failed to run

is my error

/Users/jonghui/Desktop/Project/vacation_management/node_modules/gapi-script/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { gapi, gapiComplete } from './gapiScript';

SyntaxError: Cannot use import statement outside a module

[jong-hui]

https://stackoverflow.com/questions/59709939/jest-cannot-use-import-statement-outside-a-module I think it's look same problem

[LucasAndrad]

Thanks for the feedback @jong-hui I try to reproduce that this weekend, can you give me more details about your jest version and any other config you're using for testing please?

Also I left a comment on that stackoverflow question:

"Did you try to import the package inside your test as well? Or mocking the gapi functions? I believe you have to mock it"

[jong-hui]

Thanks for the comment @LucasAndrad

Here is my dependencies:

  "dependencies": {
    "@material-ui/core": "^4.9.5",
    "@material-ui/icons": "^4.9.1",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "gapi-script": "^1.0.2",
    "material-table": "^1.57.2",
    "moment": "^2.24.0",
    "react": "^16.13.0",
    "react-dom": "^16.13.0",
    "react-google-login": "^5.1.2",
    "react-scripts": "3.4.0"
  },

My jest version is "@jest/core@^24.9.0"

Also I tried to import that's pakage inside my test code. Nevertheless, the same error didn't go away.

[EliteMasterEric]

I am experiencing this error in my site. I'm not sure as to the cause of the issue.

[fotoflo]

Im having the same problem

[jemink]

When I am trying to use the same package in next.js then I am getting the same error

[jvidalv]

Yes, same issue here with this package and Jest.

[arturEmmy]

When I am trying to use the same package in next.js then I am getting the same error

Did you solve that issue in next.js app?

[lamqnguyen308]

When I am trying to use the same package in next.js then I am getting the same error

Did you solve that issue in next.js app?

Try use the package in a seperate component then mount the component using dynamic with ssr: false

[choudhary-ankit]

same issue in Next.js, anyone solve this issue?

[tdiderich]

same issue trying to deploy a firebase cloud function - any updates here?

[sspickle]

same issue with jest and create-react-app.

[fotoflo]

mounting component using dynamic with ssr: false

Hi @lamqnguyen308 , can you give a little example code?

[lamqnguyen308]

mounting component using dynamic with ssr: false

Hi @lamqnguyen308 , can you give a little example code?

Hi I don't have the code anymore. you can try by create a placeholder component for gapi (empty div or just fragments) then use the snippet

const YourPlaceHolderGapiComponent = dynamic(
  () => import('path-to-your-gapi-component'),
  { ssr: false }
)

[fotoflo]

Thank you!!

[sidmohanty11]

Hey guys I've changed the gapi-script a bit, used common js module, and eliminated the use of eval, and all other errors(this error, jest error etc). If you want to check out the project -> https://github.com/sidmohanty11/gapi-cjs

If you like it, do give it a star ⭐

Thank you!

[stinso]

When I am trying to use the same package in next.js then I am getting the same error

const gapi = await import('gapi-script').then((pack) => pack.gapi);

[timcastelijn]

I am also experiencing this issue with Create-React-App and testing with jest. All my tests are passing, except the ones where gapi-script is one loaded dependencies.

    D:\programming\tnm_firestore\node_modules\gapi-script\index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import { gapi, gapiComplete } from './gapiScript';
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module

[sidmohanty11]

@timcastelijn you can swap it out with gapi-cjs package

[Lynnze-24]

mounting component using dynamic with ssr: false

Hi @lamqnguyen308 , can you give a little example code?

Hi I don't have the code anymore. you can try by create a placeholder component for gapi (empty div or just fragments) then use the snippet

const YourPlaceHolderGapiComponent = dynamic(
  () => import('path-to-your-gapi-component'),
  { ssr: false }
)

This solved my issue. Thanks!

[dev-madhurendra]

Not working for me @Lynnze-24

[dev-madhurendra]

({"Object.":function(module,exports,require,__dirname,__filename,jest){import { gapi, gapiComplete } from './gapiScript';
^^^^^^

SyntaxError: Cannot use import statement outside a module

facing this error while testing my component

import { gapi } from 'gapi-script';

I tried below method also for importing gapi script but it is not working 
const { gapi } = require('gapi-script')

I follow this stack overflow link also : https://stackoverflow.com/questions/59709939/jest-cannot-use-import-statement-outside-a-module but not working