npx create-next-app创建项目因Global CSS错误无法运行如何解决

该报错和你写的代码无关，create-next-app默认生成的项目代码本身没有问题。触发错误的核心原因是项目存放的上级目录路径包含#特殊字符：从报错日志里的路径../../#HACKYOURBIZ/test/可以看到，你当前项目放在名称带#的文件夹下，Next.js 12.2.0版本内置的webpack解析逻辑会把路径中的#识别为URL锚点，错误截断文件路径，最终误判globals.css不是从自定义_app.js文件合法导入，抛出Global CSS导入限制的错误。旧项目可以正常启动，是因为旧项目的存放路径没有带这类特殊字符。

按优先级选以下任意一种方案处理即可：

• 方案一（最快捷）：关闭当前运行的开发服务，把整个项目文件夹移动到完全不含#、?等URL特殊字符的纯英文路径下，例如D:\code\next-test这类无特殊符号的目录，不要放在带#的文件夹中。移动完成后重新执行npm run dev即可正常启动。
• 方案二（无需移动路径）：如果不想调整项目存放位置，可以直接升级Next.js到修复了该路径解析bug的稳定版本，在项目根目录执行命令：

npm install next@latest

升级完成后删除项目下的.next缓存文件夹，再重新执行启动命令即可。

• 缓存清理兜底：如果操作后仍有异常报错，先删除项目目录下的.next缓存文件夹、node_modules文件夹，重新执行npm install安装依赖后再启动服务，避免旧缓存干扰。

服务启动后不再抛出Global CSS相关错误，浏览器访问3000端口可以正常看到Next.js默认欢迎页面即为修复成功。

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