Vite: Single file component template is not updated after making any change inside the <template> </template> tags.

[alejandrolsca]

Describe the bug

Single file component template is not updated after making any change inside the tags.

Reproduction

Repository: https://github.com/grupografico/ggnext

Run with npm run dev. Open on Chrome and change anything inside the template tag in a Vue SFC. To see the updates I have to run npm run dev every time. Refreshing the page doesn't work.

If you need to login in Auth0 please use the following:

user: evanyou
pass: Evanyou123

Dependencies installed:

"dependencies": {
"@auth0/auth0-spa-js": "1.13.0",
"@tailwindcss/ui": "0.6.2",
"axios": "0.21.0",
"cors": "2.8.5",
"tailwindcss": "1.9.6",
"vue": "3.0.2",
"vue-router": "4.0.0-rc.1"
},
"devDependencies": {
"@vue/compiler-sfc": "3.0.2",
"connect-history-api-fallback": "1.6.0",
"dotenv": "8.2.0",
"express": "4.17.1",
"nodemon": "2.0.6",
"vite": "1.0.0-rc.6"
}

System Info

• required vite version: 1.0.0-rc.6
• required Operating System: macOS Catalina 10.15.7 (19H2)
• required Node version: 12.19.0
• Optional:
  
  
  
  • npm version: 6.14.8
  
  
  • Installed vue version (from yarn.lock or package-lock.json): 3.0.2
  
  
  • Installed @vue/compiler-sfc version: 3.0.2
  
  

Logs (Optional if provided reproduction)

1. Run vite or vite build with the --debug flag.
2. Provide the error log here.

after running npm run dev

macpro:ggnext Alejandro$ npm run dev

[email protected] dev /Users/Alejandro/Files/DevProjects/vue/ggnext
vite --debug & npm run server:dev

vite v1.0.0-rc.6
vite:config env mode: development +0ms
vite:config env: {} +2ms

[email protected] server:dev /Users/Alejandro/Files/DevProjects/vue/ggnext
NODE_ENV=development nodemon --watch server server/server.js

