ag-grid: v30.0.0 - SyntaxError: Cannot use import statement outside a module

I’m submitting a … (check one with “x”)

[x] bug report => see 'Providing a Reproducible Scenario'
[] feature request => do not use Github for feature requests, see 'Customers of AG Grid'
[] support request => see 'Requesting Community Support'

Providing a Reproducible Scenario When running with package setup:

"ag-grid-community": "^29.0.0",
"ag-grid-react": "^29.0.0",

Everything works as intended. When flicking over to v30.0.0 encounter the error and the page does not load:

"ag-grid-community": "^30.0.0",
"ag-grid-react": "^30.0.0",

Server Error
SyntaxError: Cannot use import statement outside a module

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
<unknown>
file: .../node_modules/ag-grid-community/dist/ag-grid-community.esm.js (6)

If reporting a bug make sure to state.

Current behaviour. Expected behaviour. If possible back this up with our docs/examples if possible

Current behavior Less than v30 doesn’t throw error.

Expected behavior Error is not thrown, and component functionality works as indended.

Please tell us about your environment: React v18.2, next js v13.1, Windows 11, node v18.16, yarn 3.4.1.

AG Grid version: 30.0.0
Browser: Chrome
Language: [all | TypeScript X.X | ES6/7 | ES5] any

About this issue

Original URL
State: closed
Created a year ago
Reactions: 13
Comments: 36 (16 by maintainers)

Most upvoted comments

@kieren-harvey-shell have you fixed your error with jest? I am getting absolutely the same

DzLadus on Jul 17, 2023

Given how popular nextjs is, it might be a good idea to call this out on the onboarding docs for react-ag-grid?

cmishra on Jun 29, 2023

I’m seeing this issue on 30.0.2 and 30.0.3:

    Details:

   ~\node_modules\ag-grid-react\lib\main.mjs:2
    export { AgGridReact } from './agGridReact.mjs';
    ^^^^^^

    SyntaxError: Unexpected token 'export'

I’m getting this error during test execution (jest).

My understanding is that we want to exclude it from being transformed? jest.config.js transformIgnorePatterns: [“node_modules/(?!ag-grid-react)”],

In which case it shouldn’t really matter what’s in my babelrc but just for completeness…

  transform: {
    "\\.[jt]s[xm]?$": "babel-jest",
    "\\.(blah|oga)$":
      "<rootDir>/config/fileTransformer.js",
  },

.babelrc

{
  "presets": [
    "@babel/preset-env",
    [
      "@babel/preset-react",
      {
        "runtime": "automatic"
      }
    ],
    "@babel/preset-typescript",
    "@babel/modules"
  ],
  "plugins": [
    [
      "babel-plugin-transform-import-ignore",
      {
        "patterns": [".css"]
      }
    ]
  ]
}

kieren-harvey-shell on Jul 6, 2023

@DzLadus please upgrade to ag-grid-community 30.0.2 - as you’re an enterprise customer I’d recommend you contact support for further assistance at info@ag-grid.com. You’ll get much quicker responses.

thanks

seanlandsman on Jun 19, 2023

Can you please try ag-grid-react 30.0.2

and add the following to your next.config.js:

transpilePackages: ['ag-grid-community', 'ag-grid-react'],

seanlandsman on Jun 16, 2023

@seanlandsman could u pls put the eta of the fix? I have to know it bc I need to decide what to do with my current task in the sprint 😃

DzLadus on Jun 15, 2023

Hi @seanlandsman I just tried, and for some reason I don’t see the issue on codesandbox, yet I swear I did earlier this morning.

I do however repeatedly get it on our enterprise next.js project, flicking between the two packages v29 (working), v30 (failing) with this error 😦 Not sure how to direct you from here.

0xflumedev on Jun 12, 2023

We’ve just release 30.0.6 - please upgrade and retry.

I’ll update here shortly with release notes

seanlandsman on Jul 28, 2023

Can you please try ag-grid-react 30.0.2

and add the following to your next.config.js:

transpilePackages: ['ag-grid-community', 'ag-grid-react'],

That option solved my issue.

camiyu1 on Jun 28, 2023

@seanlandsman

DzLadus on Jun 17, 2023

@jonahallibone thanks for the repro - I can reproduce and can confirm that this is a bug

I’ve raised “AG-8756: ag-grid-community/ag-grid-enterprise with Next: Cannot use import statement outside a module” our side and we’ll work to get this fixed in a patch release soon.

You can follow the status of feature requests, bugs and releases using our pipeline (it may take a few hours before this issue appears there): https://www.ag-grid.com/ag-grid-pipeline/

seanlandsman on Jun 13, 2023

@seanlandsman yea definitely. Here ya go: https://codesandbox.io/p/sandbox/shy-water-s6mrrn

You should see the error when the application loads. I didn’t implement the entire table, as including the AgGridReact component itself in the page was enough to cause the error

jonahallibone on Jun 12, 2023