Hot Reload shows in terminal but do not updates browser #7839
Comments
|
Jumping in on this since I found this same behavior while evaluating vue and distilled it down to this contrived example. https://stackblitz.com/edit/vite-auuvqt?file=src%2Fcomponents%2FWrapper.vue There is something about looping over |
|
I have the same problem, I use element-plus |
|
Looks like it's an upstream issue since it happens not only with Vite. |
sapphi-red
added
bug: upstream
|
Interestingly I'm having the same HMR issue but with react. If I downgrade to vite@2.6.14 it works as expected. But in the new versions I see the terminal notice but nothing happens in the browser. Replaced it with preact (just to test) and the same thing so I believe the issue might be with vite's HMR or the @preact/preset-vite and/or @vitejs/plugin-react-refresh packages. |
I'm having json hmr issue with react |
I tried to downgrade to 2.6.14 but it still doesn’t work as expected. 🤦🏼♂️ |
|
Also exact same issue here with React. Vite 2.9.5 |
|
Same issue here. For me it happens sometimes, when copying nested components from one project/folder to another, when hmr is running. It seems like vite has some weird problem with new component files with deps |
|
any updates on this one? for me it only happens with |
|
@adrianocr @3lang3 @daniloribeiro00 TL;DR: You might need to change the component export to I found the HMR issue with template I tested on the vite template |
|
The components I'm using are from a external lib, so there's no way to change the exports |
bug fixed in vite 3.0 |
|
I've tried again with Vite 3.0.2. It kinda works for some props but not all of them. For example, Tailwind CSS classes do not update and I have to reload the entire page. It used to work for everything. |
|
Hey folks! Yesterday I experienced something related, but really weird. When saving the file, browser was updated, but duplicating the component on screen. Today, it isn't updating at all... It's brand new project, created using vue3 initiator. |
|
This just started happening to me as well. The updates only come through when I restart my dev server. I tried updating to vite 3.0.8 but that did nothing. |
|
It started happening to me as well. Disabled browser cache but still receiving old component. Terminal log page reload successfully and browser auto refresh works as expected. The issue must be with serving those files via server. EDIT: |
|
EDIT: |
|
I had the same issue, up till vite 3.0.8. The bug seems to be fixed in the 3.0.9 version, which just came out a couple of days ago. |
|
in my project, the React/ReactDOM are all from external, so when i use change my local code the update msg is shown at the terminal but no update in the browser. i got the reason is ReactDOM from external is production mode and not support refresh features, what can i do cuz i have to use external for the historical reasons? |
For me v3.0.9 fixed the issue. I'm closing this thread. |
|
Still experiencing this in v3.1.0. Just pinned to 3.0.9 and also not working for me. |
|
@zachbryant could you open a new bug report with a minimal repro against 3.1? |
Have you ever tried this?
|
|
We were facing the same issue with our This doesn't work (changes are not reflected)
It works if you save the files inside
Changes to files inside
|
|
Why this issue is closed since is not working yet? Using version 3.2.2 with React |
|
@ldgmaia open again, even though somehow it works for me now |
|
Remove everything from |
|
The original repro is fixed by vuejs/core#4077. For other people having issues should create a new issue with reproduction as it's a different issue. Also for react ones, I guess those are duplicate of vitejs/vite-plugin-react#20, vitejs/vite-plugin-react#21, vitejs/vite-plugin-react#6. |
|
Does anybody know how to fix this? This bug is clearly not fixed |
I got it fixed. Actually it was my mistake. Maybe I can help. What is your stack? |
Thanks, Diego. I have just created a typescriptreact app and changed nothing in the default config. The only dependency added was styled-components. Whenever I make a change in main.tsx or App.tsx, hot reload works as expected (and the terminal outputs |
|
If I could see your code, would help, but let's try. In the file where you are importing this child component, can you check if the import is correct, even capital letters? |
You're right, I should have provided some code. In any case, I managed to isolate the issue down to styled-components. See snippets below: // src/components/Comptest.tsx
// Changing the props of ChildButton does NOT trigger a reload
import React from "react";
import styled from "styled-components";
interface Props {
text: string;
}
const StyledButton = styled.button`
color: red;
`;
class ChildButton extends React.Component<Props> {
render() {
return <StyledButton>{this.props.text}</StyledButton>;
}
}
export default class ParentDiv extends React.Component {
render() {
return (
<div>
<ChildButton text="Btn1" />
<ChildButton text="Btn2" />
<ChildButton text="Btn3" />
</div>
);
}
}// src/components/Comptest.tsx
// Changing the props of ChildButton DOES trigger a reload
import React from "react";
interface Props {
text: string;
}
class ChildButton extends React.Component<Props> {
render() {
return <button>{this.props.text}</button>;
}
}
export default class ParentDiv extends React.Component {
render() {
return (
<div>
<ChildButton text="Btn1" />
<ChildButton text="Btn2" />
<ChildButton text="Btn3" />
</div>
);
}
}Do I need any extra configuration to make Vite work with styled-components ? |
|
I’m also having the same problem with plain JS app. Vite shows a change to the child component but does not cause a re-render to parents. I’m using:
I’ve tried moving the files and updating imports, and renaming files to lower case - as mentioned in some comments above. Casing matches files and imports. I’ve removed node_modules and reinstalled (many times). No luck with any of that. If there’s anything further I can add to help track this issue down I’d be happy to post. |
Hi, sorry I couldn't reply earlier. Health issues happened. I usually don't use classes like you, but I hope this helps you. |
|
I am experiencing the same problem and after a lot of digging in the internals I noticed that the path inside the Now why the stored if (import.meta.hot) {
// Workaround for a strange Vite hot-reloading bug, see:
// https://github.com/vitejs/vite/issues/7839#issuecomment-1340109679
import.meta.hot.on('vite:beforeUpdate', onBeforeViteUpdate)
}
function onBeforeViteUpdate(event) {
if (event.type === 'update') {
// Patch `event.updates` to remove the version query parameter from path,
// so that the update gets picked up.
const updates = []
for (const update of event.updates) {
updates.push(update) // Keep the original update.
const acceptedPath = update.acceptedPath.replace(/\?v=[0-9a-f]+&/i, '?')
if (acceptedPath !== update.acceptedPath) {
updates.push({ ...update, acceptedPath })
}
}
event.updates = updates
}
} |
|
Where did you apply that change? |
|
Experiencing the same thing here. I have to manually refresh browser to see changes... 😢 "vite": "^3.1.4" |
Ah my issue was that for some reason my code was trying to use a variable before it was initialized, shuffled some stuff around and now it's working correctly again.. |
|
For me, Vite won't hot reload imported Class components but does fine with imported functional components. It will reload a Class component if I save the main.jsx (importing file) but not the module I'm currently working on. I'm assuming it has something to do with Class components using the render() function instead of relegating that task to the importing module? Any ideas? Edit: Is there a way to set it up so that hmr always updates main.jsx as well as any module I'm currently saving? |
|
Good. This is someone who has solved the problem? What version do I need to downgrade from vite to have it refresh the browser window itself? |
@dajpes at the root level of your code. Ideally wrapped in an if (import.meta.hot) {
// Workaround for a strange Vite hot-reloading bug, see:
// https://github.com/vitejs/vite/issues/7839#issuecomment-1340109679
import.meta.hot.on('vite:beforeUpdate', onBeforeViteUpdate)
}
function onBeforeViteUpdate(event) {
if (event.type === 'update') {
// Patch `event.updates` to remove the version query parameter from path,
// so that the update gets picked up.
// Why the stored `deps` are missing this part of the URL, I cannot say…
const updates = []
for (const update of event.updates) {
updates.push(update, {
...update,
acceptedPath: update.acceptedPath.replace(/\?v=[0-9a-f]+&/i, '?')
})
}
event.updates = updates
}
} |
|
@lehni When you say root level, do you mean to add this script inside of the For example: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
<script type="module">
if (import.meta.hot) {
// Workaround for a strange Vite hot-reloading bug, see:
// https://github.com/vitejs/vite/issues/7839#issuecomment-1340109679
import.meta.hot.on('vite:beforeUpdate', onBeforeViteUpdate)
}
function onBeforeViteUpdate(event) {
if (event.type === 'update') {
// Patch `event.updates` to remove the version query parameter from path,
// so that the update gets picked up.
// Why the stored `deps` are missing this part of the URL, I cannot say…
const updates = []
for (const update of event.updates) {
updates.push(update, {
...update,
acceptedPath: update.acceptedPath.replace(/\?v=[0-9a-f]+&/i, '?')
})
}
event.updates = updates
}
}
</script>
</body>
</html> |
|
May not be related to this specific issue, but what fixed it for me was a stupid mistake. I am using django-vite and in my <script type="module">
import RefreshRuntime from 'http://localhost:3000/@react-refresh'
RefreshRuntime.injectIntoGlobalHook(window)
window.$RefreshReg$ = () => {
}
window.$RefreshSig$ = () => (type) => type
window.__vite_plugin_react_preamble_installed__ = true
</script>As it turned out, I was serving all of my static assets from |
|
@zachbellay yes this should work. Did you test it? Does it not resolve the issue? |
We have a similar setup and I can confirm that this is working for me using vite@3.0.7. Thank you! |
|
Started to notice this issue after upgrading to Vite 4, changes to reflected even though the console shows the file being updated through HMR. Upgrading Vue from |
|
I'm facing same issue. In my case module is loaded to browser, and accepted, but hot reload do not cause react rerendering. If I will force rerender of components tree eg by resize window, new component version will be rendered properly. |
and others
Describe the bug
I have a Vue.js 3 + Vite + Tailwind CSS 3 project that uses a third party components library (also built with Vue.js 3 and Tailwind CSS 3) from my company's local NPM.
The problem is when I change the class or any prop that affects the classes of the imported component in my project, the VSCode terminal and the browser terminal both show
hmr update /src/views/.../fileName.vuehmr update /src/tailwind.cssBut the browser does not update and I always have to manually refresh the page with F5 to see the changes.
It works correctly if I change the class of any element or component from my own project, the issue is ONLY with the third party library.
This is my
vite.config.jsDoes anyone know how to make the browser reflects the changes?
------- edit: added reproduction link from rtek
Reproduction
https://stackblitz.com/edit/vite-auuvqt?file=src%2Fcomponents%2FWrapper.vue
System Info
System: OS: Windows 10 10.0.19043 CPU: (8) x64 Intel(R) Core(TM) i5-10210U CPU @ 1.60GHz Memory: 6.53 GB / 15.78 GB Binaries: Node: 16.14.2 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.18 - C:\Program Files\nodejs\yarn.CMD npm: 8.5.0 - C:\Program Files\nodejs\npm.CMD Browsers: Edge: Spartan (44.19041.1266.0), Chromium (100.0.1185.44) Internet Explorer: 11.0.19041.1566 npmPackages: @vitejs/plugin-vue: ^2.0.0 => 2.3.1 vite: ^2.9.5 => 2.9.5Used Package Manager
pnpm
Logs
Validations
The text was updated successfully, but these errors were encountered: