Nextjs 13.0.2 和 Ethers 为什么我的 Provider 未定义？

Question

我正在尝试在 Nextjs 13.0.1 中像这样访问以太坊提供程序：

import { ethers } from "ethers";

export const signMessage = () => {
  
  const provider = new ethers.providers.Web3Provider(window.ethereum);
  const signer = provider.getSigner();

  try {
    signer.signMessage("Hey hey").then((result) => {
      console.log(result);
    });
  } catch (error) {
    // handle error
    console.log(error);
  }
};

但它总是给我错误：

Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'Web3Provider')

我尝试过不同的提供商，但总是收到上面的错误消息。

有人知道为什么它适用于 Nextjs 12 但不适用于 Next 13？

Answer 1

我认为您在 next13 中使用的是版本 6。如果你安装

"ethers": "^5.6.4",

在next-13中，它将起作用。

我认为您之前有版本 5 的 next-12 项目，现在在 next-13 上安装新版本

在ethers v6所有这些中

export {
    getDefaultProvider,
    Block, FeeData, Log, TransactionReceipt, TransactionResponse,
    AbstractSigner, NonceManager, VoidSigner,
    AbstractProvider,
    FallbackProvider,
    JsonRpcApiProvider, JsonRpcProvider, JsonRpcSigner,

    BrowserProvider,
    AlchemyProvider, AnkrProvider, CloudflareProvider, EtherscanProvider,
    InfuraProvider, PocketProvider, QuickNodeProvider,
    IpcSocketProvider, SocketProvider, WebSocketProvider,
    EnsResolver,
    Network
} from "./providers/index.js";

像这样导入

import { BrowserProvider } from "ethers";

const providerr = new BrowserProvider(window.ethereum);

这就是我设置组件连接的方式

const Test = () => {
  const [provider, setProvider] = useState();
  useEffect(() => {
    const browserProvider = new BrowserProvider(window.ethereum);
    setProvider(browserProvider);
  }, []);
  const connect = async () => {
    await provider.send("eth_requestAccounts");
  };
  return (
    <div>
      <button onClick={connect}>connect</button>
    </div>
  );
};

export default Test;