NextJS执行npm run dev时出现Cannot read properties of undefined (reading 'pop')错误

问题背景 #

闲置仓库数周后执行npm run dev启动NextJS应用时出现编译失败，报错指向style.scss文件的loader处理链，移除该文件后问题消失但丢失样式。已尝试更新依赖、重装Node.js（版本21.0.0），问题仍存在。

可行解决步骤 #

1. 移除next.config.js中的自定义CSS拆分配置 #

Next.js内置了成熟的CSS资源处理逻辑，自定义的splitChunks.cacheGroups规则可能与内置的CSS loader链冲突，导致loader运行时出现未定义对象调用pop的错误。

修改后的next.config.js：

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true
}

module.exports = nextConfig

2. 彻底清理缓存并重新安装依赖 #

缓存文件或损坏的依赖可能导致加载异常，执行以下命令：

• 删除依赖目录和锁文件：

  rm -rf node_modules package-lock.json
  

• 清理Next.js构建缓存：

  rm -rf .next
  

• 重新安装依赖并启动：

  npm install
  npm run dev
  

3. 降级Node.js到LTS版本 #

Node.js 21为非长期支持版本，可能与Next.js及其依赖存在兼容性问题，建议切换到v18或v20 LTS版本：

• 使用nvm切换版本（需先安装nvm）：

  nvm install 20
  nvm use 20
  

• 重复步骤2的清理和重装操作后启动应用。

4. 检查style.scss的导入路径 #

即使未手动修改文件，闲置期间依赖包结构变化可能导致@import路径失效，检查文件内所有导入语句，确保引用的文件路径正确，无不存在的资源。

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