Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Uncaught ReferenceError: process is not defined, won't build in Webpack

See original GitHub issue

I tried building this in my project with latest webpack and got the following error:

Uncaught ReferenceError: process is not defined,

Seems like webpack is hitting a require('util/') and bundling Node.js’s implementation of util, which has Node.js only code, hence the error above.

I stripped it down to a simple test case.

webpack.config.js

const path = require('path');

module.exports = {
  mode : "development",
  entry : { main: "./entry.js" },
  output : {
    path : path.resolve(__dirname, "dist"),
    filename : "[name].js",
    library : "datadesk",
    libraryTarget : "umd"
  },
  resolve: {
    fallback: {
      assert: require.resolve("assert"),
    }
  },
  devtool: "source-map"
};

entry.js

const a = require('assert');

package.json

{
  "name": "testtt",
  "version": "1.0.0",
  "dependencies": {
    "assert": "^2.0.0",
    "webpack": "^5.65.0"
  },
  "devDependencies": {
    "webpack-cli": "^4.9.1"
  }
}

testtt.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="./dist/main.js"></script>
  </head>
  <body>
  </body>
</html>

Also here’s the built files. You can copy and run something like python -m http.server to open, or another small http file server.

testtt.zip

I think this can be worked around by also polyfilling util in the webpack config, but there is no util-browserify package that I’ve found yet on npm

Issue Analytics

State:
Created 2 years ago
Comments:5 (2 by maintainers)

Top GitHub Comments

9reactions

Cobertoscommented, Dec 17, 2021

I see.

A fix seems to be using ProvidePlugin to polyfill the global process again, as described in https://github.com/browserify/node-util/issues/57

Relevant snippet

// ...
plugins: [
    new webpack.ProvidePlugin({
      // Make a global `process` variable that points to the `process` package,
      // because the `util` package expects there to be a global variable named `process`.
           // Thanks to https://stackoverflow.com/a/65018686/14239942
      process: 'process/browser'
   })
  ],
// ...

1reaction

ljharbcommented, Jul 16, 2022

@lildeadprince it means that you shouldn’t are while using a working node module bundler, the definition of which requires the decade-long behavior of polyfilling node builtins and globals automatically.

In other words, you shouldnt have to care about it, but some bundlers have chosen to intentionally break themselves and force you to care about it. You can either fix those bundlers via config, use a non-broken bundler, or jump through innumerable hoops trying to work around the way the ecosystem has always worked.

This package is browser-ready. The problem is that your bundler isn’t.