Module not found: Error: Can't resolve 'imports' when using @babel/polyfill or @babel/runtime

Question

Using @babel 7.0.0-beta.36 with Webpack. when I include either the polyfill or the runtime library, I run into a compilation error.

Please see attached here https://gist.github.com/pathsny/af270f61390380c8d948973ed9e09787 my .babelrc, package.json, package-lock.json, and webpack.config.js

In the above gist, either uncommenting the line with the async function inside the file "offending file" or uncommenting the entry @babel/polyfill in the webpack.config.js and then compiling the code results in the error

ERROR in ./node_modules/@babel/polyfill/node_modules/regenerator-runtime/runtime.js Module not found: Error: Can't resolve 'imports' in '/project_path/node_modules/@babel/polyfill/node_modules/regenerator-runtime' BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders. You need to specify 'imports-loader' instead of 'imports', see https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed webpack: Failed to compile.

I would appreciate any help figuring out what I'm missing here.

Answer 1

I think it is caused by

new webpack.ProvidePlugin({
      Promise: 'imports?this=>global!exports?global.Promise!es6-promise',
      fetch: 'imports?this=>global!exports?global.fetch!whatwg-fetch'
}),

in Webpack.config.js, this should be changed to

new webpack.ProvidePlugin({
          Promise: 'imports-loader?this=>global!exports-loader?global.Promise!es6-promise',
          fetch: 'imports-loader?this=>global!exports-loader?global.fetch!whatwg-fetch'
}),

As webpack doesn't auto add the loader postfix anymore