Skip to main content

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

When working with a front-end JavaScript project using a modern bundler like Webpack 5+ (common in frameworks like React), you may encounter the build error Module not found: Error: Can't resolve 'http'. This error can also appear for related modules like https.

This error occurs because a library in your project is trying to use the native Node.js http module, which is designed for server-side operations and 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 http module is a core part of Node.js, providing the functionality to create HTTP servers and make HTTP requests from a server. Web browsers have their own native APIs for making HTTP requests, such as fetch() and XMLHttpRequest, and do not have a http module.

When a front-end bundler like Webpack encounters an import or require('http') statement, it tries to find the http module to include in the final JavaScript bundle. Since it can't find a browser-compatible version, it throws the "Can't resolve 'http'" 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 { response } from 'express'; 
// A library like 'express' will internally require 'http', causing the error.

function App() {
  // ...
}

The Solution:

  • Search your front-end codebase for any imports from Node.js-specific packages (like express, axios used on the server, body-parser, 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 http is not needed in the browser. The safest and most common solution is to tell Webpack to substitute the http 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 http and https to false.

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

  // Add this section
  "browser": {
    "http": false,
    "https": 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: {
      "http": false,
      "https": false
    }
  }
};

Solution 2 (Advanced): Installing a Polyfill​

In the rare event that your application genuinely needs http functionality in the browser, you must provide a polyfill. The standard browser-compatible versions are stream-http and https-browserify.

Solution:

  1. Install the polyfill packages. 
    npm install stream-http https-browserify
  2. Configure Webpack to use them. In your webpack.config.js, update resolve.fallback to point to the polyfills. 
    // webpack.config.js
    module.exports = {
      // ... other config
      resolve: {
        fallback: {
          "http": require.resolve("stream-http"),
          "https": require.resolve("https-browserify")
        }
      }
    };
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.

A Special Case: Next.js​

In Next.js, this error is a signal that you are trying to use a server-side module in a client-side component. Node.js modules like http can only be used in server-side code (e.g., getServerSideProps or in API routes).

Solution: if you do not need the module in the browser, modify your next.config.js to exclude it from the client bundle.

// next.config.js
module.exports = {
  webpack: (config) => {
    config.resolve.fallback = {
      ...config.resolve.fallback,
      http: false,
      https: false,
    };
    return config;
  },
};

Conclusion​

The Module not found: Can't resolve 'http' error is a feature of modern bundlers designed to keep your front-end bundles clean of 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 http by adding "browser": { "http": false, "https": false } to your package.json and restarting your server.
  • Only install a polyfill like stream-http if you are certain your application requires its functionality in the browser.

Table of Contents