Create-react-app: Webpack 4.x bug compiling libraries with both .js and .mjs

[trxcllnt]

Webpack 4.x has a bug that causes it to throw ReferenceError: require is not defined at runtime when compiling projects with .js and .mjs side-by-side:

This bug has been fixed in Webpack 5, and Webpack 4 has this workaround:

{
    test: /\.mjs$/,
    type: "javascript/auto",
}

From what I can tell, this was briefly how CRA handled .mjs, but was reverted a few days later via #5258.

Assuming no objections from @Timer, can CRA revert back to back to the javascript/auto configuration for Webpack 4? We can revert again once CRA is updated to Webpack 5.

Steps to Reproduce

Repro repo: https://github.com/trxcllnt/arrow-viewer/tree/cra-mjs-bug

1. git clone -b cra-mjs-bug https://github.com/trxcllnt/arrow-viewer.git
2. yarn && yarn start
3.

Environment

  System:
    OS: Linux 4.18 Ubuntu 18.04.1 LTS (Bionic Beaver)
    CPU: x64 Intel(R) Core(TM) i7-8700K CPU @ 3.70GHz
  Binaries:
    Node: 11.6.0 - ~/.nvm/versions/node/v11.6.0/bin/node
    Yarn: 1.13.0 - /usr/bin/yarn
    npm: 6.5.0 - ~/.nvm/versions/node/v11.6.0/bin/npm
  Browsers:
    Chrome: 71.0.3578.98
    Firefox: 64.0
  npmPackages:
    react: next => 16.8.0-alpha.1 
    react-dom: next => 16.8.0-alpha.1 
    react-scripts: next => 2.1.3-next.6a95aae9 
  npmGlobalPackages:
    create-react-app: Not Found

[mrmckeb]

Would you like to raise a PR for this @trxcllnt? From what I read, this shouldn't have any side-effects.

Alternatively, we could look at Webpack 5... but I'm not sure how big that change would be.

[Timer]

We shouldn't switch to javascript/auto if at all avoidable. We intentionally disabled this because it allows users to opt-into non-spec behavior.

This bugfix should be backported to webpack 4.

[trxcllnt]

Oh, it looks like the fix may have been released in [email protected]. In that case, we should be able to update and see if it's still an issue. I'll try that locally here in a bit and see what happens.

[mrmckeb]

That looks like a much better solution, thanks @Timer.

@trxcllnt Would you like to raise a PR to bump the Webpack version?

[trxcllnt]

@mrmckeb just tested it works, so yep will open a PR :tada:

[trxcllnt]

on closer examination, it seems like [email protected] that's in the react-scripts dependencies is also sufficient, but react-scripts@next that's on npm is still on [email protected], which isn't. So it looks like this will be fixed by the next release.

[mrmckeb]

Thanks for investigating, @trxcllnt. We'll wait for the next release then!