导入web3到next js会报错

我正在使用 next js 和 Material ui 构建一个用于学习的演示 dapp。我已经安装了元掩码，到目前为止我只能设置一个“连接到钱包”按钮。

我陷入了必须导入 Web3 构造函数的困境。我的代码如下所示：

我的包 json 的屏幕截图

作为开发人员，我也下载了一些无用的东西，因为我认为他们可以解决问题，但他们没有。

这是我收到的错误：

错误

这是整个错误：

服务器错误 类型错误：无法设置仅具有 # 的属性请求 吸气剂

生成页面时发生此错误。任何控制台日志都会 显示在终端窗口中。调用栈 文件:///C:/projects/BC/vending-machine/node_modules/abortcontroller-polyfill/dist/polyfill-patch-fetch.js （529:18） 文件:///C:/projects/BC/vending-machine/node_modules/abortcontroller-polyfill/dist/polyfill-patch-fetch.js (542:5) 文件:///C:/projects/BC/vending-machine/node_modules/abortcontroller-polyfill/dist/polyfill-patch-fetch.js (3:3) 对象。 文件:///C:/projects/BC/vending-machine/node_modules/abortcontroller-polyfill/dist/polyfill-patch-fetch.js (4:3) Module._compile 节点：内部/模块/cjs/loader (1155:14) Object.Module._extensions..js 节点：internal/modules/cjs/loader (1209:10) Module.load 节点：内部/模块/cjs/loader (1033:32) Function.Module._load 节点：内部/模块/cjs/loader (868:12) Module.require 节点：内部/模块/cjs/loader (1057:19) 需要 节点：内部/模块/cjs/helpers (103:18)

请我已经尝试了一切。我希望有人能给出答案。如果您需要更多信息或屏幕截图或代码或任何东西请告诉我。就使用 Web3 而言，我只是简单地尝试导入它。我什至无法在不出现这些错误的情况下导入该死的东西。

这是我导入 web3 的地方

import * as React from "react";
import AppBar from "@mui/material/AppBar";
import Box from "@mui/material/Box";
import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography";
import Button from "@mui/material/Button";
import useStatus from "../custom-hooks/useStatus";
import { Alert } from "@mui/material";
import { useState } from "react";
import Web3 from "web3";

export default function ButtonAppBar() {
  const [error, setError] = useState("");
  const { connected } = useStatus(setError);
  const connectClickHandler = async () => {
    if (!connected && typeof window.ethereum !== "undefined") {
      ethereum
        .request({ method: "eth_requestAccounts" })
        .then(() => {
          //
        })
        .catch((err) => {
          setError(err.message);
        });
    }
  };
  return (
    <Box sx={{ flexGrow: 1 }}>
      <AppBar position="static">
        <Toolbar>
          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
            Vending Machine
          </Typography>
          <Button
            variant={connected ? "disabled" : "inherit"}
            onClick={connectClickHandler}
          >
            connect wallet
          </Button>
        </Toolbar>
      </AppBar>
      {error && <Alert severity="error">{error}</Alert>}
    </Box>
  );
}

我认为这与最近的 web3 1.8 版本有关。 至少我在 Next.js 中的无服务器函数中使用它时遇到了同样的问题。
降级 1.7.4 为我解决了这个问题。

npm install [email protected]