Webpack 5 output with "commonjs2" and "externals" can't be loaded by Webpack 4

[sslepian]

Bug report

What is the current behavior?

When using Webpack5 with library.type of commonjs2 and externals set, the resulting output cannot be consumed by Webpack 4.

The app doesn't load, and the following error appears in dev tools:

index.js:45 Uncaught TypeError: __webpack_require__ is not a function

Repro steps

1. clone https://github.com/sslepian/webpack5-externals-bug and be in the root directory
2. run the following commands
   1. cd lib
   2. npm install
   3. npm build
   4. npm link
   5. cd ..
   6. cd app
   7. npm install
   8. npm link @sslepian/webpack5-lib
   9. npm run dev
3. navigate to http://localhost:8081/

*** Additional details ***

Looking at lib/dist/index.js, we see the following line at the start:

var __webpack_require__ = {};

This overwrites the __webpack_require__ global that Webpack 4 expects, which leads to the error detailed above.

Setting minimzation in lib/webpack.config.js as follows will avoid this issue:

optimization: {
    minimize: true,
}

However, it's not actually necessary to minimize - simply renaming the __webpack_require__ var in lib/dist/index.js will likewise fix the issue, since it will no longer override the Webpack 4 global.

What is the expected behavior?

The app should load with no errors in the console and output "Webpack 4 App Loaded!" in the console.

Other relevant information:
webpack version: 5.88.2 for the lib, 4.47.0 for the app
Node.js version: 14
Operating System: macOS
Additional tools:

[DaveStein]

I wonder if this issue is part of a greater one. I am having a bunch of miscellaneous issues in a Webpack 4 host app, once I updated my package to Webpack 5. I had just posted https://stackoverflow.com/questions/77289969/why-does-webpack-5-build-fail-upstream-with-devtool-false on SO. Then I realized i was bumping into more issues, including like yours. I get Uncaught TypeError: __webpack_modules__[e] is not a function in my console at runtime, despite compilation finishing.

I had updated my code from using require to window.require and that solved__webpack_require__ issues for me in Webpack 4 land. But the runtime thing still persists. The optimization flag unfortunately didn't resolve my issues.

[webpack-bot]

This issue had no activity for at least three months.

It's subject to automatic issue closing if there is no activity in the next 15 days.

[alexander-akait]

bump

[vankop]

I guess we had a PR for this.. I will take a look