Vite创建的React应用出现HMR无限更新问题求助

在Vite搭建的React应用热重载模式下遇到问题：HMR会无限更新文件，且每次更新的文件都不相同。问题截图如下：

环境信息 #

• 操作系统：Windows 10、Macos Monterey 12.5
• Node版本：v16.14.0
• npm版本：8.3.1
• Vite版本：^3.2.3

vite.config.ts #

import { defineConfig } from 'vite';
import tsconfigPaths from 'vite-tsconfig-paths';
import react from '@vitejs/plugin-react';
import path from 'path';

const getPath = (s: string) => path.resolve(__dirname, s);

const aliases = {
    '@actions': getPath('./src/actions'),
    '@api': getPath('./src/api'),
    '@assets': getPath('./src/assets'),
    '@components': getPath('./src/components'),
    '@config': getPath('./src/config'),
    '@libs': getPath('./src/libs'),
    '@pages': getPath('./src/pages'),
    '@providers': getPath('./src/providers'),
    '@shared': getPath('./src/shared'),
    '@slices': getPath('./src/slices'),
    '@store': getPath('./src/store'),
    '@themes': getPath('./src/themes'),
    '@formComponents': getPath('./src/formComponents'),
    '@hooks': getPath('./src/hooks'),
    '@schemas': getPath('./src/schemas'),
    '@translations': getPath('./src/translations'),
};
// https://vitejs.dev/config/
export default defineConfig({
    plugins: [react(), tsconfigPaths({ root: '.' })],
    resolve: {
        alias: aliases,
    },
});

tsconfig.json #

{
    "compilerOptions": {
        "target": "ESNext",
        "useDefineForClassFields": true,
        "lib": ["DOM", "DOM.Iterable", "ESNext"],
        "allowJs": false,
        "skipLibCheck": true,
        "esModuleInterop": false,
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "module": "ESNext",
        "moduleResolution": "Node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,
        "jsx": "react-jsx",
        "baseUrl": "src",
        "rootDir": ".",
        "typeRoots": ["node_modules/yup"],
        "paths": {
            "@actions/*": ["actions/*"],
            "@api/*": ["api/*"],
            "@assets/*": ["assets/*"],
            "@components/*": ["components/*"],
            "@config/*": ["config/*"],
            "@libs/*": ["libs/*"],
            "@pages/*": ["pages/*"],
            "@providers/*": ["providers/*"],
            "@shared/*": ["shared/*"],
            "@slices/*": ["slices/*"],
            "@store/*": ["store/*"],
            "@themes/*": ["themes/*"],
            "@formComponents/*": ["formComponents/*"],
            "@hooks/*": ["hooks/*"],
            "@schemas/*": ["schemas/*"],
            "@translations/*": ["translations/*"],
            "@components/*": ["components/*"]
        }
    },
    "include": ["./src"]
}

已尝试的解决方法 #

• 重装node_modules目录

现寻求该问题的有效解决方案。

内容的提问来源于stack exchange，提问作者jpelec