React项目使用ethers报错：'ethers' is not defined no-undef

问题分析 #

你遇到的'ethers' is not defined错误，核心原因是ethers v6的API和导入逻辑与教程使用的v5完全不兼容，同时React环境下使用CommonJS的require语法会触发process is not defined等浏览器不支持的Node.js变量错误。

解决方案 #

1. 适配ethers v6的导入与API调用 #

ethers v6废弃了v5中ethers.providers、ethers.Contract等嵌套结构，改为直接导出命名成员，同时部分API名称和调用方式有变更，修改App.js如下：

import { useEffect, useState } from 'react';
// 替换原ethers导入，直接引入需要的成员
import { BrowserProvider, Contract, parseEther } from 'ethers';
import './App.css';
import contract from './Contracts/NFTCollectible.json';
const contractAddress = "0x0024786Eb4E2FF93b17C22EddeA2573F883FEb8d";
const abi = contract.abi;

function App() {
const [currentAccount, setCurrentAccount] = useState(null);

// ... 保留checkWalletIsConnected、connectWalletHandler函数不变

const mintNftHandler = async () => { 
  try {
      const { ethereum } = window;
      
      if (ethereum){
          // v6中用BrowserProvider替代v5的Web3Provider
          const provider = new BrowserProvider(ethereum);
          // v6中getSigner是异步方法，需加await
          const signer = await provider.getSigner();
          // 直接用Contract构造函数，无需ethers前缀
          const nftContract = new Contract(contractAddress, abi, signer);
          
          console.log("Initialize payment!");
          // 直接用parseEther，无需ethers前缀
          let nftTxn = await nftContract.mintNFTs(1, { value: parseEther("0.01") });
          
          console.log("Mining... please wait!");
          await nftTxn.wait();
          
          console.log(`Mined, see transaction https://sepolia.etherscan.io/tx/${nftTxn.hash}`);
          
      }else{
          console.log("Ethereum object doesn't exist.");
      }
  }
  catch (err) {
      console.log(err);
  }
}

// ... 保留connectWalletButton、mintNftButton、useEffect及return部分不变
}

export default App;

2. 清理不必要的依赖 #

hardhat-ethers是Hardhat框架的后端插件，前端项目无需安装；rn-nodeify、stream、path是Node.js/React Native专属依赖，也可移除：

npm uninstall hardhat-ethers rn-nodeify stream path

3. 解决ESLint的no-undef警告（若仍存在） #

如果修改后仍出现该警告，在项目根目录创建.eslintrc文件，添加全局变量声明：

{
  "extends": "react-app",
  "globals": {
    "ethers": "readonly"
  }
}

4. 重置依赖并启动项目 #

rm -rf node_modules package-lock.json
npm install
npm start

关键提示 #

• 若不想修改大量代码，可直接降级到ethers v5版本：npm install ethers@5，即可适配教程中的v5语法。
• React项目必须优先使用ES模块的import语法，禁止使用require，否则会触发浏览器环境不支持的Node.js内置变量错误。

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