新建Next.js 11官方模板项目启动开发服务器出现全局CSS导入报错

报错原因 #

该问题是Next.js 11.1.1版本的已知兼容性缺陷，仅在Windows系统环境下触发：该版本对全局CSS引入的文件路径匹配逻辑存在问题，无法识别Windows系统默认的反斜杠路径分隔符，就算你没有修改初始化模板的代码，确实是在pages/_app.js中引入全局CSS，也会被系统判定为非法引入位置，触发报错。

解决方案 #

• 方案1（最推荐）：升级Next.js版本
  直接执行命令npm i next@12.0.0升级到已修复该问题的稳定版本，依赖安装完成后重新执行npm run dev即可正常启动开发服务。
• 方案2：适配当前版本无需升级
  若暂时不想调整Next.js版本，可在项目根目录新建next.config.js文件，添加如下配置：

  module.exports = {
    webpack: (config) => {
      config.watchOptions = {
        poll: 1000,
        aggregateTimeout: 300
      }
      return config
    }
  }
  

  配置保存后重启开发服务即可解决报错。
• 方案3：排查项目路径
  确认项目存放的完整路径没有中文、特殊符号或空格，若存在这类字符可以调整为全英文无特殊字符的路径，再重启服务验证。

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