Skip to main content

How to Resolve the "Module not found: Can't resolve 'path'" Error in javaScript

When working with modern JavaScript bundlers like Webpack 5+ in a project (such as Create React App), you may encounter the error Module not found: Error: Can't resolve 'path'. This error can also occur for other Node.js core modules like crypto, http, or stream.

The error occurs because Webpack 5 and newer versions no longer automatically include "polyfills" for native Node.js modules. A polyfill is a browser-compatible version of a native Node.js feature. This change was made to reduce unnecessary bundle sizes, as these modules are not meant to be run in a browser.

This guide will explain the two main solutions to this problem: either telling Webpack to ignore the path module or, in rare cases, providing a browser-compatible polyfill for it.

The Core Problem: Webpack 5+ No Longer Polyfills Node.js Modules​

The path module is a core part of Node.js, providing utilities for working with file and directory paths. It is designed for a server environment and has no direct equivalent in a web browser. In the past, bundlers would automatically include a "polyfill" for it, but this is no longer the case.

Now, if a third-party library you are using was written for Node.js and contains a line like const path = require('path');, Webpack will fail with an error because it cannot resolve path in a browser context.

Example of the error:

Module not found: Error: Can't resolve 'path' 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.

This message clearly explains the problem and suggests the two possible solutions.

Solution 1 (Most Common): Telling Webpack to Ignore the Module​

In almost all cases, you do not actually need the path module's functionality in your client-side code. It's usually included in a library for a server-side-only feature that isn't being used in the browser. The easiest and most common solution is to tell Webpack to substitute it with an empty module.

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

Build toolchains like Create React App often look for a browser field in your package.json file for browser-specific configurations.

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

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

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

Setting path to false tells the bundler to substitute it with an empty module. After making this change, you must restart your development server for it to take effect.

For Custom Webpack Configurations​

If you have direct access to your 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: {
      "path": false
    }
  }
};

Solution 2 (Advanced): Installing and Using a Polyfill​

In the rare circumstance that your application genuinely needs path-manipulation logic in the browser, you must provide a polyfill. The standard polyfill for the path module is path-browserify.

Solution:

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

Note for Create React App: To directly edit the Webpack config, you would need to eject your application. This is a one-way operation and is usually unnecessary. The package.json method is the intended solution for non-ejected apps.

A Special Case: Next.js​

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

  • If you need path's functionality: Ensure the code using it is only executed on the server.
  • If you do not need it: Configure Next.js to ignore it on the client side by modifying next.config.js.

Solution (next.config.js):

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

Conclusion​

The Module not found: Can't resolve 'path' error is a feature of modern bundlers, not a bug. It forces you to be explicit about how Node.js-specific modules are handled in a browser environment.

  • The most common and recommended solution is to tell your bundler to ignore path by setting a fallback to false, typically in your package.json or webpack.config.js.
  • If you truly need the module's functionality, you must install a browser-compatible polyfill like path-browserify and configure your Webpack resolve.fallback to use it.

Table of Contents