Async import returning undefined default export

[milesj]

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

Bug.

What is the current behavior?

This is hard to explain, so I'll try my best. When using Webpack 3.5 + UglifyES + React Loadable, some of my default exports via import() are undefined and missing.

For example, here's the output of the import() result in the latest Webpack. Which in turn causes React to throw undefined rendering errors.

MESSAGING RENDER {__esModule: true, default: ƒ}
NOTIFICATIONS RENDER {__esModule: true}

And here's the output when I downgrade Webpack.

MESSAGING RENDER {__esModule: true, default: ƒ}
NOTIFICATIONS RENDER {__esModule: true, default: ƒ}

And here's my rudimentary debugging. The Messaging import works just fine, but the Notifications one does not. Both files being imported have a single default export with no named exports.

const Messaging = Loadable({
  loader: () => {
    console.log('MESSAGING LOADER');

    return import(/* webpackChunkName: "header-messaging" */ '../../../containers/Messaging');
  },
  loading: () => null,
  render(loaded, props) {
    const Component = loaded.default;
    const element = <Component {...props} />; // eslint-disable-line

    console.log('MESSAGING RENDER', loaded);

    return element;
  },
});

const Notifications = Loadable({
  loader: () => {
    console.log('NOTIFICATIONS LOADER');

    return import(/* webpackChunkName: "header-notifications" */ '../../../containers/Notifications');
  },
  loading: () => null,
  render(loaded, props) {
    const Component = loaded.default;
    const element = <Component {...props} />; // eslint-disable-line

    console.log('NOTIFICATIONS RENDER', loaded);

    return element;
  },
});

Things I've tried:

• It works 100% locally regardless of Webpack version, so the problem must be a combination of Webpack + Uglify.
• I've tried downgrading react-loadable while using the latest Webpack and the problem persists.
• If I disable Uglify while using the latest Webpack then the problem goes away.
• However, if I enable Uglify but downgrade Webpack then the problem goes away as well.

Currently testing against each Webpack version to see where the bug was introduced.

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

Here's my Webpack setup: https://gist.github.com/milesj/5c9179df651529335203bec6aee2d6fd

What is the expected behavior?

That import() doesn't lose my default export.

If this is a feature request, what is motivation or use case for changing the behavior?

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

Node v6.10.0
NPM v3.10.10
Webpack v3.*
webpack-parallel-uglify-plugin v1

[sgal]

@milesj Have you tried to use UglifyJs plugin from webpack-contrib with and without parallel flag?

[milesj]

@sgal I have not. Wasn't aware it was using ES now, will give that a try.

[sokra]

Currently testing against each Webpack version to see where the bug was introduced.

Any updates?

[milesj]

@sokra I tested a bit. If I remember correctly, 3.1 (current), 3.2, and 3.3 worked. 3.4 and 3.5 were problematic.

I'm going to try using the plugin mentioned above and upgrading again. I'll report back.

[sokra]

This is a super weird issue...

Are you familiar with git bisect?

[milesj]

Just tested with the beta uglify plugin and the issues seems to have gone away. Will monitor a bit more before closing this.

[milesj]

Issue has returned again using Webpack 3.5.5 and Uglify 1.0.0-beta.

[alexander-akait]

@milesj issue still exists with latest webpack@3 and uglify-webpack-plugin?

[milesj]

Can't say that it has. It magically has gone away. We're using webpack 3.8.1 and uglifyjs-webpack-plugin 1.0.1.

I'll close this issue for now.

[revathskumar]

I am facing this issue when I build with my prod config. In development it works fine.

<Route
            path="print"
            getComponent={(nextState, callback) => {
               import('./components/PrintTransaction/PrintTransaction')
                .then((module) => {
                  console.log("module :: ", module);
                  callback(null, module.default);
               });
            }}

but the log doesn't have default

This is getting generated in the transpiled code.

/* harmony default export */ __webpack_exports__["default"] = (Object(__WEBPACK_IMPORTED_MODULE_2_react_redux__["b" /* connect */])(mapStateToProps, mapDispatchToProps)(Object(__WEBPACK_IMPORTED_MODULE_3__WrapperComponent_WrapperComponent__["b" /* default */])(Object(__WEBPACK_IMPORTED_MODULE_4__withPrintUtils__["a" /* default */])(PrintTransaction))));

In chrome console, I am getting error #959 and In Firefox console I get #5429.

I tried to setup the a test repo for this, But there it is working fine.
Will update here is I find more details.

Webpack Version : 3.9.1
Node version : v8.0.0

[kgrz]

@revathskumar @milesj Just curious, are you both using CommonsChunkPlugin in the environment you were using when this happened?

[milesj]

@kgrz I was not.

[revathskumar]

@kgrz @milesj with the help @HarshwardhanSingh we figured it out as our issue is related to webpack-contrib/extract-text-webpack-plugin#456. When we remove the .scss import and move it to main chuck everything started working.