Skip to main content

How to Resolve the "Module not found: Can't resolve 'buffer'" Error in JavaScript

When working with a front-end JavaScript project using a modern bundler like Webpack 5+, you may encounter the build error Module not found: Error: Can't resolve 'buffer'. This error indicates that a library in your project is trying to use Node.js's native Buffer object, which is not available in the browser.

This happens because Webpack 5 and newer versions no longer automatically include "polyfills" for Node.js core modules. This guide will explain the two main solutions for this error: either providing a browser-compatible polyfill for Buffer or, in some cases, telling Webpack to ignore it.

The Core Problem: Buffer is a Node.js API​

The Buffer class in Node.js is a global type used for handling binary data. It is a fundamental part of the Node.js runtime, but it does not exist in web browsers. In the past, bundlers like Webpack would automatically include a browser-friendly version (a "polyfill") of Buffer whenever a library used it. This is no longer the case.

Now, if a third-party library contains a line like const buf = Buffer.from('hello');, Webpack will fail with an error because it doesn't know what Buffer is in a browser context.

Example of the error:

Module not found: Error: Can't resolve 'buffer' in ...

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

Unlike with modules like fs or path, Buffer is often a legitimate dependency for libraries that need to handle binary data (e.g., in cryptography or data streaming), so providing a polyfill is the more common solution.

Solution 1 (Most Common): Installing and Using the buffer Polyfill​

The solution is to manually install a browser-compatible Buffer polyfill and configure your bundler to use it.

For create-react-app (and similar tools)​

For projects based on Create React App (CRA) or similar toolchains, you often don't need to touch the Webpack config directly. You can install the polyfill and configure a global variable.

Solution:

  1. Install the buffer package. 
    npm install buffer
  2. Provide the polyfill globally. In your main entry point file (e.g., src/index.js), add the following line at the very top, before any other imports. 
    // src/index.js

    // Add this line at the top
    window.Buffer = window.Buffer || require('buffer').Buffer;

    import React from 'react';
    import ReactDOM from 'react-dom/client';
    import './index.css';
    import App from './App';

    // ... rest of the file

This makes a Buffer object available globally in the browser, which is what the dependent libraries are expecting.

For Custom Webpack Configurations​

If you have direct access to your webpack.config.js file, the cleaner solution is to configure Webpack to provide the polyfill automatically.

Solution:

  1. Install the buffer package.

    npm install buffer

  2. Configure Webpack. You need to tell Webpack to substitute the buffer module with the polyfill and also provide it as a global variable using the ProvidePlugin.

    // webpack.config.js
    const webpack = require('webpack');

    module.exports = {
      // ... other config
      resolve: {
        fallback: {
          "buffer": require.resolve("buffer/")
        }
      },
      plugins: [
        new webpack.ProvidePlugin({
          Buffer: ['buffer', 'Buffer'],
        }),
      ],
    };

Solution 2 (Less Common): Telling Webpack to Ignore the Module​

If you are certain that the code path requiring Buffer is never executed in your application, you can tell Webpack to substitute it with an empty module. This is less common for Buffer but is a valid approach.

Solution (webpack.config.js):

// webpack.config.js
module.exports = {
  // ... other config
  resolve: {
    fallback: {
      "buffer": false
    }
  }
};

A Special Case: Next.js​

In Next.js, the "Can't resolve 'buffer'" error is a signal that you are trying to use a component or library that depends on Buffer in a client-side context.

Solution: you can configure Next.js to provide the Buffer polyfill automatically by modifying your next.config.js.

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    config.resolve.fallback = {
      ...config.resolve.fallback,
      buffer: require.resolve('buffer/'),
    };
    
    // Also provide the Buffer global
    config.plugins.push(
      new (require('webpack').ProvidePlugin)({
        Buffer: ['buffer', 'Buffer'],
      })
    );

    return config;
  },
};

module.exports = nextConfig;

This correctly configures the buffer fallback and provides the global Buffer variable, solving the issue for both your code and third-party libraries.

Conclusion​

The Module not found: Can't resolve 'buffer' error is a direct result of Webpack 5+ no longer providing an automatic Buffer polyfill for the browser.

  • The most common and recommended solution is to install the buffer package and provide it as a polyfill. In create-react-app, this is best done by adding window.Buffer = require('buffer').Buffer; to your main entry file.
  • In a custom Webpack or Next.js config, you should configure both resolve.fallback and the ProvidePlugin to correctly polyfill the module and the global variable.

Table of Contents