react-scripts 4.0.3 出现Module parse failed需额外loader处理加载器结果报错

该报错是react-scripts 4.0.3内置的低版本react-refresh热更新插件缺陷和项目路径特殊字符共同导致的：

• 项目存放路径包含未被转义的英文单引号（你给出的路径中Foysal's Personal Directory里的'就是诱因）
• react-scripts 4.0.3绑定的@pmmmwh/react-refresh-webpack-plugin版本存在逻辑缺陷，生成热更新注入代码时会直接拼接本地路径，路径中的单引号会打断字符串语法结构，导致生成的代码本身存在语法错误，webpack解析时就会抛出Unexpected token的异常。

• 方案1（最简便无副作用）：修改项目存放路径，移除路径中的所有特殊字符（包括英文单引号、空格、非ASCII字符等），比如将Foysal's Personal Directory改为纯英文无特殊符号的名称，重新安装依赖后启动项目即可恢复正常。
• 方案2（无需修改路径）：通过react-app-rewired + customize-cra覆盖react-scripts的默认打包配置，修复loader规则：
  1. 安装工具依赖：npm install react-app-rewired customize-cra --save-dev
  2. 项目根目录新建config-overrides.js，写入以下配置：

  const { override, adjustBabelLoader } = require('customize-cra');
  
  module.exports = override(
    adjustBabelLoader(loader => {
      loader.exclude = /node_modules(?!\/react-refresh)/;
      return loader;
    })
  );
  

  3. 修改package.json中的scripts命令，将所有react-scripts开头的命令替换为react-app-rewired，比如：

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test"
  }
  

  重启项目即可生效。
• 方案3（版本升级）：将react-scripts升级到5.0.0及以上版本，新版本已经修复了react-refresh的路径转义缺陷，升级后重新安装依赖即可。注意升级前做好依赖兼容检测，避免其他配套依赖出现版本冲突。

内容的提问来源于stack exchange，提问作者Foysal Ahmed Emon