Hot module replacement not working in Vite + React + Ts using Ubuntu via WSL

I have an issue with not re-rendering page automatically after saving a file (after I made changes). Fsr, it works in Powershell, which is very weird. This is my package.json file if that is needed:

{
  "name": "vite-project",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "main": "dist/index.js",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview",
    "test": "tsc && jest"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@babel/preset-typescript": "^7.24.1",
    "@types/jest": "^29.5.12",
    "@types/react": "^18.2.66",
    "@types/react-dom": "^18.2.22",
    "@typescript-eslint/eslint-plugin": "^7.2.0",
    "@typescript-eslint/parser": "^7.2.0",
    "@vitejs/plugin-react": "^4.2.1",
    "autoprefixer": "^10.4.19",
    "eslint": "^8.57.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.6",
    "jest": "^29.7.0",
    "postcss": "^8.4.38",
    "tailwindcss": "^3.4.1",
    "ts-jest": "^29.1.2",
    "typescript": "^5.2.2",
    "vite": "^5.2.0"
  }
}

and vite.config.js file:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

Note: In Ubuntu it renders after I hit r+enter, which reset server.

So I tried several approaches:
• update Ubuntu
• deleting node_modules and package-lock.json and installing all dependencies again
• use different node versions (16.3.0, 18.12.0, 2012.2), btw in Powershell it works with 18.12.0 version
• and different npm versions
• in https://vitejs.dev/guide/troubleshooting in section Dev Server: Requests are stalled forever I tried to increase file descriptor limit and increase the following inotify related limits
• deleting whole project and re-clone my project again

I wonder why it stopped working. It worked before wonderfully... Thanks a lot for any help :)

Solution

After conducting thorough research, I discovered a pertinent YouTube video that adeptly addresses the issue at hand. In response to the problem, I made an addition to the vite.config.js file as shown below:

server: {
    watch: {
      usePolling: true
    }
  }

This adjustment successfully resolved the issue. However, it's essential to note that utilizing polling, as configured above, is generally considered less efficient compared to the default method. Polling involves periodic checks on all monitored files to detect changes, potentially resulting in higher CPU usage, particularly in larger projects. Therefore, it's advisable to resort to polling only when absolutely necessary. Despite the resolution, I still seek clarity on the necessity of employing polling in this particular context.

Recently, I came across another discussion on Stack Overflow that provides further insights into similar issues regarding hot module replacement (HMR) not working, particularly in environments like WSL2 with Ubuntu 22.04. You can check out the discussion here: HMR not working (Parcel, Webpack 5) in WSL2, Ubuntu 22.04. The solutions mentioned in that thread may provide alternative approaches or additional understanding of why certain setups might require different configurations.