Hot Reload not working

[patrickleogit]

Describe the bug

Hello,
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:

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

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

Vite config 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'
        ),
      },
    ],
  },
});

Reproduction

I can't provide a reproduction url because the problem is difficult to reproduce in a minimal "reproduction environment"

Steps to reproduce

yarn vite --mode development

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

Used Package Manager

yarn

Logs

No response

Validations

• Follow our Code of Conduct
• 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.
• 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.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[bluwy]

The full reload is expected because it's not safe to apply HMR when there's an import loop that involves HMR-bounded modules (.e.g .tsx files). The code might run fine if the depended variables are not circularly derived, but we can't always guarantee that.

You should break the import loop to fix this instead. We can't avoid the full reload without causing other bugs.