Can't import the named export 'RestError' from non EcmaScript module (only default export is available)

[subhod-i]

• Package Name: @azure/core-rest-pipeline
• Package Version: 1.8.1
• Operating system: MacOS Mont.
• create-react-app: : 4.0.0

Describe the bug
Trying to perform
import { RestError } from '@azure/core-rest-pipeline';
in a ECMAScript Module file (.mjs).

returns build error with the message
Can't import the named export 'RestError' from non EcmaScript module (only default export is available)

To Reproduce
Steps to reproduce the behavior:
I have created a simple project to demonstrate this

1. git clone git@github.com:subhod-i/react-app-4.git
2. cd react-app-4
3. npm i
4. npm start

Expected behavior
Support for ECMA module files.

Additional context
The same problem is observed in @azure/core-client package too.

[jeremymeng]

The conditional export feature may be a solution.

• https://nodejs.org/docs/latest-v16.x/api/packages.html#conditional-exports
• https://nodejs.org/docs/latest-v16.x/api/packages.html#dual-commonjses-module-packages Our current setup is close to Approach 2

We need to be careful about state though

[xirzec]

Let me make sure I understand the issue here:

• We only expose our MJS version by using the module field in package.json, which is not used by Node, but is used by bundlers.
• Since Node can't find our MJS version, it loads our CJS version which doesn't play nicely with import statements.

The request then is to expose our MJS version to Node's native ES Module support. In order to do that, we must use conditional imports and either:

1. Rename our CJS files to .cjs and set "type": "module"
2. Rename our MJS files to .mjs

If we go with 1, we have to validate that older Node runtimes understand how to load .cjs files.
If we pick 2, we have to make sure that bundlers are still able to pull in the .mjs files and we don't break TS typings.

Am I missing anything?

[xirzec]

It seems like .cjs was added in Node 12, so we should be okay to use it.

[subhod-i]

@jeremymeng Any updates on this?

[xirzec]

@mpodwysocki this is related to the investigation you are doing for native Node module support

[mpodwysocki]

@xirzec correct, we could fix this with the exports and ESM modules

[jeremymeng]

@subhod-i I tested the scenario and PR #22804 appears to have addressed the issue. Will continue working on getting it merged.

[jeremymeng]

@subhod-i also it looks like an issue in create-react-app v4. The latest v5 worked fine for me without changes from PR #22804

[jeremymeng]

Some references:
https://stackoverflow.com/questions/71054449/cant-import-the-named-export-directive-from-non-ecmascript-module-only-defau
facebook/create-react-app#10356
https://stackoverflow.com/a/72959074/2170938

[subhod-i]

@subhod-i also it looks like an issue in create-react-app v4. The latest v5 worked fine for me without changes from PR #22804

React native apps still use v4 and that is why we had to support the v4 version too. @jeremymeng Thank you for sharing the StackOverflow links. @davidyuk we can see these solution work or wait till the #22804 gets merged into master.

[jeremymeng]

I did some testing with @subhod-i's repro project. With PR #22804, webpack 4 now reports a different error:

Attempted import error: 'RestError' is not exported from '@azure/core-rest-pipeline'.

Importing from a .mjs file in a simple project works fine when webpack is not involved. It feels that webpack doesn't work very well with ESM. I will continue to check if there's anything we can do.

[jeremymeng]

It is still not clear to me why from a .mjs file, webpack couldn't use the module field in our package.json. However, the following workaround seems to work for me

import crp from '@azure/core-rest-pipeline';
console.log(crp.RestError);

[davidyuk]

However, the following workaround seems to work for me

This would work in create-react-app@4, but won't work in create-react-app@5 as I know. The thing is that we are library that depends on an api generated by autorest and would like to be compatible with both create-react-app@4 and create-react-app@5, I don't see a way to import @azure/core-rest-pipeline in a way compatible with both.

It feels that webpack doesn't work very well with ESM. I will continue to check if there's anything we can do.

webpack@4 has a quirk, but it is doable to fix this on the side of your package, e.g. using mjs extension or adding "type": "module" to package.json

React native apps still use v4

I'm not sure about this, probably they are using their own builder, so, the issue is only aboue compatibility with create-react-app@4

we can see these solution work

As I know, we can't add javascript/auto with no ejecting

[jeremymeng]

webpack@4 has a quirk, but it is doable to fix this on the side of your package, e.g. using mjs extension or adding "type": "module" to package.json

@davidyuk I added "type": "module" in PR #22804. However, the repro project now gives another error as mentioned above. I am still trying to figure out whether there's anything I can do to fix that.

[github-actions]

Hi @subhod-i, we deeply appreciate your input into this project. Regrettably, this issue has remained unresolved for over 2 years and inactive for 30 days, leading us to the decision to close it. We've implemented this policy to maintain the relevance of our issue queue and facilitate easier navigation for new contributors. If you still believe this topic requires attention, please feel free to create a new issue, referencing this one. Thank you for your understanding and ongoing support.