Undeclared use of node's `process` causes exception in browser

[rvolgers]

Webpack 5 no longer ships polyfills for nodejs builtin modules, and recommends using this module if a module need util, and the module README does say it should work in a browser. However, the module causes a exception when importing the resulting bundle in the browser:

vendor.2cdb7b12f7e46077b4bd.js:92301 Uncaught ReferenceError: process is not defined

This is causes by this code, which expects to be able to use the nodejs process module without importing it:

node-util/util.js

Line 109 in 6b82825

if (process.env.NODE_DEBUG) {

[goto-bus-stop]

right, we assume the bundler makes the node.js globals available. This may also happen for the Buffer global (don't recall if we use it). the solution would be to explicitly do require('process')

[rvolgers]

(Sorry for the noise, mistook the "Close and comment" button for a cancel button.)

Usually importing process would be the correct thing, but is there any downside to just doing a typeof(process) !== 'undefined' check in this case?

[goto-bus-stop]

For the env check, that would be enough, but we also use process.nextTick in the callbackify implementation

[Fauxil-Fox]

Can we get a fix on this soon? Webpack v5 is now the main version.

[ljharb]

The best fix, unfortunately, is to use ProvidePlugin in your config to replicate the functionality webpack 5 removed.

[brenc]

I hit this one today as well. Like @ljharb said, looks like you can use ProvidePlugin like this:

// webpack needs to be explicitly required
const webpack = require('webpack')

module.exports = {

/* ... rest of the config here ... */

  plugins: [
    // fix "process is not defined" error:
    // (do "npm install process" before running the build)
    new webpack.ProvidePlugin({
      process: 'process/browser',
    }),
  ]
}

More here.

I wasn't 100% in love with using the process package for this project so I ended up using DefinePlugin instead:

plugins: [  
  new webpack.DefinePlugin({
    'process.env.NODE_DEBUG': JSON.stringify(process.env.NODE_DEBUG)
  })
]

Both solutions seem to work.

[rufatZZ]

// webpack needs to be explicitly required
const webpack = require('webpack')

module.exports = {

/* ... rest of the config here ... */

  plugins: [
    // fix "process is not defined" error:
    // (do "npm install process" before running the build)
    new webpack.ProvidePlugin({
      process: 'process/browser',
    }),
  ]
}

@brenc Thanks you man soooo much for clear, referenced reply. This saved me so much time. after 5 days of stress. This worked for me. 2nd one magically didn't work. Because of other packages.