React项目使用react-speech-recognition报regeneratorRuntime未定义错误

所有报错本质是大版本错配导致的编译链路不兼容，和你局部安装新版Babel没有关系：

• 项目锁定的react-scripts@1.1.5是2018年发布的CRA 1.x版本，内置整套Babel 6的编译链路，对Babel 7生态的发布包、ES2020+语法的解析能力完全缺失
• 你接入的react-speech-recognition@3.7.0是基于Babel 7编译发布的开源模块，内部引用了大量Babel 7专属的转译helper、顶层语法规则，老版react-scripts的编译逻辑根本无法解析这类代码，触发的报错会被初步排查判定为“Babel版本问题”，但你根目录单独安装的新版Babel完全没进入CRA1的编译流程，自然不会生效
• 当前devDependencies存在新旧Babel混装的冲突：同时存在Babel 6时代的babel-preset-es2015、babel-preset-stage-0，和Babel 7的@babel/core、@babel/plugin-transform-runtime，两套编译规则叠加会进一步放大解析异常

方案1：零重构成本（优先推荐，适合不想动老项目编译配置的场景） #

• 把react-speech-recognition降级到兼容Babel 6编译链路的历史版本，执行安装命令：npm install react-speech-recognition@3.1.2 --save
• 卸载手动安装的冲突类Babel依赖，避免和CRA1内置的编译逻辑打架：
  • 需要卸载的包：@babel/plugin-transform-runtime、@babel/core、babel-loader@8
  • 降级匹配的loader版本：安装babel-loader@7.1.5对齐CRA1的版本要求

方案2：保留新版语音识别功能（适合不想降级依赖的场景） #

操作前先确认老项目的Node.js运行环境，避免操作后部署链路报错

• 先清理devDependencies里所有Babel 6时代的遗留配置包：babel-preset-es2015、babel-preset-stage-0、babel-polyfill
• 在项目根目录新建.babelrc文件，手动指定Babel 7的编译规则，覆盖CRA1内置的默认编译配置：

  {
    "presets": ["@babel/preset-env", "@babel/preset-react"],
    "plugins": ["@babel/plugin-transform-runtime"]
  }
  

• 安装上述配置缺失的Babel 7依赖：npm install --save-dev @babel/preset-env @babel/preset-react core-js@3 regenerator-runtime
• 修正入口文件的polyfill引入逻辑，在src/index.js最顶部替换原来的babel-polyfill引用，加入：

  import "core-js/stable";
  import "regenerator-runtime/runtime";
  

• 不要盲目把react-scripts升到最新大版本：react-scripts 5.x要求Node.js 14+版本运行环境，老项目如果用Node 12部署的话，升级后会直接出现构建失败
• 单独在根目录安装新版Babel包对CRA1项目完全无效：CRA1的编译逻辑会优先读取自身内置在node_modules里的Babel可执行文件，根目录安装的依赖不会被调用
• 这类“解析依赖文件时报Babel语法错误”的问题，90%都不是依赖本身的代码问题，而是项目编译链路的Babel版本和依赖发布时用的Babel版本差了一个大版本导致的，不需要修改业务代码逻辑就能解决

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