React项目启动与依赖安装报错问题求助

一、Node.js v18下node-sass编译失败的解决 #

node-sass已停止维护，且与Node.js版本强绑定，Node18需node-sass@7.0.0+，但更推荐替换为dart-sass（npm包名为sass），操作如下：

• 卸载原有node-sass：

  yarn remove node-sass
  # 若用npm：npm uninstall node-sass
  

• 安装sass替代：

  yarn add sass -D
  # 若用npm：npm install sass --save-dev
  

• 调整react-app-rewired配置（config-overrides.js），将node-sass替换为sass：

  module.exports = function override(config) {
    const sassRule = config.module.rules
      .find(rule => rule.oneOf)
      .oneOf.find(rule => rule.test.test('.scss'));
    sassRule.use.at(-1).options.implementation = require('sass');
    return config;
  };
  

二、Node.js v16下TypeScript版本不兼容的解决 #

降级Node16后出现TS版本冲突，多因项目TS版本与react-scripts等依赖不匹配，处理步骤：

1. 查看package.json中react-scripts版本对应的TS兼容范围（如react-scripts@5.x要求TS@4.2+），当前项目TS版本若超出范围则调整。
2. 安装与react-scripts兼容的TS版本（以TS@4.9.5为例，兼容Node16和react-scripts@5.x）：

   yarn add typescript@4.9.5 -D
   # 若用npm：npm install typescript@4.9.5 --save-dev
   

3. 清理缓存并重新安装依赖：

   # yarn环境
   yarn cache clean && rm -rf node_modules yarn.lock && yarn install
   # npm环境
   npm cache clean --force && rm -rf node_modules package-lock.json && npm install
   

三、额外排查建议 #

• 确认react-app-rewired版本与react-scripts匹配：react-scripts@5.x需react-app-rewired@2.2.x及以上版本，版本不兼容会引发配置异常。
• 用.nvmrc固定Node版本：在项目根目录创建.nvmrc文件，写入16.20.0，切换Node版本时执行nvm use即可，避免版本混乱。
• 检查Visual Studio组件：确保已安装“桌面开发使用C++”组件，编译sass时需依赖该环境，你已安装VS2017/19/22，核对组件是否齐全即可。

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