vite: The requested module does not provide an export named

Describe the bug

Sometimes, after editing in my IDE and saving, the page reloads and I receive an error along those lines:

Uncaught SyntaxError: The requested module '/src/app/App.tsx?t=1674391177584' does not provide an export named 'default' (at main.tsx:4:8)

What comes after ‘named’ may be different. When this error appears, nothing renders on the screen. In the terminal no error appears.

To “fix” this, what I have to do is undo in my IDE, redo, and save again (basically change nothing), and then the error will go away. If instead of this I just try to refresh the page the error will still be there.

In addition, I see the following error at all times (on each reload), even when everything seems to work fine: Uncaught (in promise) TypeError: Cannot convert undefined or null to object

What I did notice is that the strange bug happens once I import from another lib in my app. Therefore I created a very simple reproduction repo, where in my App.tsx I import a React component from another lib and render it on the screen.

Reproduction

https://github.com/omerfaran/vite-test

Steps to reproduce

Please download the repo, run pnpm install, and then ‘nx serve main’.

Everything should work, but if you for example comment out <Testlib1 /> (which is an imported component), and then comment it in, or out again (it’s pretty random), you should get the unexpected error, and the page won’t render.

System Info

(I actually have Windwos 11 if it matters)


  System:
    OS: Windows 10 10.0.22000
    CPU: (24) x64 12th Gen Intel(R) Core(TM) i9-12900K
    Memory: 48.06 GB / 63.78 GB
  Binaries:
    Node: 16.17.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.15.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (108.0.1462.76)
    Internet Explorer: 11.0.22000.120
  npmPackages:
    @vitejs/plugin-react: ^3.0.0 => 3.0.1 
    vite: ^4.0.1 => 4.0.4

Used Package Manager

pnpm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it’s a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.