node-util

node-util copied to clipboard

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:

https://github.com/browserify/node-util/blob/6b828255a7f407efcd7e4d2c54ddb43256e491fb/util.js#L109

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')

(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?

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

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

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

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.

// 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.

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

Solve in !67

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.

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: https://github.com/blocknative/onboard/issues/762#issuecomment-997246672

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.

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

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

You're a lifesaver ❤️

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

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

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

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:

https://github.com/vitejs/vite/discussions/2785#discussioncomment-687395

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.

Glad to see so many helpful tips here.

https://github.com/browserify/node-util/issues/43#issuecomment-1001688960 is the answer for this issue.