Can't import the named export 'c' from non EcmaScript module (only default export is available) under CRA v4

[dantman]

Describe the bug

When trying to use faker 7.2.0 under CRA v4 you get the following error:
Can't import the named export 'c' from non EcmaScript module (only default export is available)

Reproduction

• Install CRA v4
• Install @faker-js/faker@7.2.0
• Import @faker-js/faker into the app

https://stackblitz.com/edit/node-8dkswx?file=src/index.js

Additional Info

No response

[Shinigami92]

Last working version is v6.3.1. I heavily assume this is related to the

• Faker needs proper webpack loader #1018

issue!

Thank you for your report, now I assume something is broken inside the build of esm via esbuild.
But the only real part that changed after v7+ was this target: https://github.com/faker-js/faker/blame/a8e896f01bad53ee4eeae66656706d5ad18f97e3/scripts/bundle.ts#L51

@evanw do you have some insides for this?
It is NOT the file extension that it is mjs instead of js, because that was already in v6.3.1 and it works. We only bumped the target from node12 to node14.

[dantman]

I'm not sure this is related to that other issue. I'll note a few things.

• CRA already has various Webpack loaders configured (and you can't configure any more)
• v5 of CRA doesn't have this issue so it may be some incompatibility between Webpack v4 and how the Faker build is made
• The error suggests Webpack 4 does in fact understand ESM modules, so it's not that some configuration or loader for ESM support is missing
• I tried checking the error file's source code and I think c appears to be imported from one of the other .mjs chunks which does appear to have ESM syntax in it
• I'm not sure it's related but I will note that Webpack 5 (which is what the working version of CRA v5 has) has support for node's package.json:exports key, but Webpack 4 (which is what the non-working version of CRA v4 has) does not.

[MoSattler]

There is a similar issue when using the latest faker with cypress (which might be one of the big use cases): cypress-io/cypress#21874 (comment)

[Shinigami92]

I found out that your stackblitz repro depends on webpack@4.44.2
Could you try to upgrade your project to use webpack v5 and test again if faker works then?

[dantman]

I found out that your stackblitz repro depends on webpack@4.44.2
Could you try to upgrade your project to use webpack v5 and test again if faker works then?

This is an issue specifically with Faker and Webpack 4, which is used by CRAv4. Upgrading the project to Webpack v5 would require upgrading CRA to v5.

• v5 of CRA doesn't have this issue so it may be some incompatibility between Webpack v4 and how the Faker build is made

MoSattler seem's to have a similar issue because Cypress also seems to be using Webpack v4. Webpack v5 is very different than v4, it can require a large refactor of imports, and the plugin API system changed requiring a variety of config changes to replace plugins that previously worked. So I can understand it not being simple to just drop v5 in place of v4.

[Semigradsky]

As a solution, you can just process node_modules/@faker-js by Babel.

[marco2216]

Having the same issue with Cypress and Storybook. Cypress preprocessor doesn't seem to work at all for me.

[Semigradsky]

As a solution, you can just process node_modules/@faker-js by Babel.

For example, for Storybook (Webpack 4) I have this change:

// .../.storybook/main.js
module.exports = {
  ...,
 
  webpackFinal: async (config) => {
    // The first rule in `rules` property is configuring babel loader.
    // So I just change its `exclude` option from `/node_modules/`
    // to "folder 'node_modules' except of 'node_modules/@faker-js/'"
    config.module.rules[0].exclude = /node_modules(\/|\\)(?!@faker-js(\/|\\)).*/
    
    ...

    return config
  },
}

[Shinigami92]

closed by #1085
will be released on monday

[Shinigami92]

@dantman @MoSattler @Semigradsky @marco2216

Please checkout the newest version https://github.com/faker-js/faker/releases/tag/v7.3.0