Importing webpack-bundled ESM into a webpack app gets error due to shadowed variable

[1j01]

trafficstars

Bug report

What is the current behavior?

• Bundling a library into an ES Module with webpack outputs var __webpack_exports__ = {}; at the top level.
• Trying to include this ES Module in an app also built with webpack, using the eval devtool (as is default with webpack-dev-server), it outputs __webpack_require__.r(__webpack_exports__); at the very start of the eval'd code. This code seems to be expecting to reference a variable from outside the eval, but instead __webpack_exports__ is shadowed.
• At runtime, it gets an error due to __webpack_exports__ being undefined:

  Uncaught TypeError: Object.defineProperty called on non-object
      at Function.defineProperty (<anonymous>)
      at __webpack_require__.r (app-bundle.js:82:21)
      at eval (library-bundle.esm.js:1:21)
      at ../library/dist/library-bundle.esm.js (app-bundle.js:29:1)
      at __webpack_require__ (app-bundle.js:53:41)
      at eval (app-source.js:2:93)
      at ./app-source.js (app-bundle.js:19:1)
      at __webpack_require__ (app-bundle.js:53:41)
      at app-bundle.js:93:37
      at app-bundle.js:95:12
  

If the current behavior is a bug, please provide the steps to reproduce.

Here is a minimal reproduction, with instructions in the README.

What is the expected behavior?

I don't know whether the library or app bundle output should change, or both, but the app should be able to import or require the library without error.

Other relevant information: webpack version: 5.75.0
Node.js version: v19.0.0
Operating System: Ubuntu
Additional tools: [email protected]

[1j01]

It changes __webpack_require__ to __nested_webpack_require_43__; should it perhaps similarly rename __webpack_exports__ to avoid the conflict?

[G-duck]

Encountered the same problem, have you solved it? @1j01

[1j01]

@G-duck This is how I'm working around it: in my webpack config for my app:

  resolve: {
    // Temporary workaround for https://github.com/webpack/webpack/issues/16744
    // a webpack bug where importing a library built with webpack as ESM fails.
    // I provide both "module" and "main" fields in package.json in skele2d now;
    // webpack prefers "module", which broke the build.
    mainFields: ['main', 'module'],
    // This example doesn't import any other packages, but if you do, you may
    // need to use a "fallback" field to tell webpack to use the CommonJS
    // specifically for skele2d.
  },

(skele2d is the library)

[alexander-akait]

There is a fix https://github.com/webpack/webpack/pull/15608/