Hardhat与React.js集成报错：ethers.providers导出未找到

错误原因 #

你遇到的export 'ethers'.'providers' was not found in 'ethers'错误，是因为当前安装的ethers.js v6版本重构了模块结构：providers不再作为ethers对象的子属性存在，而是改用了新的API命名和导入方式。

修复方案 #

方案1：适配ethers.js v6（推荐长期使用） #

修改BridgeData.js的代码，适配v6的API规范：

import { ethers } from "ethers";

const contractAddress = "0x5fc8d32690cc91d4c39d9d3abcbd16989f875707"; // 替换为你的合约地址
const contractABI = [/* 保持原ABI内容不变 */];

// 修改为async函数，因为v6中getSigner需要await
const getBridgeDataContract = async () => {
  // v6中Web3Provider改名为BrowserProvider
  const provider = new ethers.BrowserProvider(window.ethereum);
  const signer = await provider.getSigner();
  return new ethers.Contract(contractAddress, contractABI, signer);
};

export { getBridgeDataContract };

同时修改调用该函数的组件，在调用时添加await：

• BridgeForm.js的handleSubmit：

const handleSubmit = async (event) => {
  event.preventDefault();
  const contract = await getBridgeDataContract(); // 添加await
  await contract.addBridge(bridgeId, name, location, length, height, yearBuilt);
  console.log("Bridge data added successfully!");
};

• BridgeDisplay.js的handleSubmit：

const handleSubmit = async (event) => {
  event.preventDefault();
  const contract = await getBridgeDataContract(); // 添加await
  const bridgeData = await contract.getBridge(bridgeId);
  setBridge({
    name: bridgeData[0],
    location: bridgeData[1],
    length: bridgeData[2],
    height: bridgeData[3],
    yearBuilt: bridgeData[4]
  });
};

方案2：回退到ethers.js v5（快速兼容） #

如果不想修改代码，直接回退到v5版本即可：

npm uninstall ethers
npm install ethers@5.7.2

回退后原代码无需任何修改，就能正常运行。

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