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.

[imsys]

if (typeof process !== 'undefined' && process?.env?.NODE_DEBUG) {

[salemkode]

Solve in !67

[ljharb]

This is a node module. It can be used with a node module bundler. A node module bundler provides node's globals wherever appropriate.

I suggest avoiding the use of a node module bundler that doesn't properly bundle node modules.

[imsys]

ChainSafe/web3.js has this module as a dependence and their readthedocs page does not inform about requiring a node polyfill, but it is mentioned in their github page..

Anyway, we have the docs for webpack, but for those using Vite, Rollup or SvelteKit check rollup-plugin-polyfill-node, a good info on the implementation can be found on this comment: blocknative/web3-onboard#762 (comment)

[ljharb]

All node modules may require node core module polyfills; it’s the job of a working node module bundler to handle that. Those that don’t, are broken.

[SVV-team]

For those who use Vite or Nuxt3

Error with process.env.NODE_DEBUG

solutions ==>

1. Install polyfill using npm or yarn

yarn add @esbuild-plugins/node-globals-polyfill

2. Add to your vite or nuxt config (NUXT example, vite similar)

import {NodeGlobalsPolyfillPlugin} from '@esbuild-plugins/node-globals-polyfill'

export default defineNuxtConfig({
vite: {
        optimizeDeps: {
            esbuildOptions: {
                define: {
                    global: 'globalThis'
                },
                plugins: [
                    NodeGlobalsPolyfillPlugin({
                        process: true,
                        buffer: true
                    }),
                ]
            }
        },
    }
})

With this config Web3 and other work perfect

[multiplehats]

import {NodeGlobalsPolyfillPlugin} from '@esbuild-plugins/node-globals-polyfill'

You're a lifesaver ❤️

[PikaJoyce]

Hi folks,

Are there any updates to this fix? We have several folks that may be hitting this issue on their applications so would love a more permanent fix. Our suggestion to temporarily fix this is found here for those on Angular.

Thanks!
Joyce

[davidfrgla]

For those who use Vite or Nuxt3

Error with process.env.NODE_DEBUG

solutions ==>

1. Install polyfill using npm or yarn

yarn add @esbuild-plugins/node-globals-polyfill

2. Add to your vite or nuxt config (NUXT example, vite similar)

import {NodeGlobalsPolyfillPlugin} from '@esbuild-plugins/node-globals-polyfill'

export default defineNuxtConfig({
vite: {
        optimizeDeps: {
            esbuildOptions: {
                define: {
                    global: 'globalThis'
                },
                plugins: [
                    NodeGlobalsPolyfillPlugin({
                        process: true,
                        buffer: true
                    }),
                ]
            }
        },
    }
})

With this config Web3 and other work perfect

I'm getting ReferenceError: Buffer is not defined when building app

[baixiaoyu2997]

for nuxt3 user, there is a solution
https://github.com/nuxt/framework/discussions/4393

[duartefdias]

I'm getting ReferenceError: Buffer is not defined when building app

I was also getting this error after building the app and the app wouldn't work, but not when running it locally.
I was able to fix it with this solution:

vitejs/vite#2785 (comment)

Simply adding globalThis.Buffer = Buffer to the start of node_modules/buffer/index.js
Definitely not the best solution but works for deploying a static version of the app for now.

[ljharb]

Glad to see so many helpful tips here.

#43 (comment) is the answer for this issue.