Vite 5.0 - Hot Reload not working after upgrading from 4.5.0

Question

We're currently using Vite 5.0.0 in a React TS environment after upgrading from 4.5.0. We're having some issues with hot reload, though. After any change, Vite performs a full page reload.

I think this happens because of circular imports in our project: IMAGE HERE

But the thing is, despite there being circular imports, Vite 4.5.0 used to perform hot reloads without issues.

What can I do to make Vite resume using hot reloads in cases like this one?

• Reproduced with yarn vite --mode development

• Caused after saving a file

• Expected hot reload but got a full page reload

Our vite.config.ts file:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import viteTsconfigPaths from 'vite-tsconfig-paths';
import eslint from 'vite-plugin-eslint';
import * as path from 'path';
import { readFileSync } from 'fs';
import { read, utils } from 'xlsx';

export default defineConfig({
  // depending on your application, base can also be "/"
  appType: 'spa',
  base: '/',
  assetsInclude: ['**/*.xlsx'],
  plugins: [
    react({
      include: '**/*.tsx',
    }),
    eslint(),
    viteTsconfigPaths(),
    {
      // this plugin handles ?sheetjs tags
      name: 'vite-sheet',
      transform(code, id) {
        if (!id.match(/\?sheetjs$/)) return;
        const wb = read(readFileSync(id.replace(/\?sheetjs$/, '')));
        const data = utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
        return `export default JSON.parse('${JSON.stringify(data)}')`;
      },
    },
  ],
  server: {
    // this ensures that the browser opens upon server start
    open: true,
    // this sets a default port to 3000
    port: 3000,
    hmr: true,
    watch: {
      usePolling: true,
    },
  },
  resolve: {
    alias: [
      {
        find: /^moment$/,
        replacement: path.resolve(__dirname, './alias.js'),
      },
      {
        find: /^gc-dv$/,
        replacement: path.resolve(
          __dirname,
          './node_modules/@grapecity/activereports/lib/node_modules/gc-dv.js'
        ),
      },
      {
        // eslint-disable-next-line no-useless-escape
        find: /^@grapecity\/ar-js-pagereport$/,
        replacement: path.resolve(
          __dirname,
          './node_modules/@grapecity/activereports/lib/node_modules/@grapecity/ar-js-pagereport.js'
        ),
      },
      {
        find: /^barcodejs$/,
        replacement: path.resolve(
          __dirname,
          './node_modules/@grapecity/activereports/lib/node_modules/barcodejs.js'
        ),
      },
    ],
  },
});

System info:

System:
    OS: macOS 14.1.1
    CPU: (10) arm64 Apple M2 Pro
    Memory: 249.61 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.4.0 - ~/.nvm/versions/node/v20.4.0/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.7.2 - ~/.nvm/versions/node/v20.4.0/bin/npm
    Watchman: 2023.10.09.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 119.0.6045.159
    Edge: 119.0.2151.72
    Safari: 17.1
  npmPackages:
    @vitejs/plugin-react: 4.2.0 => 4.2.0 
    vite: 5.0.0 => 5.0.0