React项目运行报错：sass-loader与resolve-url-loader类型错误求助

问题概述 #

为学习React及完成大学项目需求，从朋友处获取两个React项目，本地运行时始终出现两类关于sass-loader和resolve-url-loader的错误。项目在朋友电脑上可正常运行（仅存在无关JS错误），已尝试更新所有loader、删除重装依赖、重新安装node_modules及修改webpack.config等方案，问题仍未解决。

报错信息 #

错误1：sass-loader相关 #

ERROR in ./src/base-style.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[2]!./node_modules/react-scripts/node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[7].use[3]!./node_modules/react-scripts/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[4]!./src/base-style.scss)
Module Error (from ./node_modules/react-scripts/node_modules/sass-loader/dist/cjs.js):
Cannot read properties of undefined (reading 'indexOf')

错误2：resolve-url-loader相关 #

ERROR in ./src/base-style.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[2]!./node_modules/react-scripts/node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[7].use[3]!./node_modules/react-scripts/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[4]!./src/base-style.scss)
Module build failed (from ./node_modules/react-scripts/node_modules/resolve-url-loader/index.js):
TypeError: Cannot read properties of undefined (reading 'replace')
    at process (M:\Uni\SofN\frontend\node_modules\react-scripts\node_modules\resolve-url-loader\lib\engine\postcss.js:28:19)
    at Object.resolveUrlLoader (M:\Uni\SofN\frontend\node_modules\react-scripts\node_modules\resolve-url-loader\index.js:213:14)

项目devDependencies配置 #

"devDependencies": {
    "@babel/plugin-proposal-private-property-in-object": "^7.16.7",
    "css-loader": "^6.8.1",
    "gh-pages": "^5.0.0",
    "node-sass": "^7.0.3",
    "resolve-url-loader": "^5.0.0",
    "sass": "^1.69.4",
    "sass-loader": "^13.3.2",
    "style-loader": "^3.3.3",
    "webpack": "^5.89.0"
}

解决方案 #

• 移除冲突的sass依赖：你同时安装了node-sass和sass（dart-sass），两者会导致loader调用混淆。node-sass已停止维护，建议完全移除它：

  npm uninstall node-sass
  npm install
  

• 清理手动安装的resolve-url-loader：报错信息显示项目实际使用的是react-scripts内置的resolve-url-loader，你手动安装的版本（5.0.0）与内置版本冲突，导致解析错误。移除手动安装的包：

  npm uninstall resolve-url-loader
  npm cache clean --force
  npm install
  

• 检查SCSS文件的资源路径：resolve-url-loader的报错通常和SCSS中引用的资源（如背景图、字体）路径有关。检查base-style.scss中的相对路径是否正确，避免引用不存在的文件或使用错误的路径层级（比如多写/少写../）。

• 同步依赖版本：朋友的电脑能正常运行，说明其依赖版本完全兼容。获取朋友的package-lock.json或yarn.lock文件，替换本地文件后执行：

  npm ci
  

  该命令会严格按照lock文件安装依赖，确保版本与朋友的环境完全一致。

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