HMR does not work

[xiaomuzizier]

Describe the bug

I see this HMR didn't work for dynamic imported modules ,I also have this issue.
but I have another problem in react.

for example:

my vit config:

my whistle:

I will use "cms.fcc.qq.com" open the page.

my html:

my component:

index.tsx use App.tsx:

App.tsx:

when I change something in GLHeaderMenu component.
this will show '[vite] hmr update /src/App.tsx' .the page does not update

hmr does not work .

Reproduction

System Info

Output of npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers:

Used package manager:

Logs

---

Before submitting the issue, please make sure you do the following

• 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.
• Provide a description in this issue that describes the bug.
• 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 https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

[Shinigami92]

Could you create a small reproducible repo, that will help other contributors to jump straight into the issue and may provide help faster 🙂

It's really hard to look into that many images that are oversized and it's not possible to copy text from them

[Hujianboo]

The cache may cause the problem.?
I also use whistle just like you. can you tell me the reason of using http but not https? the page is refreshing continuely when I set the https in whistle even I set https: true in vite.config . Do you have the same promblem just like me?

[JinJieTan]

I had the same problem，HRM not work

[xiaomuzizier]

The cache may cause the problem.?
I also use whistle just like you. can you tell me the reason of using http but not https? the page is refreshing continuely when I set the https in whistle even I set https: true in vite.config . Do you have the same promblem just like me?

see this：#2968

I encountered the problem you mentioned, because we use whistle. the websocket connection failed and caused the reswiping.
see

.You can solve this problem through the following configuration.

[xiaomuzizier]

The cache may cause the problem.?
I also use whistle just like you. can you tell me the reason of using http but not https? the page is refreshing continuely when I set the https in whistle even I set https: true in vite.config . Do you have the same promblem just like me?

Could you create a small reproducible repo, that will help other contributors to jump straight into the issue and may provide help faster 🙂

It's really hard to look into that many images that are oversized and it's not possible to copy text from them

ok. I will sort it out.thx!!

[Hujianboo]

The cache may cause the problem.?
I also use whistle just like you. can you tell me the reason of using http but not https? the page is refreshing continuely when I set the https in whistle even I set https: true in vite.config . Do you have the same promblem just like me?

see this：#2968

I encountered the problem you mentioned, because we use whistle. the websocket connection failed and caused the reswiping.
see

.You can solve this problem through the following configuration.

thx! it works!

[xiaomuzizier]

The cache may cause the problem.?
I also use whistle just like you. can you tell me the reason of using http but not https? the page is refreshing continuely when I set the https in whistle even I set https: true in vite.config . Do you have the same promblem just like me?

see this：#2968
I encountered the problem you mentioned, because we use whistle. the websocket connection failed and caused the reswiping.
see

.You can solve this problem through the following configuration.

thx! it works!

but ennnn. Do you have the same promblem(hmr does not work) just like me?or maybe you are not here yet?

[Hujianboo]

The cache may cause the problem.?
I also use whistle just like you. can you tell me the reason of using http but not https? the page is refreshing continuely when I set the https in whistle even I set https: true in vite.config . Do you have the same promblem just like me?

see this：#2968
I encountered the problem you mentioned, because we use whistle. the websocket connection failed and caused the reswiping.
see

.You can solve this problem through the following configuration.

thx! it works!

but ennnn. Do you have the same promblem(hmr does not work) just like me?or maybe you are not here yet?

sorry i do not have the problem you mentioned.but do you define the entrance of the project in vite.config.ts correctly? because you change the App.tsx to Index.tsx. you can open the chrome devtool to see the whether the <script> in html is the right file

[uptownhr]

I am also seeing the same issue and created this repository that reproduces with minimal changes.

https://github.com/uptownhr/vite-vue-jsx-hmr-error

[Sociosarbis]

I am also seeing the same issue and created this repository that reproduces with minimal changes.

https://github.com/uptownhr/vite-vue-jsx-hmr-error

I debugged your codes for reproduction and found that when defineComponent(<div>Test - Change Me</div>) in this form, the component is somehow taken as element and not as Component. It's seems only Component supports HMR currently in vue-3, you can search registerHMR in vue's source code to confirm that.

As a workaround, you can define your component like this defineComponent({ render() { return <div>Test - Change 23</div> }}). It works on my test.

I think the problem is not the same as yours. @uptownhr

