Can't import the named export 'Component' from non EcmaScript module

[fitterfizzle]

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

[fitterfizzle]

Some more context: using the latest version of ag-grid 30.0.3 with the ag-grid-react@30.0.2 works, the problem is when upgrading the react wrapper to either 30.0.3 or 30.0.4 that the import problem shows.

[mbzzt]

I am facing similar issues since we upgraded to ag-grid-react 30.0.3/30.0.4. If I pin it to 30.0.2, it all works fine.
This is the error I see, both when doing local development and when I try to build my project:

ERROR in ./node_modules/ag-grid-react/lib/shared/newReactComponent.mjs 10:0-56
Module not found: Error: Can't resolve 'react-dom/server' in '/node_modules/ag-grid-react/lib/shared'
Did you mean 'server.browser.js'?
BREAKING CHANGE: The request 'react-dom/server' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

Some details about my environment:

• node v16.15.0
• App bootstrapped with CRA
• Relevant dependencies:

    "ag-grid-react": "30.0.4",
    "react": "17.0.2",
    "react-app-polyfill": "3.0.0",
    "react-dom": "17.0.2",
    "react-scripts": "5.0.1",

[TjeneBen]

same issue here

[seanlandsman]

@mbzzt if you're able to provide a repo I'd be happy to see how we can assist you with this

[mbzzt]

@mbzzt if you're able to provide a repo I'd be happy to see how we can assist you with this

Sure. Repo: https://github.com/mbzzt/ag-grid-bug
Thanks in advance!

[seanlandsman]

Thanks for the repo - I can see that this is an issue with react 17 (it works with react 18). If you can upgrade that will fix your problem otherwise I've a fix for this that will allow for backward compatability.

Our next release is scheduled for next week - the fix for this will be included in that release.

For clarity: the fix for "Module not found: Error: Can't resolve 'react-dom/server' " will be included

thanks

[fitterfizzle]

What about the original reported problem by me? Will this also be fixed? We are also still using react 17

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

[seanlandsman]

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

[mbzzt]

Thanks for the repo - I can see that this is an issue with react 17 (it works with react 18). If you can upgrade that will fix your problem otherwise I've a fix for this that will allow for backward compatability.

Our next release is scheduled for next week - the fix for this will be included in that release.

For clarity: the fix for "Module not found: Error: Can't resolve 'react-dom/server' " will be included

thanks

@seanlandsman awesome, thanks a lot for your prompt response!

[fitterfizzle]

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

[fitterfizzle]

Any news based on my last comment @seanlandsman ?

[seanlandsman]

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.

facebook/react#20235

The "fix" is either:

• Patch create-react-app as follows: Bug: Cannot import 'react/jsx-runtime' from esm node/webpack 5 facebook/react#20235 (comment)

(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

[fitterfizzle]

But this means that starting with v30.0.3 ag-grid is effectively dropping support for react-scripts 4.x :/

[seanlandsman]

We have just released 30.0.6 : please see ES Modules & CommonJS for more information

[phuhk2908]

I had this error when I try to imported AgReactGrid and how can i fix it
The requested module '/node_modules/ag-grid-react/lib/main.js?v=7b4ba1cf' does not provide an export named 'AgGridReact'