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](https://i.stack.imgur.com/TH6i6.png)

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](https://i.stack.imgur.com/0KvnW.png)

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

```js
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>
  );
}

```