Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
1j01 opened this issue Feb 20, 2023 · 4 comments · Fixed by #15608
Closed

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

1j01 opened this issue Feb 20, 2023 · 4 comments · Fixed by #15608

Comments

@1j01
Copy link

1j01 commented Feb 20, 2023

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

@1j01
Copy link
Author

1j01 commented Feb 20, 2023

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

@G-duck
Copy link

G-duck commented Mar 23, 2023

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

@1j01
Copy link
Author

1j01 commented Apr 1, 2023

@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
Copy link
Member

There is a fix #15608

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants