How to fix The requested module does not provide an export named "default" in React

ReactBEGINNERMEDIUMUpdated Dec 11, 2025· 249 views

This error occurs in Vite when you try to import a module using default import syntax, but the module only exports named exports. The fix involves matching your import syntax to the actual export type.

Quick fix

Fixes The requested module does not provide an export named "default"

The requested module '/src/components/Button.tsx' does not provide an export named "default"
  1. Identify the problematic import statement
  2. Check the export type in the source file
  3. Match your import syntax to the export type
  4. Clear Vite cache and restart dev server
react — error
The requested module '/src/components/Button.tsx' does not provide an export named "default"
The requested module does not provide an export named "default"

What this error means

This error appears when there's a mismatch between how a module exports its values and how you're importing them in your Vite React project. Vite strictly enforces ES module standards, which distinguish between default exports (`export default`) and named exports (`export { name }`). When a module uses named exports but you try to import it as a default export (or vice versa), Vite's development server or build process will throw this error. This is more common in Vite than older bundlers because Vite leverages native ES modules during development and performs stricter module resolution. The error often surfaces after adding a new dependency, creating a new component file, or when Vite's hot module replacement (HMR) cache becomes inconsistent with your actual code.

Typical symptoms

  • Build or dev server crashes with "does not provide an export named 'default'" message
  • Error message specifies the exact module path that's causing the issue
  • Application worked before adding or modifying a specific import
  • Error appears after Vite HMR updates or server restart
  • TypeScript shows no errors but runtime fails

Common causes

  1. Importing a module with default import syntax when it only exports named exports
  2. Importing a module with named import syntax when it only has a default export
  3. Vite's dependency cache is stale or corrupted after changing exports
  4. CommonJS modules not being properly transformed by Vite
  5. File extension omitted causing Vite to resolve the wrong module format
  6. Mixing up component export styles after refactoring

How to fix "The requested module does not provide an export named "default""

1Identify the problematic import statement

Examine the error message to find which module is causing the issue. The error will show the exact file path:

bash
The requested module '/src/components/Button.tsx' does not provide an export named "default"

Navigate to the file where you're importing this module and check your import statement.

2Check the export type in the source file

Open the file being imported and verify how it exports its values.

Named export (no default):

typescript
// components/Button.tsx
export function Button() {
  return <button>Click me</button>;
}

Default export:

typescript
// components/Button.tsx
export default function Button() {
  return <button>Click me</button>;
}

The export style determines which import syntax you must use.

3Match your import syntax to the export type

Update your import statement to match the export type.

If the module uses named exports, use named import:

typescript
// ✅ Correct for named export
import { Button } from './components/Button';

If the module uses default export, use default import:

typescript
// ✅ Correct for default export
import Button from './components/Button';

You can also import both if the module has both:

typescript
import Button, { ButtonProps } from './components/Button';
4Clear Vite cache and restart dev server

If the import/export syntax is correct but the error persists, Vite's cache may be stale.

Delete the cache directory:

bash
rm -rf node_modules/.vite

Restart the Vite dev server:

bash
npm run dev
# or
yarn dev

This forces Vite to rebuild its dependency cache and can resolve HMR-related inconsistencies.

5Handle CommonJS dependencies

Some npm packages use CommonJS format, which can cause import issues in Vite. If you're importing from a third-party package:

For CommonJS modules, always use default import:

typescript
// ✅ Correct for CommonJS
import pkg from 'commonjs-package';
const { specificExport } = pkg;

Or configure Vite to handle CommonJS properly:

javascript
// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  optimizeDeps: {
    include: ['problematic-commonjs-package']
  }
});
6Add explicit file extensions if needed

Vite recommends explicit file extensions for non-JavaScript imports. If you're importing a Vue, Svelte, or other component type:

Without extension (may fail):

typescript
import MyComponent from './components/MyComponent';

With extension (more reliable):

typescript
import MyComponent from './components/MyComponent.vue';
// or
import MyComponent from './components/MyComponent.tsx';

Check your vite.config.js resolve.extensions configuration if automatic resolution is expected.

Advanced notes

Understanding ES Module Strictness:
Vite uses native ES modules in development, which means it enforces strict module semantics that older bundlers like Webpack might have been more lenient about. This is why code that worked in Create React App or Webpack projects might fail in Vite.

Barrel Exports and Re-exports:
If you're using barrel exports (index.js files that re-export multiple modules), ensure the re-export syntax matches the original export type:

typescript
// ✅ Re-exporting default as default
export { default as Button } from './Button';

// ✅ Re-exporting named as named
export { Button } from './Button';

// ❌ Mismatch - will cause errors
export { Button as default } from './Button'; // if Button is a named export

TypeScript Declaration Files:
Sometimes TypeScript's .d.ts files might declare exports differently than the actual JavaScript implementation. If you're using a library with type issues, check both the types and the actual runtime code.

Vite Plugin for CommonJS:
For projects heavily dependent on CommonJS libraries, consider using @originjs/vite-plugin-commonjs which provides better CommonJS interop, though native ES modules are preferred for better tree-shaking and performance.

Frequently asked questions

What does "The requested module does not provide an export named "default"" mean?
This error appears when there's a mismatch between how a module exports its values and how you're importing them in your Vite React project. Vite strictly enforces ES module standards, which distinguish between default exports (export default) and named exports (export { name }). When a module uses named exports but you try to import it as a default export (or vice versa), Vite's development server or build process will throw this error.
How do I fix "The requested module does not provide an export named "default""?
This error occurs in Vite when you try to import a module using default import syntax, but the module only exports named exports. The fix involves matching your import syntax to the actual export type.
What causes "The requested module does not provide an export named "default""?
Importing a module with default import syntax when it only exports named exports Importing a module with named import syntax when it only has a default export Vite's dependency cache is stale or corrupted after changing exports
Is the "The requested module does not provide an export named "default"" error serious?
It is a medium-severity error — more of a blocker than a risk. The steps above resolve it.

Official resources & further reading