React项目修改后需重启服务器？多种修复方案无效求解决

问题背景 #

首次使用React开发SPA作品集，通过npx create-react-app初始化项目，在Win11的VS Code中开发，终端采用WSL Kali Linux。修改代码后必须重启npm start才能生效，已尝试调整文件监听数、禁用Fast Refresh、添加热重载代码、设置CHOKIDAR_USEPOLLING等方案，均无效。

已提供代码片段 #

App.js #

import React from 'react';
import './App.css';
import './layer1.svg';
import Menu from './components/menu';
import Portfolio from './components/portfolio'
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'

function App() {
  return (
  <div>
    <Menu/>
    <Router>
        <Routes>
        <Route path="/portfolio" element={<Portfolio />}/>
        <Route exact path="/" element={<Portfolio />}/>
        </Routes>
    </Router>
    </div>
  );
}

export default App;

index.js #

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
if (module.hot) {
  module.hot.accept();
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

已尝试的无效方案 #

• 将max user watches增至524288
• 添加.env文件并设置FAST_REFRESH=false
• 在index.js中手动添加热重载代码
• 修改package.json的start脚本为CHOKIDAR_USEPOLLING=true react-scripts start

解决方案建议 #

1. 迁移项目至WSL本地文件系统 #

Win11的WSL与Windows磁盘目录存在文件监听兼容性问题，若项目放在Windows磁盘（如C:\xxx），WSL无法实时检测文件变更。把项目迁移到WSL本地目录（例如~/projects/your-react-app），再通过VS Code的WSL远程连接打开该目录，重新启动npm start。

2. 修复WSL目录权限 #

确保WSL对项目目录拥有完整读写权限，执行以下命令：

sudo chown -R $USER:$USER ~/projects/your-react-app

3. 升级react-scripts至最新版本 #

旧版本react-scripts可能存在WSL兼容bug，执行升级命令：

npm install react-scripts@latest

4. 调整CHOKIDAR配置方式 #

直接在package.json脚本中设置环境变量可能在WSL中不生效，改用.env文件配置：
在项目根目录创建.env文件，添加：

CHOKIDAR_USEPOLLING=true
CHOKIDAR_INTERVAL=1000

保存后重启npm start。

5. 优化VS Code自动保存设置 #

若VS Code设置了自动保存延迟，会导致WSL无法及时捕获文件变更。打开VS Code设置，搜索Files: Auto Save，设置为afterDelay并将延迟调至最低（如100ms），或选择onFocusChange模式。

6. 排查防火墙/杀毒软件拦截 #

Win11系统防火墙或第三方杀毒软件可能拦截WSL与Windows之间的文件监听通信，临时关闭相关软件测试是否恢复热重载功能。

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