修改代码后React、Next.js、Vite均不自动更新，如何解决？

用户示例代码：

import styles from '../styles/Home.module.css'

export default function Home() {
  return (
    <div className={styles.container}>
      <h1>Hello</h1>
    </div>
  )
}

通用排查方案 #

• 确认修改的是项目实际引用的文件，避免开错目录或修改了无关副本。
• 浏览器端按Ctrl+Shift+R强制刷新，同时在开发者工具中勾选「禁用缓存」选项。
• 打开浏览器控制台（F12）检查是否有语法错误，报错会直接阻断热更新流程。

Next.js 针对性解决 #

• 删除项目根目录下的.next文件夹和node_modules/.cache目录，然后重新执行npm run dev。
• 检查next.config.js配置，确保没有设置devServer.hot: false，若有则改为true。
• 执行npm update next升级到最新稳定版，旧版本可能存在热更新相关bug。

React（Create React App）针对性解决 #

• 删除node_modules/.cache和build文件夹，重启npm start服务。
• 查看package.json的scripts字段，确认start命令为react-scripts start，未被自定义修改。
• 关闭编辑器的「安全写入」功能（如WebStorm、VS Code的相关设置），该功能可能导致文件变更无法被监听。

Vite 针对性解决 #

• 删除node_modules/.vite缓存目录，重新启动npm run dev。
• 检查vite.config.js中的server.watch.ignored配置，确保没有将修改的文件纳入忽略列表。
• Linux/macOS用户可执行以下命令提升系统文件监听限制：

  echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
  

内容的提问来源于stack exchange，提问作者Josh knon