walletconnect v1 升级到v2 问题汇总-五八三

umi + react 17

初始项目

公司有关web3 项目，初期只支持 MetaMask 和 WalletConnect v1 的钱包关联，随着日积月累，项目越来越大，链接钱包的方式越来越多，前期联调完之后，大部分时间使用的Metamask，由于它是一个比较稳定的钱包，操作也比较简单。最新的功能添加了其他的钱包登录，突然发现WalletConnect 已经升级到v2，且v1 当前时间已经关闭，赶紧找官网拔文档。

注意：
“@walletconnect/modal”: “^2.6.1”,
“@walletconnect/ethereum-provider”: “^2.8.4”,
web3@1.7.0 babel-loader@8.3.0 web3@1.3.5 ethers@5.6.9

walletconnect 官网

通过walletconnect官网上文档

根据官网文档，打算使用@walletconnect/ethereum-provider–> 申请projectId，
使用ethereum-provider 直接将代码改为如下

// import WalletConnectProvider from '@walletconnect/web3-provider';
import { EthereumProvider } from '@walletconnect/ethereum-provider'
...
const [wcProvider, setWcProvider] = useState<any>();
...
const connectWcProvider = async () => {
  // console.log('===provie=', wcProvider)
  if(wcProvider) {
    return wcProvider;
  }
  console.log('===provie=2', wcProvider)
  const newProvider = await EthereumProvider.init({
    projectId: static_wc_projectId, // required
    chains: [1], // required
    showQrModal: true, // requires @walletconnect/modal
    methods: [
      "eth_sign",
      "personal_sign",
      "eth_chainId"
    ]
  });
  setWcProvider(newProvider);
  return newProvider;
};

const connectWallet = (type: string) => {

    let newProvider: any = wcProvider;
    if (!newProvider) {
      newProvider = await connectWcProvider();
    }
    const newWeb3 = new Web3(newProvider);
    try {
      await newProvider.connect();
      // const accounts = await newProvider.enable();
      const accounts = newProvider.accounts;
      console.log('provei---accounts, ', accounts, newWeb3, web3)
    } catch (e) {
      console.error(e)
      setWalletType(userInfo.walletType);
    }
}

问题汇总

启动报错

通过网上各种查找资料，

解决方案一：添加 file-loader

.umijs.ts 文件中，添加配置

chainWebpack: (config) => {
  config.module
    .rule('js')
    .test(//@walletconnect/ethereum-provider/dist/*.(js)$/)
    .use('file-loader')
    .loader(require.resolve('file-loader'))
},

结果：

最终解决方案：在.umijs.ts 或 config.ts 添加 babel-loader, 我用的是babel-loader@8.3.0

config.module
  .rule('walletconnect')
  .test(/node_modules[\/]@walletconnect/)
  .use('babel-loader')
  .loader('babel-loader')
  .options({
    presets: [
      ['@babel/preset-env', { modules: false }]
    ]
  });

问题二 `Connot find module 'webpack/lib/ModuleFilenameHelper.js'`

webpack 版本 4.42.1

解决方案：

由于使用的是全局的 webpack，找不到某些目录，将全局的指向自己当前的项目即可,
在当前项目下执行 npm link webpack，

问题三 `Module parse failed: Unexpected token`

解决方案： babel-loader or 其他的版本不对，升级or降低版本

问题四 npm run build

想起来我本地没开代理， walletConnect 必须要外网才可以

chainWebpack: NODE_ENV === 'development' ? (config) => {
  config.module
    .rule('walletconnect')
    .test(/node_modules[\/]@walletconnect/)
    .use('babel-loader')
    .loader('babel-loader')
    .options({
      presets: [
        ['@babel/preset-env', { modules: false }]
      ]
    });
  // config.module
  //   .rule('web3')
  //   .test(/node_modules[\/]web3[\/]dist/)
  //   // .exclude.add(/node_modules[\/]web3[\/]dist[\/]web3.min.js/).end()
  //   .use('babel-loader')
  //   .loader('babel-loader')
  //   .options({
  //     presets: [
  //       ['@babel/preset-env', { modules: false }]
  //     ]
  //   })
  // config.module.rules.push({
  //   test: /.es.js$/,
  //   loader: 'babel-loader',
  //   exclude: /(node_modules)/
  // })
} : webpackPlugin