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

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

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.

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

Named export (no default):

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

Default export:

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

The export style determines which import syntax you must use.

Update your import statement to match the export type.

If the module uses named exports, use named import:

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

If the module uses default export, use default import:

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

You can also import both if the module has both:

import Button, { ButtonProps } from './components/Button';

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

Delete the cache directory:

rm -rf node_modules/.vite

Restart the Vite dev server:

npm run dev
# or
yarn dev

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

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:

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

Or configure Vite to handle CommonJS properly:

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

export default defineConfig({
  optimizeDeps: {
    include: ['problematic-commonjs-package']
  }
});

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

Without extension (may fail):

import MyComponent from './components/MyComponent';

With extension (more reliable):

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.