Posted in Uncategorized

webpack v3 mangling exports name will break `Array.from` of core-js

   February 23, 2021  5 Comments on webpack v3 mangling exports name will break `Array.from` of core-js

Do you want to request a feature or report a bug?

Bug

What is the current behavior?

(I wanna cry: )The optimization of Scope Hoisting could break core-js Array.from.

After updated to webpack v3. My code will throw the error:

Uncaught TypeError: Cannot assign to read only property 'length' of function 'function from() { [native code] }'

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

The error due to wrong context:

  • webpack use __webpack_require__.n & __webpack_require__.d to mangle exports name;
  • Array.from transformed to __WEBPACK_IMPORTED_MODULE_4_babel_runtime_core_js_array_from___default.a;
  • While calling arrayfrom.a(arraylike), the context will be function getDefault;
  • es6.array.from.js#L15, C will be getDefault;
  • #L25 new C() will return function from(arrayLike /* , mapfn = undefined, thisArg = undefined */) {...};
  • createProperty will make the returned function property length read only;
  • finally when it call result.length = index, the error Uncaught TypeError will be threw.

What is the expected behavior?

image

Please mention other relevant information such as the browser version, Node.js version, webpack version and Operating System.

webpack v3

Author: Fantashit

5 thoughts on “webpack v3 mangling exports name will break `Array.from` of core-js”

  2. This ticket is about 3.0.0, no need to corroborate that you have this bug with the same version of webpack in the original issue.

  5. The problem is a size optimization that webpack does by default by not correctly setting the this when calling an import directly as a function.

    Enable strictThisContextOnImports to fix this, as mentioned in #5135 (comment). It will change your invocation from arrayfrom.a(arraylike) to __webpack__require__.i(arrayfrom.a)(arraylike), so that it will correctly have no context.

    babel does the same without using a helper function, though (the babel equivalent would be (0, arrayfrom.a)(arraylike)); maybe webpack could do that too.

Comments are closed.