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

但是如果我注释掉这段代码，刷新并让页面加载，然后取消注释代码并让热重载刷新组件我没有得到这样的错误并且可以成功控制台.log {{ 1}}。

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

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。

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

1 个答案: