Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Vite 3] HMR doesn't work on first dev

See original GitHub issue

Describe the bug

HMR doesn’t work the first time the dev server is started.

Reproduction

https://github.com/brillout/vite-3-bug_hmr-first-dev

System Info

System:
    OS: Linux 5.10 Debian GNU/Linux 10 (buster) 10 (buster)
    CPU: (2) x64 Intel(R) Celeron(R) N4020 CPU @ 1.10GHz
    Memory: 2.71 GB / 2.71 GB
    Container: Yes
    Shell: 5.0.3 - /bin/bash
  Binaries:
    Node: 18.0.0 - ~/.config/nvm/versions/node/v18.0.0/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 8.6.0 - ~/.config/nvm/versions/node/v18.0.0/bin/npm
  npmPackages:
    @vitejs/plugin-react: 2.0.0-beta.0 => 2.0.0-beta.0 
    vite: 3.0.0-beta.0 => 3.0.0-beta.0

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.

Issue Analytics

State:
Created a year ago
Comments:9 (9 by maintainers)

Top GitHub Comments

1reaction

patak-devcommented, Jun 22, 2022

@brillout people switch to vite@3.0.0-beta.1, the client error you show here looks resolved there.

The HMR issue still persists though. Trying to understand what is going on

0reactions

brilloutcommented, Jun 23, 2022

Or maybe it makes your tests more difficult as you need to wait for a potential reload when you navigate?

This.

It’s one reason I’ve opened https://github.com/vitejs/vite/discussions/8721 (but feel free to ignore it 😃). But the primary motivation is the subpar end-user DX: the user is wondering why the browser reloads and may think “something’s wrong with my app, why is my app reloading at the beginning?”.

Top Results From Across the Web

HMR API - Vite

This simplified HMR implementation is sufficient for most dev use cases, while allowing us to skip the expensive work of generating proxy modules....

Troubleshooting - Vite

If HMR is not handled by Vite or a plugin, a full reload will happen. Also if there is a dependency loop, a...

Getting Started - Vite

Running vite starts the dev server using the current working directory as root. You can specify an alternative root with vite serve some/sub/dir...

Vite 3.0 is out!

There is also a new main.vitejs.dev subdomain, where each commit to Vite's ... Vite 3 changes the default connection scheme so it works...

Server Options - Vite

Automatically open the app in the browser on server start. ... Check out https://vitejs.dev/config/server-options.html#server-hmr to remove the previous ...