React项目无法加载SCSS文件，报Cannot read properties of undefined (reading 'pop')

问题现象 #

在macOS系统上使用Docker运行Next.js项目，构建完成后再次启动时出现异常：所有CSS文件可正常导入，但SCSS文件均无法加载。Docker控制台与Chrome开发者工具均抛出相同错误：Cannot read properties of undefined (reading 'pop')，错误追踪指向SCSS文件的Webpack加载链路。

Docker错误日志 #

2023-10-25 16:38:40  ✓ Compiled /not-found in 1372ms (2783 modules) 
2023-10-25 16:38:40  ⚠ Fast Refresh had to perform a full reload due to a runtime error. 
2023-10-25 16:38:58  ⨯ ./src/components/background/background.scss.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[12].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[12].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[12].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[12].oneOf[13].use[5]!./src/components/background/background.scss 
2023-10-25 16:38:58 Cannot read properties of undefined (reading 'pop') 
2023-10-25 16:38:58  
2023-10-25 16:38:58 Import trace for requested module: 
2023-10-25 16:38:58 ./src/components/background/background.scss.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[12].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[12].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[12].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[12].oneOf[13].use[5]!./src/components/background/background.scss 
2023-10-25 16:38:58 ./src/components/background/background.scss 
2023-10-25 16:38:58 ./src/components/background/background.tsx 
2023-10-25 16:38:58 ./src/app/page.tsx 

Chrome控制台错误日志 #

./src/components/background/background.scss.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[12].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[12].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[12].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[12].oneOf[13].use[5]!./src/components/background/background.scss Cannot read properties of undefined (reading 'pop')

项目nextConfig配置 #

/** @type {import('next').NextConfig} */

// Adding SASS
const path = require('path')
const nextConfig = {
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
}

module.exports = nextConfig

排查方案 #

• 对齐Docker与本地依赖版本：确保Docker容器内安装的sass（或node-sass）版本与本地开发环境完全一致，Next.js内置的sass-loader对依赖版本敏感度高，版本不匹配易引发加载链路异常。
• 清理Docker缓存：构建镜像时添加--no-cache参数，同时删除旧容器、镜像后重新构建，避免缓存的旧依赖干扰。
• 验证SCSS路径与导入逻辑：检查SCSS文件的导入路径是否正确，确认nextConfig中includePaths配置的styles目录真实存在，且SCSS文件的导入规则符合配置要求。
• 禁用SCSS源映射：在nextConfig的sassOptions中添加sourceMap: false，部分场景下源映射会导致resolve-url-loader触发pop调用错误，修改后配置如下：

  const path = require('path')
  const nextConfig = {
    sassOptions: {
      includePaths: [path.join(__dirname, 'styles')],
      sourceMap: false,
    },
  }
  module.exports = nextConfig
  

• 检查自定义Webpack配置：若项目修改过Webpack配置，确认css-loader、postcss-loader、sass-loader的顺序和参数是否正确，Next.js默认loader链无需手动调整，自定义配置可能破坏原有逻辑。

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