I tested on the official react-ts template with the following config. But I didn't encounterd your problem. Did I miss anything ? @xiaomuzizier
vite:

export default defineConfig({
  server: {
    hmr: {
      protocol: 'ws',
      host: 'localhost'
    }
  },
  plugins: [reactRefresh()]
})

whistle:

https://www.abc.com http://localhost:3000

[xiaomuzizier]

I am also seeing the same issue and created this repository that reproduces with minimal changes.
https://github.com/uptownhr/vite-vue-jsx-hmr-error

I debugged your codes for reproduction and found that when defineComponent(<div>Test - Change Me</div>) in this form, the component is somehow taken as element and not as Component. It's seems only Component supports HMR currently in vue-3, you can search registerHMR in vue's source code to confirm that.

As a workaround, you can define your component like this defineComponent({ render() { return <div>Test - Change 23</div> }}). It works on my test.

I think the problem is not the same as yours. @uptownhr

I tested on the official react-ts template with the following config. But I didn't encounterd your problem. Did I miss anything ? @xiaomuzizier
vite:

export default defineConfig({
  server: {
    hmr: {
      protocol: 'ws',
      host: 'localhost'
    }
  },
  plugins: [reactRefresh()]
})

whistle:

https://www.abc.com http://localhost:3000

@Sociosarbis Sociosarbis the problem is not the same as my.
I will sort it sonner

[xiaomuzizier]

@Shinigami92 @Sociosarbis
I think I find the problem.like this: vitejs/vite-plugin-react#20
When I implemented the repo, I found that when I used dynamic loading, it would cause hmr fail. If I do not use dynamic loading in the routing, hmr will take effect.

need I provide a small reproducible repo? repo:https://github.com/xiaomuzizier/hmr-react-error-repo

[ygj6]

@xiaomuzizier repo:https://github.com/xiaomuzizier/hmr-react-error-repo is 404

[xiaomuzizier]

@xiaomuzizier repo:https://github.com/xiaomuzizier/hmr-react-error-repo is 404

@ygj6 Take a look now

[JinJieTan]

My problem has been solved . HRM not work reason : when i use ts in project , run yarn build, . tsx => .js , in same folder , have index .tsx index.js.... remove index.js , problem has been solved . HRM begin work

[xiaomuzizier]

My problem has been solved . HRM not work reason : when i use ts in project , run yarn build, . tsx => .js , in same folder , have index .tsx index.js.... remove index.js , problem has been solved . HRM begin work

@JinJieTan
I think my problem is not same as yours,but thanks for you providing your scheme.

I find the problem.like this: vitejs/vite-plugin-react#20

When I implemented the repo, I found that when I used dynamic loading, it would cause hmr fail. If I do not use dynamic loading in the routing, hmr will take effect. the repo is :https://github.com/xiaomuzizier/hmr-react-error-repo

[Sociosarbis]

There is nothing to do with dynamic loading and the real reason let HMR not work is react-refresh doen't support old-style class component.

The workaround is rewriting your component to functional component.

Here is the result.

1. original:

• source:

import React from 'react';
export default class Test extends React.Component {
  state = {};

  render() {
    return <h1>hi</h1>;
  }
}

• compiled:

import __vite__cjsImport0_react from "/node_modules/.vite/react.js?v=04f53729"; const React = __vite__cjsImport0_react.__esModule ? __vite__cjsImport0_react.default : __vite__cjsImport0_react;
export default class Test extends React.Component {
  constructor() {
    super(...arguments);
    this.state = {};
  }
  render() {
    return /* @__PURE__ */ React.createElement("h1", null, "hi");
  }
}

after rewriting:
source:

import React from 'react';

export default function Test() {

  return <h1>hi</h1>;
}

compiled

