使用Vite创建的React应用程序中无限HMR更新

Question

我偶然发现了一个问题，当在vite应用程序中使用热加载模式时，HMR无限更新文件。该文件似乎每次都不同。我在下面附上了这个问题的截图。

Vite-HMR-infinite-updates

Env:

• OS - Windows 10和Macos Monterey 12.5
• Node版本- v16.14.0
npm version - 8.3.1
• 虚拟版本- ^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/

Answer 1

滚到3.1vite的版本(版本4也有这个问题)