Infinite HMR updates in React app created with Vite - reactjs

Question

I've stumbled upon an issue, of HMR infinitely updating a file when using hot reload mode in vite app. The file seems to be different every time. I've attached a screenshot of the issue below.
Vite-HMR-infinite-updates
Env:
OS - Windows 10 and Macos Monterey 12.5
Node version - v16.14.0
npm verion - 8.3.1
vite version - ^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"]
}
reinstalling node_modules/

Answer 1

Roll back to 3.1 version of vite (Version 4 also has this problem)