Skip to main content

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

When working with a front-end JavaScript framework like React or Angular, you may encounter the build error Module not found: Error: Can't resolve 'zlib'. This error can also appear for other Node.js core modules like http, stream, or crypto.

This error occurs because a library in your project is trying to use a native Node.js module (zlib) that does not exist in the browser. This is a direct result of Webpack 5 and newer versions no longer automatically "polyfilling" Node.js core modules.

This guide will explain the common causes of this error and provide a clear, step-by-step process to resolve it.

The Core Problem: Node.js Modules in a Browser Environment​

The zlib module is a core part of Node.js, providing compression and decompression functionality. It is designed to run on a server. Web browsers do not have a built-in zlib module.

When a front-end bundler like Webpack encounters an import or require('zlib') statement, it tries to find the zlib module to include in the final JavaScript bundle. Since it can't find a browser-compatible version, it throws the "Can't resolve 'zlib'" error.

Cause 1 (Most Common): An Accidental Server-Side Import​

The most frequent cause of this error is an accidental import of a Node.js-specific library (like express) into your front-end code. This often happens due to an incorrect auto-import from your code editor.

Example of error:

// In a React component (e.g., App.js)

// ⛔️ This is a common mistake from auto-import. `express` is a Node.js framework.
import { json } from 'express'; 
// A library like 'express' might internally require 'zlib', causing the error.

function App() {
  // ...
}

Solution:

  • Search your front-end codebase for any imports from Node.js-specific packages (like express, body-parser, fs, etc.) and remove them. This is often the only fix required.

Cause 2: A Third-Party Library is Using a Node.js Module​

Sometimes, a legitimate library you are using in your project has a dependency on a Node.js module. While the library may be designed to work in both Node.js and the browser, it might not be configured perfectly for modern bundlers.

In most cases, the functionality that requires zlib is not needed in the browser. The safest and most common solution is to tell Webpack to substitute the zlib module with an empty one.

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

Build tools like Create React App often use the browser field in package.json for browser-specific configurations.

The solution is to add a browser field to your package.json and set zlib to false.

// package.json
{
  "name": "my-app",
  "version": "1.0.0",
  "dependencies": { ... },

  // Add this section
  "browser": {
    "zlib": false
  }
}

After adding this, you must restart your development server for the change to take effect.

For Custom Webpack Configurations​

If you have a webpack.config.js file, you can achieve the same result using the resolve.fallback property.

Solution:

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

Solution 2 (Advanced): Installing a Polyfill​

In the rare event that your application genuinely needs zlib functionality in the browser, you must provide a polyfill. The standard browser-compatible version is browserify-zlib.

Solution:

  1. Install the polyfill package. 
    npm install browserify-zlib
  2. Configure Webpack to use it. In your webpack.config.js, update resolve.fallback to point zlib to the polyfill. 
    // webpack.config.js
    module.exports = {
      // ... other config
      resolve: {
        fallback: {
          "zlib": require.resolve("browserify-zlib")
        }
      }
    };
note

Note for Create React App: To directly edit the Webpack config, you would need to eject. This is a permanent action and is usually not necessary. The package.json method is the intended solution for non-ejected apps.

Conclusion​

The Module not found: Can't resolve 'zlib' error is a feature of modern bundlers, not a bug, designed to keep your front-end bundles small and free of unnecessary server-side code.

  • First, check your code for accidental imports from Node.js libraries like express and remove them.
  • If the error persists, the most common and recommended solution is to tell your bundler to ignore zlib by adding "browser": { "zlib": false } to your package.json and restarting your server.
  • Only install a polyfill like browserify-zlib if you are certain your application requires zlib's functionality in the browser.

Table of Contents