This error occurs when you try to import something from a module that doesn't export it. It's typically caused by mismatched import/export syntax, incorrect export names, or mixing default and named exports incorrectly.
This error indicates that your code is attempting to import a specific export from a module, but that export doesn't exist in the target file. This is one of the most common module errors in React applications and typically happens during the build process with webpack or other bundlers. The error message shows three key pieces of information: the export name you're trying to import (e.g., 'Component'), the name you're using locally (after 'as'), and the module path where the export was expected. Webpack and other bundlers perform static analysis of your imports and exports during build time, catching these mismatches before runtime. This error fundamentally stems from the JavaScript module system, where ES6 modules have specific export/import syntax that must match exactly. When you use named imports with curly braces, you must have corresponding named exports. When you use default imports without braces, the module must have a default export.
First, open the file you're importing from and check exactly what it exports. Look for export statements:
// Named exports (use curly braces when importing)
export const Component = () => { /* ... */ };
export function myFunction() { /* ... */ }
// Default export (import without curly braces)
export default Component;
// Mixed (both are valid in the same file)
export const helperFunction = () => { /* ... */ };
export default MainComponent;If the module uses export default, you cannot use named imports with curly braces for that export.
Update your import statement to match the export syntax exactly:
For default exports:
// Correct
import Component from './Component';
// Incorrect
import { Component } from './Component';For named exports:
// Correct
import { Component } from './components';
// Incorrect
import Component from './components';For mixed exports:
// Correct - import both default and named
import MainComponent, { helperFunction } from './Module';The key rule: curly braces = named export, no braces = default export.
JavaScript imports are case-sensitive. Verify that your import matches the export name exactly:
// Export (original)
export const MyComponent = () => { /* ... */ };
// Incorrect import (wrong case)
import { myComponent } from './MyComponent'; // ❌ Will fail
// Correct import
import { MyComponent } from './MyComponent'; // ✅ WorksAlso check for common typos in component names, especially after auto-complete suggestions.
If you're importing from a library that uses CommonJS (module.exports), you may need to adjust your import:
// CommonJS module (old style)
// module.exports = MyLibrary;
// Option 1: Default import (usually works)
import MyLibrary from 'my-library';
// Option 2: Import all and destructure (for named exports)
import * as MyLibrary from 'my-library';
const { specificFunction } = MyLibrary;
// Option 3: Use require (if your config allows)
const MyLibrary = require('my-library');For TypeScript projects, you may need to enable esModuleInterop in tsconfig.json:
{
"compilerOptions": {
"esModuleInterop": true,
"allowSyntheticDefaultImports": true
}
}If you're using an index.js file to re-export multiple modules (barrel pattern), ensure all exports are properly forwarded:
// components/index.js
// Incorrect - doesn't forward the export
import Button from './Button';
import Card from './Card';
// Correct - explicitly re-export
export { default as Button } from './Button';
export { default as Card } from './Card';
// Or for named exports
export { Button } from './Button';
export { Card } from './Card';
// Or export everything
export * from './Button';
export * from './Card';Then you can use:
import { Button, Card } from './components';Sometimes webpack or your bundler caches outdated module information:
# For Create React App
rm -rf node_modules/.cache
npm start
# For Next.js
rm -rf .next
npm run dev
# For Vite
rm -rf node_modules/.vite
npm run dev
# Nuclear option: reinstall dependencies
rm -rf node_modules package-lock.json
npm installAfter clearing the cache, the bundler will perform fresh static analysis of all imports.
Understanding Tree Shaking: Modern bundlers use static analysis to eliminate unused code (tree shaking). This process requires ES6 module syntax (import/export) rather than CommonJS (require/module.exports). If you mix these systems incorrectly, tree shaking fails and you may see "export not found" errors even when the export technically exists at runtime.
Webpack Module Federation: If you're using micro-frontends with Module Federation, this error can occur when remote modules have mismatched export configurations. Ensure your exposes configuration in webpack.config.js matches the actual exports in your federated modules.
TypeScript d.ts Files: Sometimes TypeScript type definitions (.d.ts files) don't match the actual JavaScript exports. This can happen with third-party libraries that have incorrect or outdated type definitions. You can verify by checking the actual .js file in node_modules, not just the .d.ts file. If they mismatch, consider installing updated @types packages or reporting the issue to the library maintainers.
Circular Dependencies: Webpack and other bundlers can struggle with circular imports, where Module A imports Module B, and Module B imports Module A. This can cause modules to be partially initialized, making exports unavailable. Use tools like madge or circular-dependency-plugin to detect and eliminate circular dependencies in your codebase.
Dynamic Imports: This error only applies to static imports at the top of files. Dynamic imports using import() have different error patterns since they resolve at runtime rather than build time. If you need conditional imports, consider using dynamic imports with proper error handling.
React Hook useCallback has a missing dependency: 'variable'. Either include it or remove the dependency array react-hooks/exhaustive-deps
React Hook useCallback has a missing dependency
Cannot use private fields in class components without TS support
Cannot use private fields in class components without TS support
Cannot destructure property 'xxx' of 'undefined'
Cannot destructure property of undefined when accessing props
useNavigate() may be used only in the context of a <Router> component.
useNavigate() may be used only in the context of a Router component
Cannot find module or its corresponding type declarations
How to fix "Cannot find module or type declarations" in Vite