Next.js执行npm run dev时出现Class extends value undefined报错如何解决

问题根因 #

报错触发点在Next.js内置的postcss-scss编译模块，和你写的业务代码没有关联——这也是为什么你清空所有业务引入逻辑后，报错完全没有变化的原因。这类问题基本都是本地缓存损坏、依赖版本冲突、Node环境不兼容导致的。

按优先级操作排查 #

• 第一优先级：清本地缓存
  先停掉跑着的dev服务，删掉项目根目录下的.next缓存文件夹，再执行npm cache clean --force清npm全局缓存，之后重新跑npm run dev测试。
• 第二优先级：删冗余依赖
  打开项目根目录的package.json，看看有没有手动装过postcss、postcss-scss、sass这几个独立包。Next本身已经内置了和自身版本严格匹配的编译依赖，手动装的版本不对的话，会直接覆盖内置依赖的加载路径，触发当前的类构造错误。
  要是确实装了这几个包，直接执行npm uninstall postcss postcss-scss sass卸载，再重启服务测试。
• 第三优先级：重装全量依赖
  前面两步没用的话，就删掉项目里的node_modules文件夹、对应的包锁文件（package-lock.json/yarn.lock/pnpm-lock.yaml），重新执行npm install装一遍所有依赖，再启动服务。
• 第四优先级：检查Node版本兼容性
  看看当前用的Node.js版本是不是和项目的Next版本匹配：版本太老（比如Next 13以上要求Node最低16.14）、或者用了非LTS的实验版Node，都会导致Next内置编译模块加载失败。切到Node的LTS稳定版再试就行。

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