How to fix Cannot resolve module dependency in React

ReactINTERMEDIATEHIGHUpdated Dec 8, 2025· 175 views

This error occurs when webpack or Metro bundler cannot locate a module during the build process. Common causes include missing dependencies, incorrect import paths, or misconfigured module resolution settings.

Quick fix

Fixes Cannot resolve module dependency

npm install package-name
  1. Install missing third-party packages
  2. Verify and correct import paths for local files
  3. Clean reinstall dependencies
  4. Configure webpack resolve extensions
react — error
npm install package-name
Cannot resolve module dependency
shell
npm install package-name

What this error means

The "Cannot resolve module dependency" error indicates that your build tool (webpack, Metro, or another bundler) cannot find a module that your code is trying to import. This is a build-time error that prevents your application from compiling successfully. In React applications, module resolution follows a specific search algorithm that checks node_modules directories, configured paths, and file extensions. When the bundler cannot locate the requested module through any of these mechanisms, it throws this error. The error typically includes the module name that cannot be resolved and the file attempting to import it. This error can occur for both third-party packages (from npm) and local files in your project. The resolution strategy differs depending on whether you're importing an external dependency or a local module, and the specific bundler configuration in use.

Typical symptoms

  • Build process fails with "Module not found: Error: Cannot resolve module" message
  • Application won't compile or start in development mode
  • Error message includes the name of the missing module and the importing file path
  • Development server crashes immediately after starting
  • Production build fails during the bundling phase
  • Hot module replacement stops working after adding new imports
  • CI/CD pipeline fails at the build step with module resolution errors

Common causes

  1. Package not installed: The required npm package is missing from node_modules
  2. Incorrect import path: Typo in the file path, wrong casing, or incorrect relative path
  3. Missing file extension configuration: webpack resolve.extensions does not include the file type
  4. Corrupted node_modules: Dependencies are incomplete or damaged from interrupted installation
  5. Case sensitivity mismatch: Import statement casing doesn't match actual filename (Linux/Unix)
  6. Webpack 5 polyfill removal: Node.js core modules no longer included by default in webpack 5+
  7. Incorrect package-lock.json: Lock file doesn't match package.json dependencies
  8. Module alias misconfiguration: Path aliases in tsconfig.json or webpack not properly set up
  9. Peer dependency conflicts: Required peer dependencies not installed alongside the main package

How to fix "Cannot resolve module dependency"

1Install missing third-party packages

If the error references an npm package, install it first:

bash
npm install package-name

For example, if the error says "Cannot resolve module 'react-router-dom'", run:

bash
npm install react-router-dom

After installation, restart your development server.

2Verify and correct import paths for local files

Check your import statement for typos, incorrect casing, or wrong paths:

javascript
// ❌ Incorrect - wrong path
import MyComponent from './components/MyComponent';

// ✅ Correct - proper relative path
import MyComponent from '../components/MyComponent';

Ensure the file extension matches if not configured in webpack:

javascript
// Add explicit extension if needed
import MyComponent from './MyComponent.jsx';

On case-sensitive systems (Linux/Unix), match the exact filename casing:

javascript
// File is MyComponent.js, not mycomponent.js
import MyComponent from './MyComponent';
3Clean reinstall dependencies

Corrupted or incomplete node_modules can cause resolution failures. Perform a clean reinstall:

bash
rm -rf node_modules package-lock.json
npm install

For yarn users:

bash
rm -rf node_modules yarn.lock
yarn install

After reinstalling, restart your IDE and development server to ensure all processes use the fresh dependencies.

4Configure webpack resolve extensions

If using custom file extensions, add them to webpack configuration:

javascript
// webpack.config.js
module.exports = {
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx', '.json']
  }
};

For Create React App, this is already configured. For custom webpack setups, ensure all extensions you use are included.

If using TypeScript with path aliases, sync webpack config with tsconfig.json:

javascript
// webpack.config.js
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

module.exports = {
  resolve: {
    plugins: [new TsconfigPathsPlugin()]
  }
};
5Add webpack 5 fallbacks for Node.js modules

Webpack 5 removed automatic Node.js polyfills. If importing Node.js core modules in the browser, add fallbacks:

javascript
// webpack.config.js
module.exports = {
  resolve: {
    fallback: {
      "path": require.resolve("path-browserify"),
      "crypto": require.resolve("crypto-browserify"),
      "stream": require.resolve("stream-browserify"),
      "buffer": require.resolve("buffer/"),
      "util": require.resolve("util/")
    }
  }
};

Install the necessary polyfill packages:

bash
npm install path-browserify crypto-browserify stream-browserify buffer util

Alternatively, if you don't need the Node.js module in the browser, refactor your code to avoid the import.

6Verify module resolution paths

Check that webpack's module resolution is configured correctly:

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

module.exports = {
  resolve: {
    modules: [
      path.resolve(__dirname, 'src'),
      'node_modules'
    ]
  }
};

This allows absolute imports from your src directory:

javascript
// Instead of: import Component from '../../../components/Component';
import Component from 'components/Component';

For Create React App, use jsconfig.json or tsconfig.json:

json
{
  "compilerOptions": {
    "baseUrl": "src"
  }
}
7Check for peer dependency warnings

Some packages require peer dependencies to be manually installed. Check npm install output for warnings:

bash
npm install
# Look for: npm WARN package-name@version requires a peer of peer-package@version

Install any missing peer dependencies:

bash
npm install peer-package@version

For example, React Router may require specific React versions:

bash
npm install react@^18.0.0 react-dom@^18.0.0

Advanced notes

When working with monorepos or yarn workspaces, module resolution can be affected by hoisting behavior. Use nohoist configuration in package.json to prevent specific packages from being hoisted if they cause resolution issues.

For TypeScript projects, ensure your tsconfig.json "paths" configuration aligns with webpack's resolve.alias settings. Mismatches between TypeScript's compile-time resolution and webpack's runtime resolution can cause this error even when TypeScript compilation succeeds.

In server-side rendering (SSR) setups with Next.js or Gatsby, some modules may only be available in specific environments. Use dynamic imports or conditional requires to avoid importing browser-only or Node.js-only modules in the wrong context:

javascript
if (typeof window !== 'undefined') {
  const BrowserOnlyModule = require('./BrowserOnlyModule');
}

If using Metro bundler (React Native), module resolution follows different rules. Check metro.config.js for resolver configuration and ensure all custom resolvers properly handle your module structure.

Frequently asked questions

What does "Cannot resolve module dependency" mean?
The "Cannot resolve module dependency" error indicates that your build tool (webpack, Metro, or another bundler) cannot find a module that your code is trying to import. This is a build-time error that prevents your application from compiling successfully. In React applications, module resolution follows a specific search algorithm that checks node_modules directories, configured paths, and file extensions.
How do I fix "Cannot resolve module dependency"?
This error occurs when webpack or Metro bundler cannot locate a module during the build process. Common causes include missing dependencies, incorrect import paths, or misconfigured module resolution settings.
What causes "Cannot resolve module dependency"?
Package not installed: The required npm package is missing from node_modules Incorrect import path: Typo in the file path, wrong casing, or incorrect relative path Missing file extension configuration: webpack resolve.extensions does not include the file type
Is the "Cannot resolve module dependency" error serious?
Yes. This is a high-severity error that usually blocks work until it is fixed, but the steps above resolve it.

Official resources & further reading