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

Question

我有一个相对基本的项目，使用，使用作为一个页面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。