React（Create React App）集成Stellar SDK时Babel报错求助

我明白你现在遇到的麻烦——用Create React App开发Stellar Web应用时，集成官方JS SDK后出现了Babel相关的模块缺失错误，而且删了node_modules重装也没用。别着急，咱们一步步来解决这个问题：

问题分析 #

这个错误Can't resolve 'babel-runtime/helpers/interop-require'来自Stellar SDK依赖的js-xdr库，它使用了旧版本的Babel helper函数，而Create React App默认的Babel配置没有包含这个依赖，或者版本不匹配导致找不到模块。

解决方案 #

1. 安装缺失的babel-runtime依赖 #

首先试试最简单的方法，直接安装报错里提到的缺失包：

npm install babel-runtime --save

如果用yarn的话：

yarn add babel-runtime

安装完成后重启开发服务器，看看问题是否解决。

2. 升级Stellar SDK到最新版本 #

你当前使用的stellar-sdk@0.8.0是比较旧的版本，它依赖的js-xdr版本可能存在兼容性问题。尝试升级到最新版SDK：

npm install stellar-sdk@latest --save

新版本的SDK通常会更新依赖库，修复这类兼容性问题。

3. 让Create React App转译第三方依赖库 #

如果上面两步都没用，那可能是因为Create React App默认只转译src目录下的代码，不会处理node_modules里的第三方库，而js-xdr的代码需要被Babel转译。这时候可以用react-app-rewired来修改CRA的配置，不需要eject：

步骤1：安装依赖

npm install react-app-rewired customize-cra --save-dev

步骤2：创建配置文件

在项目根目录新建config-overrides.js文件，内容如下：

const { override, babelInclude } = require('customize-cra');
const path = require('path');

module.exports = override(
  // 让Babel转译指定的第三方库
  babelInclude([
    path.resolve('src'), // 保留原有的src目录转译
    path.resolve('node_modules/js-xdr'),
    path.resolve('node_modules/stellar-sdk')
  ])
);

步骤3：修改package.json的scripts

把原来的react-scripts替换成react-app-rewired：

"scripts": {
  "build-css": "node-sass-chokidar src/ -o src/",
  "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
  "start-js": "react-app-rewired start",
  "start": "npm-run-all -p watch-css start-js",
  "build-js": "react-app-rewired build",
  "build": "npm-run-all build-css build-js",
  "test": "react-app-rewired test --env=jsdom",
  "eject": "react-scripts eject"
}

步骤4：重启开发服务器

现在重新启动项目，应该就能正常加载Stellar SDK了。

4. 最后手段：Eject Create React App（不推荐） #

如果以上方法都无效，你可以考虑eject CRA（注意：eject后无法再接收CRA的官方更新），然后修改Babel配置：

1. 执行npm run eject
2. 在项目根目录找到.babelrc或者babel.config.js，添加babel-plugin-transform-runtime插件：

{
  "plugins": ["transform-runtime"]
}

3. 重新安装依赖并启动项目。

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