How do I debug HMR/React Fast Refresh not working?

[fatso83]

We are currently retrofitting Vite 2 into an old (2016) React project, and while we have gotten Vite to build the project and gotten the development server working, we cannot get HMR to work: any change to any *.ts or *.tsx file causes a full reload!

So I am wondering how to debug this setup. What are the main things to look for? I am usually quite good at debugging stuff, but I very new to Vite, so I haven't ventured into the code base yet.

Things I think might interfere

I have tried looking at the default config created using npx create-vite and choosing a Typescript React app and I could not really see much of a difference. The only things that are different from the default that I can think of

• proxy config (just passing the requests on to the backend)
• old dependencies (I upgraded React 16 to React 17 to see if it did any difference, which it did not)
• warnings? I saw that the default created skeleton app uses React.StrictMode, so I wrapped my app in that. While that worked, it did produce quite a bit of warnings in the Console, none of which seemed to apply to HMR (mostly stuff like componentReceivedProps vs componentDidUpdate, etc).
• various code patterns like Redux HOC and various Provider components wrapping the hierarchy

Debugging output

Enabling --debug prints this at the beginning

debug output

$ npm run dev -- --port 3010 --debug

> frontend@0.0.0 dev
> vite "--port" "3010" "--debug"

  vite:config bundled config file loaded in 67ms +0ms
  vite:config using resolved config: {
  vite:config   server: {
  vite:config     watch: { usePolling: true },
  vite:config     proxy: {
  vite:config       '/method': [Object],
  vite:config       '/api': [Object],
  vite:config       '/log': [Object],
  vite:config       '/buildinfo': [Object],
  vite:config       '/configuration': [Object],
  vite:config       '/eventstream': [Object],
  vite:config       '/subscribe': [Object],
  vite:config       '/user-activity': [Object]
  vite:config     },
  vite:config     port: 3010,
  vite:config     fs: { strict: undefined, allow: [Array] }
  vite:config   },
  vite:config   build: {
  vite:config     target: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
  vite:config     polyfillDynamicImport: false,
  vite:config     outDir: 'dist/',
  vite:config     assetsDir: 'assets',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: true,
  vite:config     sourcemap: false,
  vite:config     rollupOptions: { input: [Object] },
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] },
  vite:config     minify: 'terser',
  vite:config     terserOptions: {},
  vite:config     cleanCssOptions: {},
  vite:config     write: true,
  vite:config     emptyOutDir: null,
  vite:config     manifest: false,
  vite:config     lib: false,
  vite:config     ssr: false,
  vite:config     ssrManifest: false,
  vite:config     brotliSize: true,
  vite:config     chunkSizeWarningLimit: 500,
  vite:config     watch: null
  vite:config   },
  vite:config   plugins: [
  vite:config     'vite:pre-alias',
  vite:config     'alias',
  vite:config     'react-refresh',
  vite:config     'vite:dynamic-import-polyfill',
  vite:config     'vite:resolve',
  vite:config     'vite:html',
  vite:config     'vite:css',
  vite:config     'vite:esbuild',
  vite:config     'vite:json',
  vite:config     'vite:wasm',
  vite:config     'vite:worker',
  vite:config     'vite:asset',
  vite:config     'react-svg',
  vite:config     'vite:define',
  vite:config     'vite:css-post',
  vite:config     'vite:client-inject',
  vite:config     'vite:import-analysis'
  vite:config   ],
  vite:config   configFile: '/Users/myuser/dev/nicecorp/frontend/vite.config.js',
  vite:config   configFileDependencies: [ 'vite.config.js' ],
  vite:config   inlineConfig: {
  vite:config     root: undefined,
  vite:config     base: undefined,
  vite:config     mode: undefined,
  vite:config     configFile: undefined,
  vite:config     logLevel: undefined,
  vite:config     clearScreen: undefined,
  vite:config     server: { port: 3010 }
  vite:config   },
  vite:config   root: '/Users/myuser/dev/nicecorp/frontend',
  vite:config   base: '/',
  vite:config   resolve: { dedupe: undefined, alias: [ [Object] ] },
  vite:config   publicDir: '/Users/myuser/dev/nicecorp/frontend/public',
  vite:config   cacheDir: '/Users/myuser/dev/nicecorp/frontend/node_modules/.vite',
  vite:config   command: 'serve',
  vite:config   mode: 'development',
  vite:config   isProduction: false,
  vite:config   env: { BASE_URL: '/', MODE: 'development', DEV: true, PROD: false },
  vite:config   assetsInclude: [Function: assetsInclude],
  vite:config   logger: {
  vite:config     hasWarned: false,
  vite:config     info: [Function: info],
  vite:config     warn: [Function: warn],
  vite:config     warnOnce: [Function: warnOnce],
  vite:config     error: [Function: error],
  vite:config     clearScreen: [Function: clearScreen]
  vite:config   },
  vite:config   createResolver: [Function: createResolver],
  vite:config   optimizeDeps: { esbuildOptions: { keepNames: undefined } }
  vite:config } +2ms
  vite:deps Hash is consistent. Skipping. Use --force to override. +0ms

  vite v2.4.4 dev server running at:

  > Local: http://localhost:3010/
  > Network: use `--host` to expose

