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

The corresponding browser supported libraries for node core features

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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store