question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Webpack 4.x bug compiling libraries with both .js and .mjs

See original GitHub issue

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:

screenshot from 2019-01-27 14-46-46

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

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:closed
  • Created 5 years ago
  • Comments:7 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
trxcllntcommented, Jan 30, 2019

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.

1reaction
Timercommented, Jan 30, 2019

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.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found