vite:hmr output from the debug logs
When searching for hmr in the output, I can find strings like this:

  vite:hmr [detected api usage] src/clinic/src/components/PatientLatestDataOverview.jsx +77ms
  vite:hmr [self-accepts] src/clinic/src/components/styling/StyledChildren.jsx +4ms

When I change a file, I jus see a single HMR hit in the new lines in the output:

 vite:hmr [file change] src/clinic/src/app.tsx +9m
13:44:41 [vite] page reload src/clinic/src/app.tsx (x2)
  vite:spa-fallback Rewriting GET /encounter?attenderId=24 to /index.html +9m
  vite:time 55ms  /index.html +8m
  vite:cache [304] /assets/photoswipe/photoswipe.css?direct +9m
  vite:time 8ms   /assets/photoswipe/photoswipe.css +513ms
  vite:cache [304] /@vite/client +12ms
  vite:time 3ms   /@vite/client +11ms
  vite:cache [304] /@react-refresh +97ms
  vite:time 0ms   /@react-refresh +97ms

Config / App Setup / Dependencies

I have setup Vite to build our project with this config

import reactRefresh from '@vitejs/plugin-react-refresh'
import reactSvgPlugin from 'vite-plugin-react-svg';


module.exports = {
  server: {
    watch:{
      usePolling: true,
    },
    proxy: {
      '/method': {
        target: 'http://localhost:3000',
        changeOrigin: true,
      },
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
      },
      '/log': {
        target: 'http://localhost:3000',
        changeOrigin: true,
      },
      '/buildinfo': {
        target: 'http://localhost:3000',
        changeOrigin: true,
      },
      '/configuration': {
        target: 'http://localhost:3000',
        changeOrigin: true,
      },
      '/eventstream': {
        target: 'http://localhost:3000',
        changeOrigin: true,
      },
      '/subscribe': {
        target: 'http://localhost:3000',
        changeOrigin: true,
      },
      '/user-activity': {
        target: 'http://localhost:3000',
        changeOrigin: true,
      },
    },
  },
 
  build: {
    outDir: 'dist/',
    rollupOptions: {
      input: {
        main: 'index.html'
      }
    },
  },
  plugins: [reactRefresh(), reactSvgPlugin()],
}

Our dependencies:

{
  "@manifoldco/react-select-zero": "^0.0.1",
  "@material-ui/core": "^3.9.4",
  "@material-ui/icons": "^3.0.2",
  "@reduxjs/toolkit": "~1.4.0",
  "autosuggest-highlight": "^3.1.1",
  "chart.js": "~2.9.3",
  "circular-buffer": "^1.0.2",
  "clsx": "^1.1.0",
  "date-fns": "~2.16.1",
  "exif-js": "^2.3.0",
  "framer-motion": "^2.3.0",
  "history": "^4.10.1",
  "indexof": "^0.0.1",
  "jquery": "^3.4.1",
  "lodash": "^4.17.15",
  "loglevel": "^1.6.6",
  "memoize-one": "^5.1.1",
  "moment": "^2.24.0",
  "photoswipe": "^4.1.3",
  "qs": "^6.9.1",
  "rc-slider": "^8.7.1",
  "react": "^17.0.2",
  "react-addons-deep-compare": "0.0.1",
  "react-autosuggest": "^10",
  "react-collapsed": "^3.0.2",
  "react-dom": "^17.0.2",
  "react-idle-timer": "^4.6.4",
  "react-json-view": "^1.21.3",
  "react-jss": "^8.6.1",
  "react-redux": "^7.2.4",
  "react-router": "^5.2.0",
  "react-router-dom": "^5.2.0",
  "redux": "^4.0.5",
  "redux-freeze": "^0.1.7",
  "redux-thunk": "^2.3.0",
  "reselect": "^4.0.0",
  "styled-components": "^5.1.1",
  "styled-normalize": "^8.0.7",
  "tcomb": "^3.2.29",
  "tcomb-additional-types": "0.0.2",
  "tcomb-react": "^0.9.3",
  "tcomb-validation": "^3.4.1",
  "ts-is-present": "^1.1.5",
  "uuid": "^3.4.0"
}

