Next.js开发服务器无法自动刷新，需重启查看代码变更求助

之前有编号#71649994的相似问题，但当时仅单个项目出现且无解决方案，现在所有我创建的Next.js项目都存在Fast Refresh、热加载完全失效的问题：修改代码后无任何反应。使用npx create-next-app@latest创建基础应用并通过npm run dev启动开发服务器后，修改pages/index.js等文件（如修改页面title标签），服务器终端无输出，页面也无变化。

环境与问题差异 #

• 两台电脑均出现该问题：一台Windows10，一台Windows11，开发环境均为WSL2 Ubuntu+VSCode
• TypeScript与JavaScript项目均受影响，但存在一处差异：
  • TypeScript项目：修改全局导入的非CSS模块的CSS文件时，Fast Refresh可正常工作，终端有输出且页面显示加载图标
  • JavaScript项目：Fast Refresh完全失效，修改任何内容都无法触发刷新，手动刷新页面也无变化

正常工作场景 #

• npm run dev、npx next dev或yarn dev的初始构建均正常
• TypeScript编译器（tsc *.ts --watch）与Sass编译器工作正常
• npm run start启动生产服务器也无问题

使用的软件版本 #

• next 12.2.4
• vscode 1.70.0
• Ubuntu 20.04.3 LTS

配置文件 #

package.json #

{  
  "name": "js_web",  
  "version": "0.1.0",  
  "private": true,  
  "scripts": {    
    "dev": "next dev",    
    "build": "next build",    
    "start": "next start",    
    "lint": "next lint"  
  },  
  "dependencies": {    
    "next": "12.2.4",    
    "npm": "^8.16.0",    
    "react": "18.2.0",    
    "react-dom": "18.2.0"  
  },  
  "devDependencies": {    
    "eslint": "8.21.0",    
    "eslint-config-next": "12.2.4"  
  }
}

next.config.js #

/** @type {import('next').NextConfig} */
const nextConfig = {  
  reactStrictMode: true,  
  swcMinify: true,
}
module.exports = nextConfig

额外疑问 #

全局安装npm包时经常遇到EACCESS权限错误，需使用sudo才能安装，该权限问题与Next.js刷新问题在两台电脑上均存在，是否可能是配置问题导致？

求助内容 #

• 有没有相同环境但未出现该问题的用户？
• 有哪些可排查的方向？
• 是否可启用额外调试输出？

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