vite
vite copied to clipboard
vitejs
Vite HMR not working . Changing code does not reflect on page until restart vite server
Describe the bug
I setup a basic react+ts template and expect HMR to work. But It does not. When I change some values inside App.tsx / main.tsx or any components, it does not updates in browser. I'm on macOS m1 using vite 5.2.6 and node 18.
I did setup chokidar simple test to check if events get trigged. It works!
Reproduction
pnpm list
Legend: production dependency, optional only, dev only
dependencies:
@reduxjs/toolkit 2.2.2 globals 14.0.0 react-redux 9.1.0
antd 5.15.4 lodash 4.17.21 styled-components 6.1.8
chokidar 3.6.0 react 18.2.0 twin.macro 3.4.1
flexlayout-react 0.7.15 react-dom 18.2.0 vite 5.2.6
fsevents 2.3.3 react-icons 5.0.1 vite-tsconfig-paths 4.3.2
devDependencies:
@openapitools/openapi-generator-cli 2.13.1 eslint 8.57.0
@types/node 20.11.30 eslint-plugin-react-hooks 4.6.0
@types/react 18.2.72 eslint-plugin-react-refresh 0.4.6
@types/react-dom 18.2.22 openapi-typescript-codegen 0.25.0
@typescript-eslint/eslint-plugin 7.4.0 sass 1.72.0
@typescript-eslint/parser 7.4.0 tailwindcss 3.4.1
@vitejs/plugin-react 4.2.1 typescript 5.4.3
cat index.cjs
const chokidar = require('chokidar');
// One-liner for current directory
chokidar.watch('**/*.tsx').on('all', (event, path) => {
console.log(event, path);
});
-------
----
--
add node_modules/.pnpm/@[email protected]/node_modules/@jridgewell/trace-mapping/dist/types/trace-mapping.d.ts
add node_modules/.pnpm/@[email protected]/node_modules/@jridgewell/trace-mapping/dist/types/types.d.ts
**change src/components/News/index.tsx**
http://google.com
Steps to reproduce
npm create vite@latest
✔ Project name: … test-vite
✔ Select a framework: › React
✔ Select a variant: › TypeScript
Scaffolding project in
Done. Now run:
cd test-vite
npm install
npm run dev
npm install
added 218 packages, and audited 219 packages in 7s
41 packages are looking for funding
run `npm fund` for details
System Info
npx envinfo --system --npmPackages '{vite,@vitejs/*,rollup}' --binaries --browsers
Need to install the following packages:
[email protected]
Ok to proceed? (y) y
System:
OS: macOS 13.6.5
CPU: (10) arm64 Apple M1 Pro
Memory: 169.16 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 18.19.1 - ~/Library/Caches/fnm_multishells/80450_1711424646646/bin/node
Yarn: 1.22.18 - /usr/local/bin/yarn
npm: 10.2.4 - ~/Library/Caches/fnm_multishells/80450_1711424646646/bin/npm
pnpm: 8.15.5 - ~/Library/pnpm/pnpm
Browsers:
Chrome: 123.0.6312.59
Safari: 17.4
npmPackages:
@vitejs/plugin-react: ^4.2.1 => 4.2.1
vite: ^5.2.0 => 5.2.6
Used Package Manager
npm
Logs
No response
Validations
- [X] Follow our Code of Conduct
- [X] Read the Contributing Guidelines.
- [X] Read the docs.
- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- [X] 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.
- [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
- [X] The provided reproduction is a minimal reproducible example of the bug.
Seems like not all HMR affected. In our case - changes to the class/styles are not picked up
@swennemans I had this issue in Brave and it does work in Firefox.
Firefox:
In Brave, I don't get any errors and don't get the [vite] connected. string.
Update: I've restarted the browser for a different reason and now this went away and I can see the refreshed page with no issues.
Same problem, when i change .ts, it dosn't update in browser. I'm on macOS i7 using vite 5.2.0 and node 18. and After i change vite version to 4.3.1, hmr work.
from: node 20-21 - windows [email protected] => hmr working. until 5.2 => broken.
Exactly the doc's setup: https://vitejs.dev/guide/backend-integration.html
<script type="module">
import RefreshRuntime from "http://localhost:5173/@react-refresh"
RefreshRuntime.injectIntoGlobalHook(window)
window.$RefreshReg$ = () => {}
window.$RefreshSig$ = () => (type) => type
window.__vite_plugin_react_preamble_installed__ = true
</script>
<script type="module" src="http://localhost:5173/@vite/client"></script>
<script type="module" src="http://localhost:5173/script/app/client.tsx"></script>
=> Please make the HMR backend work normally as 5.0 !
I also have issues with HMR, it appears that HMR wont work if Vite is not installed at the top level of your diretory, I made a sample app in vite-svlte/vite-project, and on initial install HMR worked, closed VS Code and cd into vite-project and HMR no longer works. On Windows 11.
I was getting this same issue after creating a project using the vite template with Bun in WSL, but after installing Bun on Windows and running bun install vite --global HMR started working :) ref https://github.com/mark-wiemer/mark-wiemer-com
Consistent with the test results of @VQH-cmd, the last working version was [email protected], while v5.1.0 and the latest version v5.3.3 are both damaged.
I noticed an interesting phenomenon, HMR works when I test it in Firefox, but once I visit it once with Safari, HMR will fails in both Safari and Firefox, it freezes at the last modification before the Safari visit.
That said, it appears that Safari's request caused the HMR to break and freeze.
Downgrading to 5.0.12 didn't solve it for me. I'm on a Mac M1. I found that it works fine when running in Codespace.
--EDIT-- Updated macOS to Sonoma 14.5 Seems to work fine now
Stumbling upon this issue no matter what version of Vite I'm using. Tried 5.0.9, tried 5.3.3, tried 4.5.3 ... while developing an application based on Vue. Sometimes I can even break the code severely with neither Vite showing me any severe build error in console nor browser showing me the common warning box overlay ... yes, it happens when testing application in Chrome. But it happens when testing it in Firefox as well.
When entering another line like
console.log( "foo" );
that change isn't picked up at all. I doubt it is even recognized by Vite itself.
UPDATE: Vite seems to pick up the change as it keeps counting up in the console output when writing something like
00:39:44 [vite] hmr update /src/views/input/FightView.vue, /src/views/input/PreparationView.vue (x5)
I have the same issue with a monorepo achitectutre. I tried both Chrome and Firefox even Safari
I even forced HMR by using server: { hmr: true } on vite config file
I am having the same issue. I use named exports only, classes and typescript, in a react project using the react-typescript-swc template. Whenever I change something, the hot reload is alerted in the console, the browser is refreshed, but the actual code changes are not picked up, thus making hmr essentially useless.
~~Similarly here. Vite and React, npm run dev does not update tailwind changes on Ubuntu 22.04 with Chrome Version 126.0.6478.126 (Official Build), but Firefox 129.0.1 does work perfectly. Also, Chrome at times caches stuff so that it is impossible to update anything in either way: npm run dev, or npm run build followed by npm run preview (both may show some older version of an npm run dev produced say 15 minutes ago). Restarting Chrome, deleting cache with Chrome's GUI clear history, closing Firefox in background does not improve anything. Firefox alone is flawless though.~~
Vite + React HMR is fully functional in my case. My problem was that I had responsive Tailwind widths and Chrome would not display adjusted elements at the biggest breakpoint 2xl, e.g. 2xl:w-3/5 would not set the element width to 60% despite that 2xl stands for 1536px and I am running Chrome on the screen with 1920x1080. It turns out that there is an Ubuntu desktop bar and Firefox and Chrome treat it differently, Firefox ignores it while Chrome subtracts bar's width from the browser viewport resolution thus not reaching those 1536px, I think.
In any case, my problem was not caching or Vite, though it is useful to know about ctrl+shift+r to reload the page without caching and F12->Network->Disable Cache in Chrome.
