This bug can be very annoying when working with multiple nested components and changing them all at once because after that you have to go through each and make sure it renders properly by just hitting save multiple times.

Bug is still present on Vue 3.0.0-rc.5

This is quite weird as I've never ran into this and I can't reproduce it even using the exact dependencies in your repro (via npm ci) on macOS. This may be a Linux only problem?

For other people upvoting this issue - could you share your system environment?

System Info

• vite 1.0.0-rc.4
• vue 3.0.0-rc.5
• OS: Windows 10

Steps

1. npm init vite-app issue-test
2. cd issue-test
3. npm install
4. npm run dev
5. edit components/HelloWorld.vue, adding a line break after count: 0 and save
6. do step 5 multiple times

In my case, if it diden't happen, shut down terminal and run npm run dev again

Hi, same problem here with vite 1.0.0-rc.4 on Firefox 79.0 (64 bits) and Ubuntu 20.04.1 LTS.

System Info

• vite 1.0.0-rc.1
• vue 3.0.0-rc.1
• OS: Manjaro Linux Kernel 4.19.133-1

@yyx990803, I tried to make the issue more reproducible. I took to docker and tired out multiple versions of the node. After bug reproduced easily for me on any recent version, I tried paying attention to how I edit the file. Turned out, using Vim/Nano does not reproduce the bug: only using VSCode does, even without any extensions enabled.

Blaming VSCode is strange because it's just an editor, so I thought that it differs in working with files somehow. And so, I found a stable reproduction case (at least for me). It was added to the original repo as a .mjs script to be run with node after starting the server. What it does, is it adds and then removes a line break in a script section of the file without any delay. I think that those quick consecutive saves are what is causing the problem because as soon as I run the script, error immediately shows up in the browser console.

I don't know who should investigate the issue: it might be Vite's file watching bug, or it might be an undocumented behaviour of VSCode. If the issue is still not reproducible for you, please let me know, I'll try some over OS's and try to pinpoint the issue.

@yyx990803, I managed to reproduce the bug using the updated repo with the script on the latest macOS.

Same problem happened in vue@3.0.0-rc.1 & vite@3.0.0-rc.1 and windows7. I found if i restart the terminal the problem can be solved

The same problem happened
Is there any way to alleviate it
vite@1.0.0-rc.4
vue3.0@rc.5
OS: debian10

Could anyone leaving a comment with their environment also specify which editor they use? I still think the issue lies in a way some editors save their files and how the saving is tracked.

@icehaunter you're correct.

I can reproduce the issue on Ubuntu 20.04, vite@1.0.0-rc.4, vue@3.0.0-rc.9 with Visual Studio Code (tried both regular and Insiders version, installed through snap and apt), but it immediately goes away if I switch to any other editor (tried vim, nano, PyCharm and the default Text Editor that comes with Gnome).

it's work correct if editor changes file, but if editor replace file ( i'm using (Idea) upload on save ) it caches empty file

Quickaround fix is set timeout to reload function in serverPluginVue.js

  watcher.on('change', (file) => {
        setTimeout(()=>{
            if (file.endsWith('.vue')) {
                handleVueReload(file);
            }
        },100)

    });

Looks like @icehaunter is right.
I can reproduce the issue on Windows 10 vite@1.0.0-rc.4, Vue@3.0.0-rc.10 with VSC.
Goes away if I switch to Webstorm.

it's work correct if editor changes file, but if editor replace file ( i'm using (Idea) upload on save ) it caches empty file

Quickaround fix is set timeout to reload function in serverPluginVue.js

  watcher.on('change', (file) => {
        setTimeout(()=>{
            if (file.endsWith('.vue')) {
                handleVueReload(file);
            }
        },100)

    });

or even better to configure awaitWriteFinish to watcher options in [index.ts]

something like this

        awaitWriteFinish: {
            stabilityThreshold: 100,
            pollInterval: 10
        }

@Snowing First solution seems to solve the issue, thanks.

• I solved this issue editing my node_modules>vite>dist>node>server>serverPluginVue.js.
• Didn't tested editing the index.js.

You should send a PR.

Has other guys reslove it via #610 (comment) ?

The fix could broke when installing a package, just to point it out.
Any permanent fix intended by the dev team, @underfin?

Has other guys reslove it via #610 (comment) ?

I can confirm that resolves the issue. It was also happening to me while using vscode but after adding

awaitWriteFinish: {
  stabilityThreshold: 100,
  pollInterval: 10
}

to vite/dist/node/server/index.js the warning didn't show up again and my webapp worked fine (It's ok to guess this will be the only outcome of adding the option in vite/src/node/server/index.ts before building for npm, right?).

I tested with and without the fix alternatively during some periods of my work time, never saw the issue while using the awaitWriteFinish option as described by @Snowing.

Thanks a lot! Already having fun with vite

Thanks all guys great catch:)

Great, this could be the solution to some annoying test-suite timeouts i got in svite when writing files with node fs.

Did you test the settings with slow hardware (eg. old 5400rpm hdd under load)? The chosen values for awaitWriteFinish seem a bit low.
There are also some open issues about this setting on chokidar repo: https://github.com/paulmillr/chokidar/issues?q=is%3Aissue+is%3Aopen+awaitWriteFinish (not working on windows, symlink problem on linux).

Could it be possible to expose the watcher setup/config so users can optimize it for their platform/needs? (with sensible defaults ofc)

Could a release be made? This is a pretty important issue and really annoying. It also happens with WebStorm and I couldn't find any settings affecting how the IDE saves files to get around it.

This issue still persists for people trying out Vue 3 RC. Potential fix for this issue is also still open and yet to be merged - #841. Can this issue be reopened?

This issue still persists for people trying out Vue 3 RC. Potential fix for this issue is also still open and yet to be merged - #841. Can this issue be reopened?

I stand corrected. It seems the fix is merged here - #824.

Still, please reopen this issue till a release is made and confirmed that it fixes this issue.

Is there an ETA when this is going to be released? Currently the issue still exists with the latest released version.

@jhadenfeldt you might want to try the package
https://www.npmjs.com/package/@knightly/vite

The easiest temporary fix is to follow these instructions and use the latest vite master locally - it's just a local change that doesn't require any changes to the project you're working on.