Inconsistency with Webpack v4

So when using dynamic imports with Webpack v4, Webpack is now using a namespace object.

https://github.com/webpack/webpack/releases/tag/v4.0.0 https://medium.com/webpack/webpack-4-import-and-commonjs-d619d626b655

This matches what is done when you use ESM modules and you import Commonjs. You have to reference “default” now in Webpack v4 when attempting to reference module.exports. This is not the same as doing a deferred require on the server. My workaround has been to do something akin to this

const EXIFModule = await import(/* webpackChunkName: "exif-js" */ 'exif-js');
// Gets around dynamic import inconsistencies between browser and server
const EXIF = EXIFModule.default || EXIFModule;

Ideally, there would be some way to at least have a setting for this plugin to turn on namespace object dynamic imports.

[jljorgenson18]

Maybe I’m not being clear but I am not saying we need to drop everything and conform to Webpack v4 because there is no other use case. I am saying that Webpack is used much more than Rollup and Browserify (https://stateofjs.com/2017/build-tools/results) and that this is a legitimate issue. My suggestion would be to add a config option in babel for a slightly different require to handle both cases if you are using Webpack v4. Is there anything specific that I am saying that you think is false?

[jljorgenson18]

It is my understanding that the purpose of this plugin is to take Javascript code that uses a dynamic import and then have that code run with Node.js. The primary reason somebody would be using a dynamic import is for use with Webpack. Then, they may want to run that same Webpack code in a test or on a server with isomorphic Javascript which is where this plugin comes in to help. I’m not attempting to be argumentative, but this inconsistency is going to cause problems for people that are trying to reuse Webpack code in Node.