Webpack "Buffer is not defined" / "process is not defined" - ProvidePlugin

By Kaveh Alemi·Latchkey

Webpack 5 no longer injects Node globals (Buffer, process, global) into the browser bundle. Code expecting them throws a ReferenceError at runtime. ProvidePlugin injects the global, paired with a browser polyfill for Buffer/process.

What this error means

The build succeeds but the app throws Uncaught ReferenceError: Buffer is not defined (or process/global) in the browser. A bundle-time smoke test or e2e check in CI surfaces it before deploy.

Uncaught ReferenceError: Buffer is not defined
    at Object.<anonymous> (vendor.js:24531)
# or
Uncaught ReferenceError: process is not defined

Common causes

Node global used without injection

A dependency references Buffer/process/global expecting Webpack 4's automatic injection. Webpack 5 does not provide these, so they are undefined at runtime.

Polyfill present but global not wired

Even with buffer/process installed, the global name is not bound unless ProvidePlugin maps it, so the bare reference still throws.

How to fix it

Inject the global with ProvidePlugin

Install the polyfill and map the global so Webpack provides it where referenced.

npm install -D buffer process
// webpack.config.js
const webpack = require('webpack')
plugins: [
  new webpack.ProvidePlugin({
    Buffer: ['buffer', 'Buffer'],
    process: 'process/browser',
  }),
],

Pair with resolve.fallback if needed

1. If the same module also imports buffer/process by name, add them to resolve.fallback.
2. Confirm the polyfill packages (buffer, process) are installed.
3. Verify in a browser/e2e check that the ReferenceError is gone.

How to prevent it

• Use ProvidePlugin to inject Node globals browser deps expect.
• Install the matching polyfills (buffer, process).
• Run a browser/e2e smoke test in CI to catch runtime ReferenceErrors.

Frequently asked questions

Related guides

References

• Node.js documentation
• npm CLI documentation
• GitHub Actions documentation