The requested module does not provide an export named 'default'

Question

I am having some problems with the React project that I am currently working on. I use Vite as my build tool and for the last 2 or 3 days I see that sometimes I receive this error: Uncaught SyntaxError: The requested module '/src/Components/App/HamburgerMenu.tsx?t=1683406454267' does not provide an export named 'default' .

All my .tsx files have an exported default variable, and it works for every file most of the time, but sometimes I get this error, seemingly random. I cannot find a reason why it may happen but it can happen at any time when I save something in a file, it does not happen every time, just sometimes and it seems that for no reason, then it solves by itself after I save a few more times and/or I reload the page.

Edit: I am doing the imports and exports like this:

import Component from '../../Component'

and exporting

export default function Component () {...
}

Benefactress

Please provide enough code so others can better understand or reproduce the problem. – Cell

Well every file has a constant arrow function that is exported as default at the bottom of the file, as it has happened to many files I do not think any code would help with anything as it does not regard anything inside the component itself. – Benefactress

I have the same issue - what did you do? – Rebuff

@Rebuff I still have the issue with Vite, although I have not worked on a project with Vite for the last 2 or 3 months so I am not sure at the moment, but last time I remember I still have it. I saw that there was a Issue opened on this on github's vite but I don't know what happened with it. – Benefactress

Answer 1

This was driving me nuts as well. The issue turned out to be the way in which you write the import statement:

import someFunction from '../../Component'

When written in this manner, without brackets, it causes the compiler to look for a default export. Whatever it finds as a default export will become someFunction.

This is not the same as:

import { someFunction } from '../../Component'

Which causes it to go look for a named export explicitly called someFunction.

So somewhere in your code, you are trying to use a default export (no brackets) and the source file does not have one defined as default.

Buffer

In my case the exports in question were the components of that file and I was exporting each component out of its file as the default export. – Benefactress

Answer 2

1.if the module has named exports, you can import them by name instead of using the default import. For example:

import { myFunction } from './myModule';

2.if you control the module causing the error, you can add a default export. For example:

// myModule.js

export const myFunction = () => { /* function code here */ };

export default myFunction;

This exports a named export myFunction as well as a default export myFunction, which can be imported using the import statement with a default import:

import myFunction from './myModule';

3.if you want to import all of the exports from a module, you can use a wildcard import. For example:

import * as myModule from './myModule';

Korean

The exports and imports are not the problem they work as expected. I just get this error sometimes for apparently no real reason, as I said if I am working on a file and I make changes (like updating some values in the jsx or anything else) at some point I might get this error . – Benefactress

Does your tsconfig.json have compilerOptions.allowSyntheticDefaultImports set to true? – Manor

@Manor Yes, it does have it. – Benefactress