[fatso83]

OK, I got somewhere on my own using this algo:

1. Create a test app using npx create-vite as a reference point
2. Create the same app structure in my own app (commenting out all the existing imports)
3. Verify that hot loading works (had to remove everything) with just app.tsx -> App.tsx
4. Open DevTools Networking tab and see that only one file got loaded on change
5. From the top module (app.tsx), start introducing the code that was removed (styled, redux, etc) and at each point verify that HMR still works

After fully restoring app.tsx to what it was,I could get still get App.tsx to do HMR. Great! Now it was time for the dumbed down App.tsx (basically just rendering a <div>hello</div> to be restored ...

6. I still had just dummy JSX in use, but I started uncommenting one import in App.tsx at a time. I soon found out by looking at the Network tab in DevTools that some imports had many, many more transitive dependencies then I knew about (react reducers depending on stuff from Material UI?!). That was a good find in itself!
7. As soon as I imported a component called ./MainGuiLayout a bunch of network activity started taking place and the whole HMR thing broke down. After this, only full reloads took place on any change.

This is the point I am at now. My guess is this MainGuiLayout component has some circular dependency thing going on, or something similar, and that makes the HMR break down. Only by digging deeper, using the same algorithm, I can find out what is the root cause of this.

[benjamingr]

Just wanted to point this reading is useful when doing a similar migration - thanks Carl :)

[fatso83]

OK, I figured this one out. It was not exactly the file I thought was the culprit, but something I uncommented at the same time. In fact, it was not a single import, but actually an export.

It turns out, that if I add any named export to App.tsx, all HMR stops working. Just adding export const foo = 12 breaks it.

I made a minimal repo to demonstrate this here: https://github.com/fatso83/break-vite-hmr-with-export
The single line needed to screw up HMR: fatso83/break-vite-hmr-with-export@e3159d5#diff-26ad4b834941d9b19ebf9db8082bd202aaf72ea0ddea85f5a8a0cb3c729cc6f2R7

[fatso83]

For the reason WHY this happens, see #4583 (comment)

[GeorgeDewar]

This absolutely saved my bacon today. I'd been really pulling my hair out trying to figure out why App.tsx was getting reloaded when almost any other file in the app was modified. It was, as you describe, an innocuous looking export from it. Thanks for your great debugging and sharing your findings.

[fordooo]

Thank you! Was having an issue where vite would show a reload in the terminal, but the page would not hot reload.

Turns out there was a named export in my app.jsx file: export const queryClient = new QueryClient()

Moved this out of app.jsx and into it's own file, and now hot reload is working!

[Aaronius]

Did you ever report this as a bug? It seems pretty bad...

[fatso83]

No, I did not. I was not sure it was, and tried digging deep myself, with some help from the discussion forums for Vite. Never got to the right branch, only the general whereabouts.

In the end I fixed my own issue, as I could just move the export elsewhere.

[fatso83]

See #4583 (comment) for why this happens. It's not a bug, it's a feature 😄

[milky2028]

Would it be possible to reopen this discussion? I'm also trying to port over a recent project that uses rollup for builds to vite, but I'm encountering a number of issues. I'm using preact, but the preact integration doesn't seem to work. So then I use the React integration and alias to preact, but HMR is broken. With a brand new project, using the React plugin and aliasing to preact works just fine.

Are there any common things that might cause HMR to break?

[jonaskuske]

This is also documented on the React Native docs: https://reactnative.dev/docs/fast-refresh#limitations

[milky2028]

It's not super clear to me what this actually means though. I've removed all exports that might be seen as "non-compliant". Also, my issue isn't that state is resetting on every update. It's that NOTHING is happening on each HMR update. I see the message in the console that a file has been updated, but then nothing happens.

[fatso83]

I think you might be experiencing a related, but different issue. It's been a while, but AFAIK I saw messages about the file being updated and then got a full page refresh.

[fatso83]

PS. Did you try running with --debug? You might want to consider creating a new thread issue/discussion and then creating a link here for follow-up

[fatso83]

Didn't see the reply on the separate thread. Solution: preactjs/preset-vite#34.

[milky2028]

I ended up figuring out my issue here: preactjs/preset-vite#34.

[bastianwegge]

Funny enough I had the same error and played around with @vitejs/plugin-react which ultimately solved the issue for me. @fatso83 I even tried your break-vite-hmr-with-export example and it still works when commenting in the const u thing you created. Maybe it's worth checking out for you as well.

