How to fix Cannot resolve module dependency in React

ReactINTERMEDIATEHIGH

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 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.

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

How to fix Cannot resolve module dependency in React

What this error means

Typical symptoms

Common causes

How to fix "Cannot resolve module dependency"

Advanced notes

Related errors

Official resources & further reading