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

cclgggtu 于 2023-01-12 发布在 React

关注(0)|答案(1)|浏览(95)

我偶然发现了一个问题，当在vite应用程序中使用热重载模式时，HMR无限更新一个文件。这个文件似乎每次都不一样。我在下面附上了这个问题的截图。
Vite-HMR-infinite-updates
环境：

操作系统- Windows 10和Mac Monterey 12.5
节点版本- v16.14.0
国家预防机制版本-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"]
}