React JS中使用Rete Library报错：ReferenceError: regeneratorRuntime is not defined

这个问题我之前在集成Rete的时候也踩过坑！本质原因是Rete的源码里用到了async/await这类ES6异步语法，而你的React项目没有配置好对应的转译支持——regeneratorRuntime是Babel处理异步函数时必须的运行时环境，项目里没引入它就会报这个错。下面分两种常见场景给你解决方案：

场景1：使用Create React App（CRA）搭建的项目 #

CRA默认封装了Babel配置，没法直接修改，所以我们需要借助工具来覆盖配置：

• 首先安装必要依赖：

  npm install --save-dev react-app-rewired customize-cra @babel/plugin-transform-runtime
  npm install @babel/runtime
  

• 修改package.json里的启动脚本，把react-scripts替换成react-app-rewired：

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

• 在项目根目录创建config-overrides.js文件，添加Babel插件配置：

  const { override, addBabelPlugin } = require('customize-cra');
  
  module.exports = override(
    addBabelPlugin('@babel/plugin-transform-runtime')
  );
  

• 重启你的开发服务器，应该就能解决这个报错了。

场景2：自定义Webpack/Babel配置的项目 #

如果是自己配置的Webpack和Babel，步骤更直接：

• 先安装依赖：

  npm install --save-dev @babel/plugin-transform-runtime
  npm install @babel/runtime
  

• 在你的Babel配置文件（比如babel.config.js或者.babelrc）中添加插件：

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

• 重新启动Webpack开发服务，报错应该就消失了。

额外提示：旧版Babel（Babel 6）的情况 #

如果你的项目还在使用Babel 6，那需要安装babel-polyfill来解决：

npm install babel-polyfill

然后在项目的入口文件（比如index.js）顶部添加：

import 'babel-polyfill';

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