ag-grid: Can't import the named export 'Component' from non EcmaScript 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'

Customers of AG Grid

If you are a customer you are entitled to use the AG Grid’s customer support system (powered by Zendesk). Please use that channel for guaranteed response from the AG Grid team with regards bugs, feature requests and support.

Requesting Community Support

If you are not a customer of AG Grid, ag-grid staff will label your issue as managed-by-the-community. This means that AG Grid staff is not going to be actively looking into it and it will get closed if inactive for more than one month. The community is welcome to help with this question/support issue.

Providing a Reproducible Scenario

After updating to the latest ag-grid community version and the react wrapper and doing a clean npm i both npm run and npm build fail with the below mentioned error message.

Neither starting local development nor building the CRA app is possible anymore. This has worked flawlessly before upgrading.

Accepted reproducible scenarios are

  • A description of the detailed steps to reproduce your behaviour in one of our examples in the docs.
  • A plunker

If you decide to send us a plunker, from any example in our website use the plunker button in there to fork your own code by following the steps below:

  • Select the framework that is appropriate to you from the drop-down
  • Open it in plunker. (Use the button plunker in our example)
  • Add your changes so that the behaviour is reproduced
  • Save and Freeze the plunker(On the top left corner)
  • Send us the link to the plunker(You can copy the URL from the browser)

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

./node_modules/ag-grid-react/lib/agGridReact.mjs
Can't import the named export 'Component' from non EcmaScript module (only default export is available)

Expected behavior

npm run start or npm run build should work

Please tell us about your environment:

MacOS

  • AG Grid version: X.X.X

“ag-grid-community”: “^30.0.3”, “ag-grid-react”: “^30.0.4”,

  • Browser:

Chrome

  • Language: [all | TypeScript X.X | ES6/7 | ES5]

All

About this issue

  • Original URL
  • State: closed
  • Created a year ago
  • Comments: 15 (5 by maintainers)

Most upvoted comments

I’ll be providing a fuller answer soon but unfortunately this looks like something that will require react-scripts 5.x and either a “patch” to react-dom or ejecting the project and making a webpack configuration change.

This is an issue with react (fixed in 18 but not backported) - I’ve spent some time trying to see if I could change things to prevent the need for the above but I’m afraid I can’t.

https://github.com/facebook/react/issues/20235

The “fix” is either:

(adding "react-dom/server": "react-dom/server.js", as an alias entry)

  • Eject your project and add "react-dom/server": "react-dom/server.js", as an alias entry

Unfortunately both of these changes will require react-scripts 5.x

If you provide a repo I’ll be happy to take a look - as it stands I’m afraid there’s not really enough information to go on

Sure, I have forked @mbzzt repo (many thanks @mbzzt) and adapted to repro my case: https://github.com/fitterfizzle/ag-grid-bug

Edit: notable change is that we are still at react-scripts 4.0.3 instead of 5.0.1 and we can’t upgrade at the moment