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.
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.
If the error references an npm package, install it first:
npm install package-nameFor example, if the error says "Cannot resolve module 'react-router-dom'", run:
npm install react-router-domAfter installation, restart your development server.
Check your import statement for typos, incorrect casing, or wrong paths:
// ❌ 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:
// Add explicit extension if needed
import MyComponent from './MyComponent.jsx';On case-sensitive systems (Linux/Unix), match the exact filename casing:
// File is MyComponent.js, not mycomponent.js
import MyComponent from './MyComponent';Corrupted or incomplete node_modules can cause resolution failures. Perform a clean reinstall:
rm -rf node_modules package-lock.json
npm installFor yarn users:
rm -rf node_modules yarn.lock
yarn installAfter reinstalling, restart your IDE and development server to ensure all processes use the fresh dependencies.
If using custom file extensions, add them to webpack configuration:
// 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:
// webpack.config.js
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
module.exports = {
resolve: {
plugins: [new TsconfigPathsPlugin()]
}
};Webpack 5 removed automatic Node.js polyfills. If importing Node.js core modules in the browser, add fallbacks:
// 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:
npm install path-browserify crypto-browserify stream-browserify buffer utilAlternatively, if you don't need the Node.js module in the browser, refactor your code to avoid the import.
Check that webpack's module resolution is configured correctly:
// 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:
// Instead of: import Component from '../../../components/Component';
import Component from 'components/Component';For Create React App, use jsconfig.json or tsconfig.json:
{
"compilerOptions": {
"baseUrl": "src"
}
}Some packages require peer dependencies to be manually installed. Check npm install output for warnings:
npm install
# Look for: npm WARN package-name@version requires a peer of peer-package@versionInstall any missing peer dependencies:
npm install peer-package@versionFor example, React Router may require specific React versions:
npm install react@^18.0.0 react-dom@^18.0.0When 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:
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.
Prop spreading could cause security issues
Prop spreading could cause security issues
Error: error:0308010C:digital envelope routines::unsupported
Error: error:0308010C:digital envelope routines::unsupported
React Hook "useEffect" is called conditionally. React Hooks must be called in the exact same order in every component render.
React Hook useEffect placed inside a condition
Hook can only be called inside the body of a function component
Hook can only be called inside the body of a function component
Rollup failed to resolve import during build
How to fix "Rollup failed to resolve import" in React