Webpack 5 resolve.alias and webpack.ProvidePlugin

[sadeghbarati]

@sokra
@alexander-akait

ProvidePlugin seem not working in webpack 5

here the error

node_modules\webpack\lib\Dependency.js:311
 throw new Error(
                ^

Error: module property was removed from Dependency (use compilation.moduleGraph.updateModule(dependency, module) instead)

https://webpack.js.org/blog/2020-10-10-webpack-5-release/#changes-to-the-structure

MIGRATION: resolve.alias and ProvidePlugin. Errors will give hints. (Refer to node-libs-browser for polyfills & mocks used in v4)

the blog link explains the migration but it confusing for normal developers what should I have to do?

after search, I found this medium link but still no result

https://sanchit3b.medium.com/how-to-polyfill-node-core-modules-in-webpack-5-905c1f5504a0

resolve: {
   //extensions: ['.js'],
    alias: {
        process: "process/browser",
        jquery: path.resolve('node_modules', 'jquery/dist/jquery.js'),
    }
},
new webpack.ProvidePlugin({
      process: 'process/browser',
      '$': 'jquery',
      'jQuery': 'jquery',
      'window.jQuery': 'jquery',
}),

how to handle babel polyfills in Webpack or how to do it actually 🤕

these codes not helping to register jquery globally

import $ from 'jquery';

window.$ = window.jQuery = $;

https://twitter.com/jaredpalmer/status/1368358842451496965

[alexander-akait]

Error: module property was removed from Dependency

hm, maybe this error from custom plugin without configuration hard to say there is a problem

[alexander-akait]

Also please use resolve.fallback: { process: require.resolve('process/browser') } to polyfill process in a browser

[sadeghbarati]

sry it's was problem with webpack-stream must pass webpack as seconde parameter in webpack-stream

but what is best babel config for webpack 5

[alexander-akait]

Any, just do not forget to set true this https://babeljs.io/docs/en/babel-preset-env#targetsesmodules

[sadeghbarati]

use @babel/plugin-transform-runtime with core-js

or other ways like other polyfills instead of babel polyfills
but how to handle this section without @babel/plugin-transform-runtime ?

Babel is injecting helpers into each file and bloating my code!
https://webpack.js.org/loaders/babel-loader/#babel-is-injecting-helpers-into-each-file-and-bloating-my-code