Faker needs proper webpack loader

[DmitriiLinkSquares]

Hi. Recently tried to install faker.js and started getting this error:
Error: Webpack Compilation Error
./node_modules/@faker-js/faker/dist/esm/chunk-UKDF2E7O.mjs 1:1430
Module parse failed: Unexpected token (1:1430)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

Cannot find anywhere how to create webpack loader for mjs files.
Does anyone had this problem? And mb know how to configure webpack.confid.js to solve this problem?
Thank you!

[Shinigami92]

Please note that this is not a direct issue in faker, but a missing configuration in (your) webpack.
I'm not using webpack myself, but some simply googling already shows me several resolutions that could solve your problem

• https://stackoverflow.com/a/64907659/6897682
• https://github.com/styleguidist/react-styleguidist/issues/1385 (prevent linking issues)
• https://www.google.com/search?q=webpack+mjs+loader

[Shinigami92]

Hey @DmitriiLinkSquares, I created a vue-cli webpack project in our playground: https://github.com/faker-js/playground/tree/main/playgrounds/webpack-cjs and at least this one works as expected for now 🤔
We need to improve these, but maybe it already helps you

[kris-luminar]

I couldn't figure this out for my use-case (testing a React app in Cypress) and reverted to v6.3.1 for now.

[Shinigami92]

We are already trying to reproduce this in https://github.com/faker-js/playground
and with the previous v7.1.0 we successfully approved that it works at least with vue-cli + webpack v5 🤔
https://github.com/faker-js/playground/runs/6674662874?check_suite_focus=true#step:8:25
Now it fails but with another error and I'm not sure if this even is related to faker
We are also working on a playground that is based on webpack only without vue-cli, but I don't have knowledge about webpack anymore

Please feel free to open PRs in playground if you can help us in any way to reproduce your error.

[kris-luminar]

I'm very inexperienced with webpack, so I doubt I'll be much help. I have reached out to my team lead for assistance though. If we find anything that will help, we will share it back here. Thank you for your efforts!

[neogeek]

I've also been running into this issue with my environment, which is Next.js, Cypress, and Faker. I created a simple example of this issue and submitted it to the playground repo: faker-js/playground#4

Oops...we found an error preparing this test file:

  > cypress/e2e/sample.cy.ts

The error was:

Error: Webpack Compilation Error
/Users/scottdoxey/git/github/playground/node_modules/.pnpm/@[email protected]/node_modules/@faker-js/faker/dist/esm/chunk-4J2PVEV7.mjs 1:1430
Module parse failed: Unexpected token (1:1430)

[kris-luminar]

I dug through the Cypress 10 changes and didn't find anything particularly obvious that would have caused this bug with Faker, but way back in Cypress 5 I found this change:

Cypress no longer forces the esModuleInterop compiler option for TypeScript to be true for spec, support, and plugins files. We recommend setting it in your project's tsconfig.json instead if you need to.

// tsconfig.json
{
  "compilerOptions": {
    "esModuleInterop": true
    /* ... other compiler options ... */
  }
}

-- source

That combined with the fact that Cypress switched from a fixed cypress.json config file to the new dynamic ones cypress.config.js or cypress.config.ts, I suspect has something to do with this bug.

[Shinigami92]

But in the playground example, it is set to true 🤔
https://github.com/faker-js/playground/blob/7fdfd82dcc6ca512e0573a4dd4cfccc12e62980c/playgrounds/nextjs/tsconfig.json#L10

[kris-luminar]

That is unexpected. Don't know what to make of it.

[Shinigami92]

Finally someone made a helpful reproduction and this is not even directly related to webpack

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

But with that we got new helpful insights

[kris-luminar]

I think this was resolved in #1085 . Can we close this?