Next.js 中无法访问 Etherjs“窗口”对象

Question

我有一个相对基本的项目，使用 Solidity 和 React 使用 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 signer。

拉出我有限的头发试图解决这个问题，任何帮助将不胜感激。

Answer 1

我在坚持使用我的功能组件的同时成功地完成了这项工作。

我在其中useEffect添加了一条语句来检查window对象是否未定义：

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。