Webpack 4.x bug compiling libraries with both .js and .mjs
See original GitHub issueWebpack 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
git clone -b cra-mjs-bug https://github.com/trxcllnt/arrow-viewer.git
yarn && yarn start
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
Issue Analytics
- State:
- Created 5 years ago
- Comments:7 (4 by maintainers)
Top Results From Across the Web
How to transpile ES modules with webpack and Node.js
Learn how webpack interacts with and supports ES modules in this deep dive tutorial on transpilation in Node.js.
Read more >Externals - webpack
webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable...
Read more >How to Create a Hybrid NPM Module for ESM and CommonJS.
But it works for all of mine, including consumption by Webpack, ... However, if you are building a hybrid module, then using .mjs...
Read more >API - ESBuild
This setting is a convention from Webpack that esbuild respects for any imported file, not just files used with inject. #Loader. Supported by:...
Read more >CommonJS modules | Node.js v19.3.0 Documentation
Node.js has two module systems: CommonJS modules and ECMAScript modules. By ... The .mjs extension is reserved for ECMAScript Modules which cannot be...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Oh, it looks like the fix may have been released in webpack@4.29.0. 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.
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.