How to fix export 'Component' (imported as 'Component') was not found in 'module' in React

ReactBEGINNERMEDIUMUpdated Dec 9, 2025· 148 views

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.

Quick fix

Fixes export 'Component' (imported as 'Component') was not found in 'module'

// 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;
  1. Verify the export syntax in the source module
  2. Match your import syntax to the export type
  3. Check for typos and case sensitivity
  4. Handle CommonJS modules correctly
react — error
// 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;
export 'Component' (imported as 'Component') was not found in 'module'

What this error means

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.

Typical symptoms

  • Build fails with webpack or other bundler compilation errors
  • Application won't start in development mode
  • Console shows 'export not found' or 'attempted import error' messages
  • Hot reload stops working after modifying imports
  • Tests fail with module resolution errors
  • TypeScript shows no errors but runtime build fails

Common causes

  1. Importing a named export when the module only has a default export
  2. Importing a default export when the module only has named exports
  3. Typo in the export or import name (case-sensitive mismatch)
  4. Outdated import statements after refactoring export syntax
  5. Mixing CommonJS (module.exports) with ES6 import syntax
  6. Circular dependencies causing incomplete module initialization
  7. Using barrel exports (index.js) that don't re-export all members
  8. Version mismatch between library and its type definitions

How to fix "export 'Component' (imported as 'Component') was not found in 'module'"

1Verify the export syntax in the source module

First, open the file you're importing from and check exactly what it exports. Look for export statements:

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

2Match your import syntax to the export type

Update your import statement to match the export syntax exactly:

For default exports:

javascript
// Correct
import Component from './Component';

// Incorrect
import { Component } from './Component';

For named exports:

javascript
// Correct
import { Component } from './components';

// Incorrect
import Component from './components';

For mixed exports:

javascript
// Correct - import both default and named
import MainComponent, { helperFunction } from './Module';

The key rule: curly braces = named export, no braces = default export.

3Check for typos and case sensitivity

JavaScript imports are case-sensitive. Verify that your import matches the export name exactly:

javascript
// Export (original)
export const MyComponent = () => { /* ... */ };

// Incorrect import (wrong case)
import { myComponent } from './MyComponent'; // ❌ Will fail

// Correct import
import { MyComponent } from './MyComponent'; // ✅ Works

Also check for common typos in component names, especially after auto-complete suggestions.

4Handle CommonJS modules correctly

If you're importing from a library that uses CommonJS (module.exports), you may need to adjust your import:

javascript
// 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:

json
{
  "compilerOptions": {
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true
  }
}
5Fix barrel export issues

If you're using an index.js file to re-export multiple modules (barrel pattern), ensure all exports are properly forwarded:

javascript
// 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:

javascript
import { Button, Card } from './components';
6Clear build cache and restart dev server

Sometimes webpack or your bundler caches outdated module information:

bash
# 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 install

After clearing the cache, the bundler will perform fresh static analysis of all imports.

Advanced notes

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.

Frequently asked questions

What does "export 'Component' (imported as 'Component') was not found in 'module'" mean?
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. , 'Component'), the name you're using locally (after 'as'), and the module path where the export was expected.
How do I fix "export 'Component' (imported as 'Component') was not found in 'module'"?
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.
What causes "export 'Component' (imported as 'Component') was not found in 'module'"?
Importing a named export when the module only has a default export Importing a default export when the module only has named exports Typo in the export or import name (case-sensitive mismatch)
Is the "export 'Component' (imported as 'Component') was not found in 'module'" error serious?
It is a medium-severity error — more of a blocker than a risk. The steps above resolve it.

Official resources & further reading