vite:resolve (node_module entry) @auth0/auth0-spa-js -> dist/auth0-spa-js.production.esm.js +0ms
vite:optimize skipping @auth0/auth0-spa-js (single esm file, doesn't need optimization) +0ms
vite:optimize skipping @tailwindcss/ui (internal excluded) +0ms
vite:resolve (node_module entry) axios -> index.js +6ms
vite:optimize optimizing axios (no exports, likely commonjs) +1ms
vite:resolve (node_module entry) cors -> ./lib/index.js +1ms
vite:optimize optimizing cors (no exports, likely commonjs) +2ms
vite:optimize skipping tailwindcss (internal excluded) +0ms
vite:resolve (node_module entry) vue -> dist/vue.runtime.esm-bundler.js +2ms
vite:optimize optimizing vue (imports sub dependencies) +1ms
vite:resolve (node_module entry) vue-router -> dist/vue-router.esm-bundler.js +1ms
vite:optimize skipping vue-router (single esm file, doesn't need optimization) +4ms
[vite] Optimizable dependencies detected:
axios, cors, vue
Pre-bundling them to speed up dev server page load...
(this will be run only when your dependencies have changed)
[nodemon] 2.0.6
[nodemon] to restart at any time, enter rs
[nodemon] watching path(s): server/*/
[nodemon] watching extensions: js,mjs,json
[nodemon] starting node server/server.js
API Server running at http://localhost:4000

Dev server running at:

Local: http://localhost:3000/
Network: http://192.168.1.4:3000/

vite:server server ready in 1938ms. +0ms
vite:hmr / imports /src/main.js +0ms
vite:rewrite (skipped) / +0ms
vite:rewrite /: serving from cache +0ms
vite:rewrite (skipped) / +12ms
vite:rewrite (skipped) /vite/client +20ms
vite:rewrite /src/main.js: rewriting +2ms
vite:rewrite "vue" --> "/@modules/vue.js" +1ms
vite:hmr /src/main.js imports /@modules/vue.js +35ms
vite:rewrite "./App.vue" --> "/src/App.vue" +1ms
vite:hmr /src/main.js imports /src/App.vue +1ms
vite:resolve (postfix) /Users/Alejandro/Files/DevProjects/vue/ggnext/src/router -> /Users/Alejandro/Files/DevProjects/vue/ggnext/src/router.js +3s
vite:rewrite "./router" --> "/src/router.js" +0ms
vite:hmr /src/main.js imports /src/router.js +0ms
vite:rewrite "./index.css" --> "/src/index.css?import" +0ms
vite:hmr /src/main.js imports /src/index.css +0ms
vite:resolve (postfix) /Users/Alejandro/Files/DevProjects/vue/ggnext/src/plugins/auth0Plugin -> /Users/Alejandro/Files/DevProjects/vue/ggnext/src/plugins/auth0Plugin.js +1ms
vite:rewrite "./plugins/auth0Plugin" --> "/src/plugins/auth0Plugin.js" +1ms
vite:hmr /src/main.js imports /src/plugins/auth0Plugin.js +1ms
vite:rewrite "../auth_config.json" --> "/auth_config.json?import" +0ms
vite:hmr /src/main.js imports /auth_config.json +0ms
vite:resolve (postfix) /Users/Alejandro/Files/DevProjects/vue/ggnext/src/plugins/i18nPlugin -> /Users/Alejandro/Files/DevProjects/vue/ggnext/src/plugins/i18nPlugin.js +0ms
vite:rewrite "./plugins/i18nPlugin" --> "/src/plugins/i18nPlugin.js" +0ms
vite:hmr /src/main.js imports /src/plugins/i18nPlugin.js +0ms
vite:rewrite "./plugins/i18nTranslations.json" --> "/src/plugins/i18nTranslations.json?import" +0ms
vite:hmr /src/main.js imports /src/plugins/i18nTranslations.json +1ms
vite:hmr ws client connected +8ms
vite:resolve (optimized) vue.js -> node_modules/.vite_opt_cache/vue.js +0ms
vite:rewrite /@modules/vue.js: no imports found. +23ms
vite:sfc /Users/Alejandro/Files/DevProjects/vue/ggnext/src/App.vue parsed in 8ms. +0ms
vite:rewrite /src/App.vue: rewriting +22ms
vite:rewrite "./AppLayout.vue" --> "/src/AppLayout.vue" +0ms
vite:hmr /src/App.vue imports /src/AppLayout.vue +36ms
vite:rewrite "./components/Nav.vue" --> "/src/components/Nav.vue" +0ms
vite:hmr /src/App.vue imports /src/components/Nav.vue +0ms
vite:rewrite "./components/Header.vue" --> "/src/components/Header.vue" +1ms
vite:hmr /src/App.vue imports /src/components/Header.vue +1ms
vite:rewrite /src/router.js: rewriting +4ms
vite:resolve (node_module entry) vue-router -> dist/vue-router.esm-bundler.js +51ms
vite:rewrite "vue-router" --> "/@modules/vue-router/dist/vue-router.esm-bundler.js" +2ms
vite:hmr /src/router.js imports /@modules/vue-router/dist/vue-router.esm-bundler.js +6ms
vite:resolve (postfix) /Users/Alejandro/Files/DevProjects/vue/ggnext/src/plugins/auth0Guard -> /Users/Alejandro/Files/DevProjects/vue/ggnext/src/plugins/auth0Guard.js +1ms
vite:rewrite "./plugins/auth0Guard" --> "/src/plugins/auth0Guard.js" +0ms
vite:hmr /src/router.js imports /src/plugins/auth0Guard.js +0ms
vite:rewrite "./views/Login.vue" --> "/src/views/Login.vue" +0ms
vite:hmr /src/router.js imports /src/views/Login.vue +0ms
vite:rewrite "./views/Home.vue" --> "/src/views/Home.vue" +0ms
vite:hmr /src/router.js imports /src/views/Home.vue +0ms
vite:rewrite "./views/Profile.vue" --> "/src/views/Profile.vue" +1ms
vite:hmr /src/router.js imports /src/views/Profile.vue +1ms
vite:rewrite /src/plugins/auth0Plugin.js: rewriting +3ms
vite:resolve (node_module entry) @auth0/auth0-spa-js -> dist/auth0-spa-js.production.esm.js +4ms
vite:rewrite "@auth0/auth0-spa-js" --> "/@modules/@auth0/auth0-spa-js/dist/auth0-spa-js.production.esm.js" +1ms
vite:hmr /src/plugins/auth0Plugin.js imports /@modules/@auth0/auth0-spa-js/dist/auth0-spa-js.production.esm.js +4ms
vite:rewrite "vue" --> "/@modules/vue.js" +0ms
vite:hmr /src/plugins/auth0Plugin.js imports /@modules/vue.js +0ms
vite:rewrite /src/plugins/i18nPlugin.js: rewriting +1ms
vite:rewrite "vue" --> "/@modules/vue.js" +0ms
vite:hmr /src/plugins/i18nPlugin.js imports /@modules/vue.js +1ms
vite:rewrite (skipped) /src/index.css?import +4s
vite:rewrite /auth_config.json: no imports found. +7ms
vite:sfc /Users/Alejandro/Files/DevProjects/vue/ggnext/src/AppLayout.vue parsed in 3ms. +4s
vite:rewrite /src/AppLayout.vue: rewriting +15ms
vite:rewrite nothing needs rewriting. +0ms
vite:sfc /Users/Alejandro/Files/DevProjects/vue/ggnext/src/App.vue parse cache hit +5ms
vite:sfc /src/App.vue template compiled in 13ms. +13ms
vite:rewrite /src/App.vue?type=template: rewriting +15ms
vite:rewrite "vue.js" --> "/@modules/vue.js" +0ms
vite:hmr /src/App.vue?type=template imports /@modules/vue.js +4s
vite:resolve (node_modules) vue-router/dist/vue-router.esm-bundler.js -> node_modules/vue-router/dist/vue-router.esm-bundler.js +4s
vite:sfc /Users/Alejandro/Files/DevProjects/vue/ggnext/src/components/Nav.vue parsed in 30ms. +34ms
vite:rewrite /src/components/Nav.vue: rewriting +37ms
vite:rewrite "vue" --> "/@modules/vue.js" +0ms
vite:hmr /src/components/Nav.vue imports /@modules/vue.js +37ms
vite:rewrite "./ProfileButton.vue" --> "/src/components/ProfileButton.vue" +0ms
vite:hmr /src/components/Nav.vue imports /src/components/ProfileButton.vue +0ms
vite:rewrite "./NotificationsButton.vue" --> "/src/components/NotificationsButton.vue" +0ms
vite:hmr /src/components/Nav.vue imports /src/components/NotificationsButton.vue +0ms
vite:rewrite /src/plugins/i18nTranslations.json: no imports found. +10ms
vite:sfc /Users/Alejandro/Files/DevProjects/vue/ggnext/src/components/Header.vue parsed in 5ms. +19ms
vite:rewrite /src/components/Header.vue: rewriting +8ms
vite:rewrite "vue" --> "/@modules/vue.js" +0ms
vite:hmr /src/components/Header.vue imports /@modules/vue.js +18ms
vite:resolve (node_modules) @auth0/auth0-spa-js/dist/auth0-spa-js.production.esm.js -> node_modules/@auth0/auth0-spa-js/dist/auth0-spa-js.production.esm.js +56ms
vite:rewrite /@modules/vue-router/dist/vue-router.esm-bundler.js: rewriting +6ms
vite:rewrite "vue" --> "/@modules/vue.js" +2ms
vite:hmr /@modules/vue-router/dist/vue-router.esm-bundler.js imports /@modules/vue.js +8ms
vite:sfc /Users/Alejandro/Files/DevProjects/vue/ggnext/src/views/Login.vue parsed in 0ms. +13ms
vite:rewrite /src/views/Login.vue: rewriting +5ms
vite:rewrite "../plugins/auth0Plugin" --> "/src/plugins/auth0Plugin.js" +1ms
vite:hmr /src/views/Login.vue imports /src/plugins/auth0Plugin.js +6ms
vite:sfc /Users/Alejandro/Files/DevProjects/vue/ggnext/src/views/Home.vue parsed in 1ms. +5ms
vite:rewrite /src/views/Home.vue: rewriting +3ms
vite:rewrite nothing needs rewriting. +0ms
vite:sfc /Users/Alejandro/Files/DevProjects/vue/ggnext/src/views/Profile.vue parsed in 15ms. +16ms
vite:rewrite /src/views/Profile.vue: rewriting +17ms
vite:rewrite "vue" --> "/@modules/vue.js" +0ms
vite:hmr /src/views/Profile.vue imports /@modules/vue.js +20ms
vite:rewrite "../components/Toggle.vue" --> "/src/components/Toggle.vue" +0ms
vite:hmr /src/views/Profile.vue imports /src/components/Toggle.vue +1ms
vite:sfc /Users/Alejandro/Files/DevProjects/vue/ggnext/src/AppLayout.vue parse cache hit +5ms
vite:sfc /src/AppLayout.vue style compiled in 221ms +221ms
vite:rewrite (skipped) /src/AppLayout.vue?type=style&index=0 +224ms
vite:rewrite /@modules/@auth0/auth0-spa-js/dist/auth0-spa-js.production.esm.js: no imports found. +2ms
vite:sfc /Users/Alejandro/Files/DevProjects/vue/ggnext/src/AppLayout.vue parse cache hit +4ms
vite:sfc /src/AppLayout.vue template compiled in 4ms. +4ms
vite:rewrite /src/AppLayout.vue?type=template: rewriting +6ms
vite:rewrite "vue.js" --> "/@modules/vue.js" +0ms
vite:hmr /src/AppLayout.vue?type=template imports /@modules/vue.js +231ms
vite:sfc /Users/Alejandro/Files/DevProjects/vue/ggnext/src/components/Nav.vue parse cache hit +2ms
vite:sfc /src/components/Nav.vue style compiled in 203ms +203ms
vite:rewrite (skipped) /src/components/Nav.vue?type=style&index=0 +205ms
vite:sfc /Users/Alejandro/Files/DevProjects/vue/ggnext/src/components/Nav.vue parse cache hit +1ms
vite:sfc /src/components/Nav.vue template compiled in 39ms. +39ms
vite:rewrite /src/components/Nav.vue?type=template: rewriting +40ms
vite:rewrite "vue.js" --> "/@modules/vue.js" +0ms
vite:hmr /src/components/Nav.vue?type=template imports /@modules/vue.js +246ms
vite:sfc /Users/Alejandro/Files/DevProjects/vue/ggnext/src/components/Header.vue parse cache hit +2ms
vite:sfc /src/components/Header.vue template compiled in 13ms. +14ms
vite:rewrite /src/components/Header.vue?type=template: rewriting +17ms
vite:rewrite "vue.js" --> "/@modules/vue.js" +0ms
vite:hmr /src/components/Header.vue?type=template imports /@modules/vue.js +16ms
vite:sfc /Users/Alejandro/Files/DevProjects/vue/ggnext/src/components/Header.vue parse cache hit +1ms
vite:sfc /src/components/Header.vue style compiled in 197ms +197ms
vite:rewrite (skipped) /src/components/Header.vue?type=style&index=0 +197ms
vite:rewrite /src/plugins/auth0Guard.js: rewriting +1ms
vite:rewrite "./auth0Plugin" --> "/src/plugins/auth0Plugin.js" +0ms
vite:hmr /src/plugins/auth0Guard.js imports /src/plugins/auth0Plugin.js +198ms
vite:rewrite "vue" --> "/@modules/vue.js" +0ms
vite:hmr /src/plugins/auth0Guard.js imports /@modules/vue.js +0ms
vite:sfc /Users/Alejandro/Files/DevProjects/vue/ggnext/src/views/Login.vue parse cache hit +1ms
vite:sfc /src/views/Login.vue template compiled in 1ms. +2ms
vite:rewrite /src/views/Login.vue?type=template: rewriting +2ms
vite:rewrite "vue.js" --> "/@modules/vue.js" +0ms
vite:hmr /src/views/Login.vue?type=template imports /@modules/vue.js +2ms
vite:sfc /Users/Alejandro/Files/DevProjects/vue/ggnext/src/views/Login.vue parse cache hit +1ms
vite:sfc /src/views/Login.vue style compiled in 192ms +192ms
vite:rewrite (skipped) /src/views/Login.vue?type=style&index=0 +193ms
vite:sfc /Users/Alejandro/Files/DevProjects/vue/ggnext/src/components/ProfileButton.vue parsed in 4ms. +5ms
vite:rewrite /src/components/ProfileButton.vue: rewriting +7ms
vite:rewrite "vue" --> "/@modules/vue.js" +0ms
vite:hmr /src/components/ProfileButton.vue imports /@modules/vue.js +200ms
vite:rewrite "../plugins/auth0Plugin" --> "/src/plugins/auth0Plugin.js" +0ms
vite:hmr /src/components/ProfileButton.vue imports /src/plugins/auth0Plugin.js +0ms
vite:sfc /Users/Alejandro/Files/DevProjects/vue/ggnext/src/components/NotificationsButton.vue parsed in 1ms. +4ms
vite:rewrite /src/components/NotificationsButton.vue: rewriting +2ms
vite:rewrite nothing needs rewriting. +1ms
vite:sfc /Users/Alejandro/Files/DevProjects/vue/ggnext/src/views/Profile.vue parse cache hit +1ms
vite:sfc /src/views/Profile.vue style compiled in 195ms +195ms
vite:rewrite (skipped) /src/views/Profile.vue?type=style&index=0 +195ms
vite:sfc /Users/Alejandro/Files/DevProjects/vue/ggnext/src/views/Home.vue parse cache hit +0ms
vite:sfc /src/views/Home.vue template compiled in 3ms. +3ms
vite:rewrite /src/views/Home.vue?type=template: rewriting +3ms
vite:rewrite "vue.js" --> "/@modules/vue.js" +0ms
vite:hmr /src/views/Home.vue?type=template imports /@modules/vue.js +201ms
vite:sfc /Users/Alejandro/Files/DevProjects/vue/ggnext/src/components/NotificationsButton.vue parse cache hit +1ms
vite:sfc /src/components/NotificationsButton.vue style compiled in 193ms +193ms
vite:rewrite (skipped) /src/components/NotificationsButton.vue?type=style&index=0 +194ms
vite:sfc /Users/Alejandro/Files/DevProjects/vue/ggnext/src/views/Profile.vue parse cache hit +1ms
vite:sfc /src/views/Profile.vue template compiled in 17ms. +17ms
vite:rewrite /src/views/Profile.vue?type=template: rewriting +19ms
vite:rewrite "vue.js" --> "/@modules/vue.js" +0ms
vite:hmr /src/views/Profile.vue?type=template imports /@modules/vue.js +213ms
vite:sfc /Users/Alejandro/Files/DevProjects/vue/ggnext/src/components/ProfileButton.vue parse cache hit +2ms
vite:sfc /src/components/ProfileButton.vue style compiled in 191ms +191ms
vite:rewrite (skipped) /src/components/ProfileButton.vue?type=style&index=0 +192ms
vite:sfc /Users/Alejandro/Files/DevProjects/vue/ggnext/src/components/ProfileButton.vue parse cache hit +1ms
vite:sfc /src/components/ProfileButton.vue template compiled in 8ms. +8ms
vite:rewrite /src/components/ProfileButton.vue?type=template: rewriting +10ms
vite:rewrite "vue.js" --> "/@modules/vue.js" +0ms
vite:hmr /src/components/ProfileButton.vue?type=template imports /@modules/vue.js +202ms
vite:sfc /Users/Alejandro/Files/DevProjects/vue/ggnext/src/components/NotificationsButton.vue parse cache hit +1ms
vite:sfc /src/components/NotificationsButton.vue template compiled in 2ms. +2ms
vite:rewrite /src/components/NotificationsButton.vue?type=template: rewriting +2ms
vite:rewrite "vue.js" --> "/@modules/vue.js" +0ms
vite:hmr /src/components/NotificationsButton.vue?type=template imports /@modules/vue.js +3ms
vite:sfc /Users/Alejandro/Files/DevProjects/vue/ggnext/src/components/Toggle.vue parsed in 1ms. +2ms
vite:rewrite /src/components/Toggle.vue: rewriting +3ms
vite:rewrite "vue" --> "/@modules/vue.js" +0ms
vite:hmr /src/components/Toggle.vue imports /@modules/vue.js +2ms
vite:sfc /Users/Alejandro/Files/DevProjects/vue/ggnext/src/components/Toggle.vue parse cache hit +5ms
vite:sfc /src/components/Toggle.vue style compiled in 194ms +194ms
vite:rewrite (skipped) /src/components/Toggle.vue?type=style&index=0 +198ms
vite:sfc /Users/Alejandro/Files/DevProjects/vue/ggnext/src/components/Toggle.vue parse cache hit +0ms
vite:sfc /src/components/Toggle.vue template compiled in 5ms. +6ms
vite:rewrite /src/components/Toggle.vue?type=template: rewriting +6ms
vite:rewrite "vue.js" --> "/@modules/vue.js" +1ms
vite:hmr /src/components/Toggle.vue?type=template imports /@modules/vue.js +205ms
vite:resolve (node_modules) @auth0/auth0-spa-js/dist/auth0-spa-js.production.esm.js.map -> node_modules/@auth0/auth0-spa-js/dist/auth0-spa-js.production.esm.js.map +2s
vite:rewrite (skipped) /@modules/@auth0/auth0-spa-js/dist/auth0-spa-js.production.esm.js.map +75ms
vite:rewrite (skipped) /src/assets/logo.png +186ms
vite:rewrite (skipped) /src/assets/avatar.jpg +0ms
vite:rewrite (skipped) /favicon.ico +526ms

After updating Profile.vue file:

vite:hmr busting Vue cache for /Users/Alejandro/Files/DevProjects/vue/ggnext/src/Views/Profile.vue +21s
vite:rewrite /src/Views/Profile.vue: cache busted +20s
vite:sfc /Users/Alejandro/Files/DevProjects/vue/ggnext/src/Views/Profile.vue parsed in 2ms. +21s
vite:hmr no existing descriptor found for /Users/Alejandro/Files/DevProjects/vue/ggnext/src/Views/Profile.vue +3ms

[underfin]

I notice you open new issues again, but we need a reporduction for this. Please read issue template before you open issues.

[yyx990803]

Screenshots are helpful but we can't do anything without actual code.

[alejandrolsca]

@yyx990803, @underfin i'll add the repository in the next couple of hours, maybe you can find whats happening. I appreciate your help

[alejandrolsca]

@yyx990803, @underfin repository added in the "Reproduction" section, thanks in advance.

[alejandrolsca]

@yyx990803 @underfin Believe me or not, the whole issue was because I had a folder in Pascal Case, "Views" instead of "views", the weird thing is that I didn't received any warning or error, what I realized is that using Vue CLI with ESLint, I received a compile error with that specific issue (relative modules were not found). Please see image below.

is there a way to get those compile/ESLint errors in vite?

I lose more than a day trying to figure it out the issue, shouldn't we receive some kind of warning/compile errors in this case? like with CLI projects

[sodatea]

By default, the filesystem used by macOS is case-insensitive though case-preserving. This may lead to problems. So Vue CLI has the case-sensitive-paths-webpack-plugin built-in to avoid such edge cases.
https://github.com/Urthen/case-sensitive-paths-webpack-plugin