Posted in Uncategorized

[webpack2] Tree shaking and “unused harmony default export”

   February 23, 2021  1 Comment on [webpack2] Tree shaking and “unused harmony default export”

I’m running webpack 2 beta 20 and for a development build, I can see a lot of unused harmony default export in my UI library (which is normal since I don’t use everything that is available in the library).

I checked the code and instead of exporting the class with the webpack require function, i see this, which seems ok.

/* unused harmony default export */ var _unused_webpack_default_export = ComponentA;

But when I build the app in a production environment, the component is still there, even if it has been marked as unused.

The component is imported and exported from another file before my app really uses it.

export { default as ComponentA } from './ComponentA';

and inside that file, it’s marked like this:

/* harmony import */ var __WEBPACK_IMPORTED_MODULE_19__ComponentA__ = __webpack_require__(622);
/* unused harmony reexport ComponentA */

I also checked the compiled code in production, and the code is there but as it’s mentioned with the unused reexport, nothing is exported… No t.default = ...

From what I see, it seems there’s an issue in the tree-shaking/code elimination. Can you confirm, or tell me what would be wrong in what I’m trying to do?

Author: Fantashit

1 thought on “[webpack2] Tree shaking and “unused harmony default export””

  1. @iamakulov thanks, enabling UglifyJS did NOT solve the problem, but it DID lead to a solution.

    Recall that the problem initially surfaced when IE 11 refused to run ES6 code, by failing to run the main.js script which contained ES6 code:

    /* unused harmony export */ 
let sum = (xs) =>

    Enabling UglifyJS resulted in Uglify also complaining about the ES6 code !!

    Fiddling with tsconfig.json did not help either.
    Awesome-typescript was correctly emitting ES5 code,
    but Webpack was adding unused code into the main.js as ES6 !!

    This seems to have been for lodash which was set as a provided resource in webpack.

    Adding babel-loader solved the problem, both for IE 11 and UglifyJS.

    So it seems like something this is happening:

    1. awesome-typescript is emitting es5 correctly.
    2. webpack’s tree shaking is adding unused JS as es6 (!!)
    3. Babel-loader is converting that unused JS to es5 correctly.
    4. UglifyJS is removing the unused JS correctly.

    This workflow works, but doubles the transpilation time, so I’m only using this workflow for build scripts.

    I’d suggest that emitting unused imports as es6 is a bug, not a feature.

    David

Comments are closed.