Mac环境Next.js项目执行npm run dev突发异常无法启动求助

• 核心报错原因：项目使用的@zeit/next-sass及依赖的@zeit/next-css均为已废弃的样式处理依赖，不兼容Next.js 11默认启用的Webpack 5，旧插件的配置逻辑无法匹配新版Webpack的配置结构，触发Cannot set property 'styles' of undefined错误
• 次要兼容性风险：当前项目TypeScript版本为3.9.6，低于Next.js 11推荐的最低4.3.2版本，可能存在其他潜在运行异常

推荐方案（长期有效） #

Next.js 9.3及以上版本已经内置原生CSS、Sass支持，无需额外安装第三方样式处理插件，按以下步骤调整即可：

1. 卸载废弃依赖

npm uninstall @zeit/next-sass @zeit/next-css

2. 调整next.config.js配置
   删除配置中所有withSass、withCSS相关的插件引入与包裹逻辑，仅保留自定义配置项即可。如果需要配置Sass全局变量等规则，可直接通过内置的sassOptions配置实现，示例如下：

// next.config.js 参考配置
module.exports = {
  sassOptions: {
    additionalData: `@import "你的全局样式变量文件路径";`,
  },
  // 其他你原有自定义配置
}

3. 升级TypeScript到兼容版本

npm install typescript@4.3.2 --save-dev

4. 重置依赖并启动服务

rm -rf node_modules package-lock.json
npm install
npm run dev

临时过渡方案 #

如果暂时不想调整项目配置，可在next.config.js中关闭Webpack 5降级到Webpack 4运行，临时解决报错：

// next.config.js 新增配置项
module.exports = {
  webpack5: false,
  // 其他原有配置
}

注意该方案仅为临时处理方式，后续新版Next.js将逐步移除Webpack 4支持，建议优先使用推荐方案调整。

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