Vite+React+TS中bitcoinjs-lib相关Wasm ESM错误解决咨询

我在ReactJS + TypeScript + Vite项目中，尝试通过助记词生成比特币地址，编写了generateAddressFromMnemonic函数。但导入tiny-secp256k1并传入BIP32Factory时，触发Vite错误："ESM integration proposal for Wasm"目前在Vite React和Typescript中不被支持。试过安装Wasm相关插件并配置Vite，但问题依旧。请问如何通过bitcoinjs-lib、bip32和bip39解决这个问题？

附代码：

import * as bip39 from 'bip39';
import * as bitcoin from 'bitcoinjs-lib';
import { BIP32Factory } from 'bip32';
import * as ecc from 'tiny-secp256k1';

const bip32 = BIP32Factory(ecc);

export const generateAddressFromMnemonic = async (mnemonic: string) => {
    const seed = bip39.mnemonicToSeedSync(mnemonic);
    const root = bip32.fromSeed(seed);
    const { address } = bitcoin.payments.p2pkh({ pubkey: root.derivePath("m/44'/1'/0'/0/0").publicKey });
    return address;
};

解决方案1：替换为纯JS/TS椭圆曲线库（推荐） #

tiny-secp256k1依赖Wasm，在Vite的ESM环境中易出现兼容性问题。推荐改用@noble/secp256k1——纯JS/TS实现的椭圆曲线库，无需Wasm，兼容性更强。

步骤： #

1. 安装依赖：

npm install @noble/secp256k1 bip39 bip32 bitcoinjs-lib

2. 修改代码适配接口：

import * as bip39 from 'bip39';
import * as bitcoin from 'bitcoinjs-lib';
import { BIP32Factory } from 'bip32';
import * as ecc from '@noble/secp256k1';

// 适配bip32所需的接口规范
const adaptedEcc = {
  ...ecc,
  sign: (hash: Uint8Array, privateKey: Uint8Array) => ecc.sign(hash, privateKey, { lowS: true }),
  verify: ecc.verify,
  derive: ecc.getPublicKey,
};

const bip32 = BIP32Factory(adaptedEcc);

export const generateAddressFromMnemonic = (mnemonic: string) => {
  const seed = bip39.mnemonicToSeedSync(mnemonic);
  const root = bip32.fromSeed(seed);
  const childKey = root.derivePath("m/44'/1'/0'/0/0");
  const { address } = bitcoin.payments.p2pkh({ pubkey: childKey.publicKey });
  return address;
};

解决方案2：调整Vite配置兼容Wasm #

若必须使用tiny-secp256k1，可通过修改Vite配置禁用Wasm的ESM提案支持：

步骤： #

1. 在vite.config.ts中添加配置：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    exclude: ['tiny-secp256k1'],
  },
  resolve: {
    alias: {
      'tiny-secp256k1': 'tiny-secp256k1/umd/tiny-secp256k1.js',
    },
  },
});

2. 确保tiny-secp256k1已安装，重启开发服务器即可。

注意：该方法可能带来性能损耗，且后续Vite版本更新可能需要调整配置。

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