Next.js项目报错Module not found: Can't resolve '@styles/globals.css'求助

一、解决“Module not found: Can't resolve '@styles/globals.css'”错误 #

• 确认路径别名配置文件存在且正确
  项目根目录下需有jsconfig.json（JS项目）或tsconfig.json（TS项目），配置内容需包含@styles的路径映射，示例：

  {
    "compilerOptions": {
      "baseUrl": ".",
      "paths": {
        "@styles/*": ["styles/*"]
      }
    }
  }
  

  确保baseUrl设为.，paths里的映射路径和实际styles文件夹位置一致。
• 核对文件路径与拼写
  检查项目根目录下是否存在styles文件夹，且内部有globals.css文件，注意文件名大小写（Linux/macOS系统大小写敏感），避免拼写错误。
• 重启开发服务器
  修改配置文件后，需停止当前npm run dev进程，重新启动服务器，让Next.js加载新的路径配置。

二、解决next.config.js中module关键字不被编辑器识别的问题 #

• 检查文件扩展名
  确保配置文件名为next.config.js，而非next.config.ts（TS文件默认更倾向ES模块语法，会导致CommonJS的module不被识别）。
• 切换编辑器语言模式
  打开next.config.js后，点击编辑器右下角的语言模式选项，选择“JavaScript”，而非纯文本或其他模式，编辑器会正确识别CommonJS语法关键字。
• 检查package.json的模块类型配置
  如果项目package.json中存在"type": "module"，项目会默认启用ES模块，此时module.exports语法不被支持，可二选一解决：
  1. 删除package.json中的"type": "module"字段；
  2. 将next.config.js的导出语法改为ES模块格式：

     export default nextConfig;
     

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