Importing web3 to next js results in error

Question

I am using next.js and material ui to build a demo dapp for learning. I have metamask installed and so far I can only setup a "connect to wallet" button.

I am stuck at a point where I have to import Web3 constructor. Here is how my code looks like:

Screenshot of my package json

I have downloaded some useless stuff too as devDs because I thought they would solve the problem but they didn't.

This is the error that I am getting:

The error

This is the entire error:

Server Error TypeError: Cannot set property Request of # which has only a getter

This error happened while generating the page. Any console logs will be displayed in the terminal window. Call Stack file:///C:/projects/BC/vending-machine/node_modules/abortcontroller-polyfill/dist/polyfill-patch-fetch.js (529:18) file:///C:/projects/BC/vending-machine/node_modules/abortcontroller-polyfill/dist/polyfill-patch-fetch.js (542:5) file:///C:/projects/BC/vending-machine/node_modules/abortcontroller-polyfill/dist/polyfill-patch-fetch.js (3:3) Object. file:///C:/projects/BC/vending-machine/node_modules/abortcontroller-polyfill/dist/polyfill-patch-fetch.js (4:3) Module._compile node:internal/modules/cjs/loader (1155:14) Object.Module._extensions..js node:internal/modules/cjs/loader (1209:10) Module.load node:internal/modules/cjs/loader (1033:32) Function.Module._load node:internal/modules/cjs/loader (868:12) Module.require node:internal/modules/cjs/loader (1057:19) require node:internal/modules/cjs/helpers (103:18)

Please I have tried everything. I hope someone has the answer. If you need anymore information or screenshots or code or anything tell me. As far as using Web3 goes, I am only simply trying to import it. I can't even import the damn thing without getting these errors.

This is where I am importing 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>
  );
}

Answer 1

I think it's something to do with the recent web3 1.8 version. At least I had the same issue when using it in serverless functions within Next.js.
Downgrading the 1.7.4 solved it for me.

npm install web3@1.7.4

Answer 2

next.js works well with web3js if you use node 18. Heres the post on github https://github.com/web3/web3.js/issues/5601#issuecomment-1310157940

if you face any other issues feel free to comment in the thread.

Answer 3

For anyone facing this, either check the other answer about using another version of web3 or use ethers js. https://www.google.com/url?sa=t&source=web&cd=&ved=2ahUKEwiW9Yy-7Yf7AhV4gv0HHazMBt8QFnoECA0QAQ&url=https%3A%2F%2Fdocs.ethers.io%2Fv5%2F&usg=AOvVaw0K35ZXh2W0l39XPnBhIoxu

Answer 4

if you also downgrade nextjs version to 12.3.0, the web3js at version 1.8 works fine. I don't know why but for me worked. Cheers.