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

Imported module is stored in shadowed identifier with concatenated modules on #10308

Closed
joeywatts opened this issue Jan 29, 2020 · 2 comments · Fixed by #10312
Closed

Imported module is stored in shadowed identifier with concatenated modules on #10308

joeywatts opened this issue Jan 29, 2020 · 2 comments · Fixed by #10312

Comments

@joeywatts
Copy link

@joeywatts joeywatts commented Jan 29, 2020

Bug report

What is the current behavior?

I'm using webpack to bundle a web target that depends on material-ui. With the concatenateModules optimization setting on, it incorrectly chooses a shadowed identifier to store module imports.

In ButtonBase.js, there are two similar identifiers - _focusVisible and focusVisible:

  var _focusVisible = require("../utils/focusVisible");
  // ...
  var _React$useState = _react.default.useState(false),
      focusVisible = _React$useState[0],
      setFocusVisible = _React$useState[1];

  if (disabled && focusVisible) {
    setFocusVisible(false);
  }

  var _useIsFocusVisible = (0, _focusVisible.useIsFocusVisible)(),
      isFocusVisible = _useIsFocusVisible.isFocusVisible,
      onBlurVisible = _useIsFocusVisible.onBlurVisible,
      focusVisibleRef = _useIsFocusVisible.ref;

When this module is concatenated with the TouchRipple.js and Ripple.js modules which live in the same directory (turning minimize option off so we can analyze the output), I see this in the output:

// EXTERNAL MODULE: ./node_modules/@material-ui/core/esm/utils/focusVisible.js
var focusVisible = __webpack_require__(8310);
// ...
  var _React$useState = react_default().useState(false),
      focusVisible = _React$useState[0],
      setFocusVisible = _React$useState[1];

  if (disabled && focusVisible) {
    setFocusVisible(false);
  }

  var _useIsFocusVisible = (0,focusVisible/* useIsFocusVisible */.a)(),
      isFocusVisible = _useIsFocusVisible.isFocusVisible,
      onBlurVisible = _useIsFocusVisible.onBlurVisible,
      focusVisibleRef = _useIsFocusVisible.ref;

It's using focusVisible as the variable to store the module, but that identifier is shadowed in the place where the module is actually used.

When I disable module concatenation, it uses the _utils_focusVisible__WEBPACK_IMPORTED_MODULE_6__ identifier to store the module, so the conflict does not occur.

What is the expected behavior?

The identifier chosen for the ./node_modules/@material-ui/core/esm/utils/focusVisible.js external module should not be shadowed at the usage site (ie, the two focusVisible variables in the above example should be assigned unique names).

Other relevant information:
webpack version: webpack@5.0.0-beta.12
Node.js version: v12.14.1
Operating System: macOS 10.14.5
Additional tools: N/A

@joeywatts joeywatts changed the title Concatenated modules does not properly rename variables Imported module is stored in shadowed identifier with concatenated modules on Jan 29, 2020
sokra added a commit that referenced this issue Jan 29, 2020
@sokra sokra closed this in #10312 Jan 29, 2020
@sokra

This comment has been minimized.

Copy link
Member

@sokra sokra commented Jan 29, 2020

should be fixed in 5.0.0-beta.13

@joeywatts

This comment has been minimized.

Copy link
Author

@joeywatts joeywatts commented Jan 30, 2020

Thanks @sokra! That was fast!

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

Successfully merging a pull request may close this issue.

2 participants
You can’t perform that action at this time.