在 Next.js 中无法访问 Ethers Js“窗口”对象答案

【问题标题】：Etherjs "window" object not accessible in Next.js在 Next.js 中无法访问 Ethers Js“窗口”对象
【发布时间】：2021-10-07 04:41:06
【问题描述】：

我有一个使用 Solidity 的相对基本的项目，并使用 Create React App 作为单页 dApp 工作。但是，我现在正试图将其移至 Nextjs 并遇到了一个障碍，我认为这与 Nextjs 所做的服务器端的事情有关。我已经删除了所有的冗余代码，只提供了足以产生错误的代码：

import { ethers, Contract } from 'ethers';
import Project from '../src/artifacts/contracts/Project.sol/Project.json';

const contractAddress = process.env.contract_address;

export default function App() {

  const provider = new ethers.providers.Web3Provider(window.ethereum);      

  console.log(provider.getSigner())

  return (
    <div className="App">
      <p>Hello!</p>
    </div>
  );

}

此错误：

window is not defined

我看到其他人建议通过这样的状态加载和设置它：

const [provider, setProvider] = useState({})

React.useEffect(() => {
   setProvider(new ethers.providers.Web3Provider(window.ethereum))
}, []);

const signer = provider.getSigner();

但这会返回：TypeError: provider.getSigner is not a function

然而如果我注释掉这段代码，刷新并让页面加载，然后取消注释代码并让热重载刷新组件我没有收到这样的错误，并且可以成功 console.log @987654330 @。

抽出我有限的头发来解决这个问题，我们将不胜感激。

【问题讨论】：

为什么你的应用需要window？您已经在导入 ethers，肯定有一个您可以传递的 Web3Provider 标识符列表。另外，如果需要“作为副作用”发生某些事情，请使用useEffect（但请记住，默认情况下它会触发after every single render。这不是副作用：它对您的应用程序的运行至关重要，所以这个状态和@ 987654334@ 是正确的函数，将您的提供者绑定为initial value。
@Mike'Pomax'Kamermans 我很早就开始接受关于 Solidity 和 React 的教育，但这就是我学会通过 Ethers 文档声明提供者的方式：docs.ethers.io/v5/migration/web3
这是仅当您从现有的 web3.js 代码迁移时的文档，因此您没有从中学习如何使用 Ethers：这是仅针对从事重构/依赖提升的人的利基文档。您是在转换现有的 web3.js 项目还是在编写新代码？
这能回答你的问题吗？ Window is not defined in Next.js React app
@Mike'Pomax'Kamermans 抱歉，我链接到了不正确的部分，文档的“入门”部分建议使用相同的方法：docs.ethers.io/v5/getting-started

标签： reactjs next.js solidity ethers.js

【解决方案1】：

我已经设法在坚持使用我的功能组件的同时完成这项工作。

在useEffect 中我包含了一个语句来检查windowobject 是否未定义：

if (typeof window.ethereum !== "undefined" || (typeof window.web3 !== "undefined")) {
   // Existing code goes here
}

然后必须确保我想在这个 if 语句之外使用的任何变量都保存到状态 以及在语句中声明的。喜欢：

const provider = new ethers.providers.Web3Provider(window.ethereum);
setProvider(provider)

这似乎解决了从 CRA 迁移到 Next 的大部分问题，我现在可以备份并运行 dApp。

【讨论】：