使用ThirdWeb开发应用时遭遇Babel classProperties语法错误的解决求助

我之前也碰到过一模一样的问题！当时折腾了好一会儿，终于找到几个靠谱的解决办法，分享给你：

核心原因 #

ThirdWeb的SDK里用到了还没被你的Babel配置支持的实验性语法classProperties，所以需要手动启用对应的转换插件。

解决方案步骤 #

1. 安装必要的Babel插件 #

首先安装两个关键的Babel插件（第二个是防止后续可能出现的私有属性相关错误）：

npm install --save-dev @babel/plugin-proposal-class-properties @babel/plugin-proposal-private-property-in-object
# 如果你用Yarn的话：
# yarn add --dev @babel/plugin-proposal-class-properties @babel/plugin-proposal-private-property-in-object

2. 配置Babel以启用插件 #

根据你的项目类型修改Babel配置文件：

情况1：自定义Babel配置（比如babel.config.js或.babelrc）

在配置文件的plugins数组中添加刚安装的插件：

// babel.config.js示例
module.exports = {
  presets: [
    // 保留你现有的presets，比如'@babel/preset-react'、'@babel/preset-env'等
  ],
  plugins: [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-private-property-in-object"
  ]
};

情况2：Create React App（CRA）项目

CRA默认隐藏了Babel配置，你可以通过craco来扩展配置：

• 先安装craco：

npm install @craco/craco --save-dev

• 在项目根目录创建craco.config.js：

module.exports = {
  babel: {
    plugins: [
      "@babel/plugin-proposal-class-properties",
      "@babel/plugin-proposal-private-property-in-object"
    ]
  }
};

• 修改package.json里的启动命令，把react-scripts替换成craco：

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test"
}

3. 额外排查步骤 #

如果上面的方法还没解决问题，可以试试：

• 升级ThirdWeb依赖：项目可能用了旧版本的SDK，新版本可能已经修复了转译问题：

npm install @thirdweb-dev/react @thirdweb-dev/sdk --save

• 清除缓存和重新安装依赖：

rm -rf node_modules package-lock.json
npm install

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