[fatso83]

Hmmm .. that's cool, but I wonder if this means plugin-react then allows side-effects to break the application when doing fast refresh. With this, I am thinking about the comment from the maintainer (#4583 (comment)), which states that they only trust camel cased exports as side-effects free. So if plugin-react is not doing this, they probably implicitly have a bug.

[baba990aini]

I used Vite to build React SWC, but when I modified the components, I didn't trigger a hot update. I searched for a long time but couldn't find a solution. I found that the hot update only supports camel hump style component exports. Previously, I used pure lowercase and vomited blood

[chenxiaochun]

After trying several versions, installing the following version solved my problem

"vite": "^2.3.8",
 "@vitejs/plugin-react-refresh": "^1.3.4",

[thomaszdxsn]

After trying several versions, installing the following version solved my problem

"vite": "^2.3.8",
 "@vitejs/plugin-react-refresh": "^1.3.4",

It not work for me

[chenxiaochun]

After trying several versions, installing the following version solved my problem

"vite": "^2.3.8",
 "@vitejs/plugin-react-refresh": "^1.3.4",

It not work for me

What is your full vite config?

[thomaszdxsn]

After trying several versions, installing the following version solved my problem

"vite": "^2.3.8",
 "@vitejs/plugin-react-refresh": "^1.3.4",

It not work for me

What is your full vite config?

default config does not work, until I change like this

export default defineConfig({
  plugins: [
    react({
      include: "**/*.tsx",
    }),
  ],
});

[chenxiaochun]

After trying several versions, installing the following version solved my problem

"vite": "^2.3.8",
 "@vitejs/plugin-react-refresh": "^1.3.4",

It not work for me

What is your full vite config?

default config does not work, until I change like this

export default defineConfig({
  plugins: [
    react({
      include: "**/*.tsx",
    }),
  ],
});

The@vitejs/plugin-reactplugin is built in refresh feature

[isnifer]

@thomaszdxsn Thank you, your solution helped me.

[Evavic44]

I am currently going through this issue. I've tried almost every fix for this but it still persists.

What's even stranger is that it affects only one file: /Home/Index.jsx. HMR works perfectly on other pages. I've tried both the function component (rfc) and function component export(rfce) but no result.

Also, I don't have any export in my App.jsx

When I save any changes on the about page, the result in the terminal is

[vite] hmr update /src/pages/About/index.jsx 
hmr update /src/index.css

It doesn't work on /Home/Index.jsx
I get:

[vite] page reload src/pages/Home/Index.jsx

I'll appreciate any help. 😢

[VamOSGS]

Hey @Evavic44, the issue seems to be with your implicit naming of the pages. As you might have noticed, everything thats inside of your Router does not update at all, only if you're completely restarting the development server. Rename client/src/pages/Home/index.jsx to client/src/pages/Home.jsx and remove the trailing slash at the end of your import. Then you're fine and everything works as expected. 🎉

how to handle this case with vite config, I don't want to rename 300+ components change file structure 😂

[bastianwegge]

@VamOSGS Unfortunately, I don't think there's a workaround for that, since the behavior probably comes from the HMR process.

[VamOSGS]

@VamOSGS Unfortunately, I don't think there's a workaround for that, since the behavior probably comes from the HMR process.

Yes, it comes from hmr, but it works fine in react-scripts with webpack5,
I have migrated from react-scripts v4 to vite then I head issues like this, after 2 weeks of trying to have stable dev env I migrate back to react-scripts v5

[bastianwegge]

@VamOSGS understandable! IMHO the index.tsx notation results in a bad DX in any case, because usually we internally use CRTL-P or CTRL-T to jump to files (vim / sublime / webstorm). If every file is named index.tsx it's hard to jump 😀. Good luck!

[VamOSGS]

@VamOSGS understandable! IMHO the index.tsx notation results in a bad DX in any case, because usually we internally use CRTL-P or CTRL-T to jump to files (vim / sublime / webstorm). If every file is names index.tsx it's hard to jump 😀. Good luck!

@bastianwegge I am navigating in files with Directiory name for example Ctrl + P and in opened input I am typing dir name (Homepage/)
after that except opening Homepage/index.jsx also I can look to other files from Homepage directory (/Homepage/Header.jsx, Homepage/styles.scss, etc...) and I think its more comfortable than to have Homepage.jsx and in other directory other files for Homepage ... )

[novikov-alexander]

I also found it useful for debug to look into Network tab into column initiator.
If some file forces reload of the whole app, go to it's initiator and try to make any change (add one more line there).
If it also forces reload go to its initiator etc.