How to Polyfill node core modules in webpack 5.
Unnecessary storytelling (skip this)
Webpack 5 is in beta and my company decided to switch to it. So I went head-on with the task at hand. Following the migration guide updating dependencies, plugins. Then it was the testing time. Built the project and did some auditing. Bundle size seemed to improve because of all the updates like better tree shaking and all. Build time was reduced and life was going happy.
But then I stumbled upon an issue where one of our libraries had node process module as a dependency and it errored that process is not available.
Did some googling…found out webpack 5 no longer do auto-polyfilling for node core modules.
At this time there were not many resources on webpack 5. And I was not getting any errors at build time that I could follow.
Ditch all the rubbish above…The solution is below:
Little more digging I got this PR that removed auto-polyfilling from webpack.
https://github.com/webpack/webpack/pull/8460/commits/a68426e9255edcce7822480b78416837617ab065
From here it's plain and simple
Just add the corresponding library in your package.json and in webpack config add an alias for the core module
resolve: {
alias: {process: “process/browser”
}}
more info here: https://webpack.js.org/configuration/resolve/#resolvealias
And voila u can use node process now in the browser.
Sweet and simple.
Comment if u face any issues with this or any information is wrong. More than happy to help
Find me here: https://sanchitbansal.com/