import { createHotContext as __vite__createHotContext } from "/@vite/client";import.meta.hot = __vite__createHotContext("/src/components/Test.tsx");import RefreshRuntime from "/@react-refresh";
let prevRefreshReg;
let prevRefreshSig;
if (!window.__vite_plugin_react_preamble_installed__) {
  throw new Error("vite-plugin-react can't detect preamble. Something is wrong. See https://github.com/vitejs/vite-plugin-react/pull/11#discussion_r430879201");
}
if (import.meta.hot) {
  prevRefreshReg = window.$RefreshReg$;
  prevRefreshSig = window.$RefreshSig$;
  window.$RefreshReg$ = (type, id) => {
    RefreshRuntime.register(type, "D:/sociosarbis-projects/hmr-react-error-repo/src/components/Test.tsx " + id);
  };
  window.$RefreshSig$ = RefreshRuntime.createSignatureFunctionForTransform;
}
var _jsxFileName = "D:\\sociosarbis-projects\\hmr-react-error-repo\\src\\components\\Test.tsx";
import __vite__cjsImport2_react from "/node_modules/.vite/react.js?v=04f53729"; const React = __vite__cjsImport2_react.__esModule ? __vite__cjsImport2_react.default : __vite__cjsImport2_react;
export default function Test() {
  return /* @__PURE__ */ React.createElement("h1", {
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 6,
      columnNumber: 10
    }
  }, "hi");
}
_c = Test;
var _c;
$RefreshReg$(_c, "Test");
if (import.meta.hot) {
  window.$RefreshReg$ = prevRefreshReg;
  window.$RefreshSig$ = prevRefreshSig;
  import.meta.hot.accept();
  if (!window.__vite_plugin_react_timeout) {
    window.__vite_plugin_react_timeout = setTimeout(() => {
      window.__vite_plugin_react_timeout = 0;
      RefreshRuntime.performReactRefresh();
    }, 30);
  }
}

[xiaomuzizier]

There is nothing to do with dynamic loading and the real reason let HMR not work is react-refresh doen't support old-style class component.

The workaround is rewriting your component to functional component.

Here is the result.

1. original:

• source:

import React from 'react';
export default class Test extends React.Component {
  state = {};

  render() {
    return <h1>hi</h1>;
  }
}

• compiled:

import __vite__cjsImport0_react from "/node_modules/.vite/react.js?v=04f53729"; const React = __vite__cjsImport0_react.__esModule ? __vite__cjsImport0_react.default : __vite__cjsImport0_react;
export default class Test extends React.Component {
  constructor() {
    super(...arguments);
    this.state = {};
  }
  render() {
    return /* @__PURE__ */ React.createElement("h1", null, "hi");
  }
}

after rewriting:
source:

import React from 'react';

export default function Test() {

  return <h1>hi</h1>;
}

compiled

import { createHotContext as __vite__createHotContext } from "/@vite/client";import.meta.hot = __vite__createHotContext("/src/components/Test.tsx");import RefreshRuntime from "/@react-refresh";
let prevRefreshReg;
let prevRefreshSig;
if (!window.__vite_plugin_react_preamble_installed__) {
  throw new Error("vite-plugin-react can't detect preamble. Something is wrong. See https://github.com/vitejs/vite-plugin-react/pull/11#discussion_r430879201");
}
if (import.meta.hot) {
  prevRefreshReg = window.$RefreshReg$;
  prevRefreshSig = window.$RefreshSig$;
  window.$RefreshReg$ = (type, id) => {
    RefreshRuntime.register(type, "D:/sociosarbis-projects/hmr-react-error-repo/src/components/Test.tsx " + id);
  };
  window.$RefreshSig$ = RefreshRuntime.createSignatureFunctionForTransform;
}
var _jsxFileName = "D:\\sociosarbis-projects\\hmr-react-error-repo\\src\\components\\Test.tsx";
import __vite__cjsImport2_react from "/node_modules/.vite/react.js?v=04f53729"; const React = __vite__cjsImport2_react.__esModule ? __vite__cjsImport2_react.default : __vite__cjsImport2_react;
export default function Test() {
  return /* @__PURE__ */ React.createElement("h1", {
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 6,
      columnNumber: 10
    }
  }, "hi");
}
_c = Test;
var _c;
$RefreshReg$(_c, "Test");
if (import.meta.hot) {
  window.$RefreshReg$ = prevRefreshReg;
  window.$RefreshSig$ = prevRefreshSig;
  import.meta.hot.accept();
  if (!window.__vite_plugin_react_timeout) {
    window.__vite_plugin_react_timeout = setTimeout(() => {
      window.__vite_plugin_react_timeout = 0;
      RefreshRuntime.performReactRefresh();
    }, 30);
  }
}

oh。@Sociosarbis thx! I got it. so @Shinigami92 , can "react-refresh" support old-style class component?

[patak-dev]

I think we can close this issue @xiaomuzizier, as @Sociosarbis explained, this could be a request for the react fast refresh team.

[xiaomuzizier]

I think we can close this issue @xiaomuzizier, as @Sociosarbis explained, this could be a request for the react fast refresh team.

ok，thx！