在React中使用useEffect异步函数时遭遇Babel错误求助

问题 #

我在基于react-scripts@4.0.3和最新TypeScript的React TS项目中（正在给Uniswap仓库添加新组件），调用API并通过useEffect更新状态，组件代码如下：

const { account, chainId, provider } = useWeb3React()
const [iconClicked, setIconCLicked] = useState(false)
const [notifications, setNotification] = useState<notifI[]>([])
const [showWindow, setShowWindow] = useState(false)
const fetchData = async () => {
  try {
    const data: notifI[] = await PushAPI.user.getFeeds({
      user: `eip155:${chainId}:${account}`,
      env: 'staging',
    })
    setNotification(data)
  } catch (e) {
    console.log(e)
  }
}
useEffect(() => {
  if (account) {
    console.log('Calling user details')
    fetchData()
  }
}, [account])

运行时出现以下错误：

./node_modules/@ethereumjs/util/dist/asyncEventEmitter.js 24:41
Module parse failed: Unexpected token (24:41)
File was processed with these loaders:
 * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|     let [data, callback] = args;
|     const self = this;
>     let listeners = self._events[event] ?? [];
|     // Optional data argument
|     if (callback === undefined && typeof data === 'function') {

解决方案 #

这个错误是因为react-scripts@4.0.3内置的Babel版本不支持ES2020的??（空值合并运算符）语法，而@ethereumjs/util依赖包中使用了该语法，导致webpack无法解析。提供三种解决方法：

方法一：升级react-scripts版本 #

将react-scripts升级到v5.x版本，该版本已原生支持ES2020+语法，终端运行：

npm install react-scripts@latest
# 或使用yarn
yarn add react-scripts@latest

注意：升级后可能需要适配Uniswap仓库的其他依赖，处理潜在的兼容问题。

方法二：用react-app-rewired扩展Babel配置 #

若无法升级react-scripts，可通过react-app-rewired自定义Babel配置，添加对空值合并运算符的支持：

1. 安装所需依赖：

   npm install react-app-rewired @babel/plugin-proposal-nullish-coalescing-operator --save-dev
   # 或yarn
   yarn add react-app-rewired @babel/plugin-proposal-nullish-coalescing-operator --dev
   

2. 在项目根目录创建config-overrides.js文件，写入以下内容：

   module.exports = function override(config, env) {
     config.module.rules[0].oneOf.forEach(rule => {
       if (rule.loader && rule.loader.includes('babel-loader')) {
         rule.options.plugins.push('@babel/plugin-proposal-nullish-coalescing-operator')
       }
     })
     return config
   }
   

3. 修改package.json中的scripts命令，替换为react-app-rewired：

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

4. 重启开发服务即可生效。

方法三：降低@ethereumjs/util版本 #

查找该依赖包未使用??运算符的旧版本，安装对应版本：

npm install @ethereumjs/util@<兼容版本号>

可查看该包的版本日志，确认未引入ES2020语法的具体版本号。

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