Module not found: Error: Can't resolve 'buffer' fix

One error that you might encounter when running a JavaScript application is:

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

This error usually occurs when you use Webpack as the build tool of your application.

This article will help you learn why this error occurs and how to fix it.

How this error happens

If you read the logs below the error, you’ll see these lines:

Module not found: Error: Can't resolve 'buffer' in '/r-app/node_modules/safe-buffer'

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.

As you can see, this error happens because there’s a change introduced in Webpack version 5.

Previously, Webpack included many core Node.js modules like buffer that can be used in your application.

But those modules are now removed in Webpack version 5. The solutions are also listed below the breaking change notification:

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "buffer": require.resolve("buffer/") }'
    - install 'buffer'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "buffer": false }

If you have dependencies that require buffer, then you need to install it to fix the error.

Using the "buffer": false configuration doesn’t fix the error if you have a module that needs it. Obviously, I know! 🤷🏻

How to fix this error

Since the buffer module is available from npm, you can easily install it to fix this error:

npm install buffer

Once the installation is finished, run your application again. You shouldn’t see the error this time.

Other similar errors

The removal of Node core modules in Webpack version 5 will cause many similar errors as the one you see above.

Here are some other errors that you might see:

Error: Can't resolve 'timers'
Error: Can't resolve 'path'
Error: Can't resolve 'stream'
Error: Can't resolve 'zlib'
Error: Can't resolve 'http'

Below the error logs, you should see the modules you need to install to resolve these modules.

You can install them using npm as follows:

# For timers:
npm install timers-browserify

# path:
npm install path-browserify

# stream:
npm install stream-browserify

# For zlib:
npm install browserify-zlib

# http:
npm install stream-http

But I don’t want to install these packages!

It seems annoying that you need to install modules that you don’t use directly in your application.

But until the people who maintain the packages you used in your application updated their packages to include the required modules, then the only solution is to install them yourself.

Otherwise, you can always opt to remove the packages causing this error, or downgrade to Webpack 4 :)

For example, the node-xml2js package has yet to fix this error at the time that this article is written.

You can remove that package from your application to resolve this error.

Downgrading to Webpack 4 will definitely fix this error, but it’s going to be complicated if you use development tools like Create React App.

Now that you know why the error occurs and several ways to fix it, I leave it up to you to decide the best way to proceed. Happy coding! 🙏