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._pile 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" ponent="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>
  );
}

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._pile 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" ponent="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>
  );
}

• javascript
• node.js
• next.js
• web3js

Share Improve this question Follow edited Oct 27, 2022 at 16:14 TylerH 21.1k7979 gold badges7979 silver badges114114 bronze badges asked Oct 27, 2022 at 12:39 Marisa KirisameMarisa Kirisame 6555 bronze badges 2

• Did you follow the setup options? github./web3/web3.js#usage-with-typescript (if you are using ts). – Jeremy Rajan Commented Oct 27, 2022 at 19:00
• @JeremyRajan unfortunately I'm not using ts – Marisa Kirisame Commented Oct 27, 2022 at 20:30

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

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 [email protected]

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

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

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

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.