如何修复create-react-app创建React应用时反复出现的Module parse failed错误？

采用「从旧项目拷贝@pmmmwh（输入笔误，实际为@pmmmwh/react-refresh-webpack-plugin）、babel-loader文件夹替换当前项目依赖」的临时修复方式，本质是跳过了依赖安装阶段的版本匹配校验，没有从根源解决依赖拉取、版本兼容的核心问题，因此修复效果无法长期维持，错误必然反复复发。

核心解决步骤 #

• 彻底清理本地残留依赖与缓存
  • 全局卸载所有历史安装的create-react-app，避免本地旧版本脚手架的逻辑干扰：
    npm uninstall -g create-react-app
  • 清空包管理器的本地损坏缓存，避免拉取到截断、哈希校验不通过的依赖包：
    npm cache clean --force
yarn cache clean
pnpm store prune
  • 校验本地Node版本与CRA的兼容性：CRA 5.x 正式版对Node版本的兼容范围为14.0~18.0，跨大版本使用过高的Node版本（如Node20+）会直接触发webpack、babel-loader的原生模块解析兼容问题，也就是对应的Module parse failed报错；如果版本不匹配，通过nvm切换到Node16.20.x LTS版本后再操作。
• 从根源修正依赖安装逻辑
  • 不要依赖不稳定的第三方公共镜像源拉取CRA核心依赖，避免出现包版本错配、文件缺失的问题，初始化阶段使用官方默认的依赖源完成拉取。
  • 初始化新项目时不要调用全局安装的CRA，强制使用npx拉取最新稳定版脚手架执行初始化，避免本地旧版本的残留逻辑干扰：
    npx create-react-app 你的项目名称
  • 初始化完成后手动校验关键依赖的版本匹配性，将react-scripts版本固定到最稳定的5.0.1版本，通过依赖树命令检查babel-loader、@pmmmwh/react-refresh-webpack-plugin是否与react-scripts的内置peer依赖版本完全匹配，不存在版本悬空问题：
    npm ls babel-loader @pmmmwh/react-refresh-webpack-plugin
• 规避反复触发错误的操作习惯
  • 不要手动修改node_modules目录下的文件做临时修复，这类修改不会被package-lock.json文件记录，每次重新安装依赖时都会被覆盖，错误自然会重复出现。
  • 如果业务必须使用高版本Node环境，给启动脚本增加OpenSSL兼容参数，解决高版本Node下webpack5的模块解析兼容问题：安装cross-env依赖后，将package.json中的start脚本修改为
    "start": "cross-env NODE_OPTIONS=--openssl-legacy-provider react-scripts start"

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