Skip to content

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

@1j01

Description

@1j01

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: webpack-cli@5.0.1

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions