Next.js, node.js 16 TypeError: Cannot set property Request of #<Object> which has only a getter

[NishantPacharne]

This is not a Bug Report, Feature Request, or related to Documentation

• I have searched the existing issues

Is there an existing issue for this?

• I have searched the existing issues

What's up?

Iam using next js and as soon as I put 'let Web3 = require('web3');'

I get these errors :-
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.

Examples/References

No response

[nullvoidundefined]

I'm having the same issue. Just noticed it yesterday. I am also using Next.js. Se also: this Stack Overflow issue.

[NishantPacharne]

I'm having the same issue. Just noticed it yesterday. I am also using Next.js. Se also: this Stack Overflow issue.

Yeah for now I have also downgraded to version 1.7.4 .... then it is working

[kremalicious]

Same here. But let's be a bit more helpful in reporting what's wrong instead of just "I get these errors".

Exclusively happening when building with Next.js v13.0.2 on Node.js below v18. With Node.js v18 all is fine.

• web3.js v1.8.0 + Next.js v13.0.2 + Node.js v18 → all good!
• web3.js v1.8.0 + Next.js v13.0.2 + Node.js v16 → broken with reported error
• web3.js v1.7.4 + Next.js v13.0.2 + Node.js v16/v18 → all good!

Node.js v18 comes with native fetch support, and Next.js tries to polyfill things for below versions, and then fails on abortcontroller-polyfill, leading to reported error Cannot set property Request of #<Object> which has only a getter:

To reproduce:

1. New app with npx create-next-app@latest, go to created folder
2. nvm use 16
3. npm i web3
4. do import of module in .e.g pages/index.js: import web3 from 'web3'
5. npm run build
6. See error in console

[jdevcs]

@kremalicious Thanks for this info. Our team will be looking this issue,

[NishantPacharne]

Thanks Matthias! I'll update my node.js ..

[luu-alex]

Hey there, thanks for reaching out @NishantPacharne and thank you a ton @kremalicious for the detailed response. I have investigated this and created a PR to fix this issue. So next.js will start working properly with node v16, but for now for a quick fix, please switch and use node 18.

[bezlant]

Thank you so much. It took me 10 hours to figure out that it needed a different node version. I deploy on netlify so adding a .node-version file with the version needed (19.1.0 in my case) in the root folder fixed it.

[luu-alex]

Nodejs 16 build will work fine for next.js next release, thank you for all of this and will close this.

[ZeeshanAhmadKhalil]

using "next": "^13.1.1" getting the same error

[luu-alex]

@ZeeshanAhmadKhalil will be available in the next version update. in the meantime you can upgrade your node version to get it to work until then.

[ZeeshanAhmadKhalil]

@luu-alex switching to node v18 and deleting node_modules and installing it again solves the issue. But now gett following error:

unhandledRejection: TypeError: callback is not a function
at /node_modules/web3-providers-http/lib/index.js:126:13

[luu-alex]

@ZeeshanAhmadKhalil can i see what your package.json looks like

[ZeeshanAhmadKhalil]

This is my package.json file.

{
  "name": "nftdd-wallet",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "node server.js",
    "build": "next build",
    "start": "NODE_ENV=production node server.js",
    "lint": "next lint",
    "export": "next export"
  },
  "dependencies": {
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@loopring-web/loopring-sdk": "^3.0.8",
    "@loopring-web/web3-provider": "^1.1.3",
    "@mui/icons-material": "^5.10.15",
    "@mui/material": "^5.10.13",
    "@mui/x-data-grid": "^5.17.13",
    "@reduxjs/toolkit": "^1.9.0",
    "@types/node": "18.11.9",
    "@types/react": "18.0.25",
    "@types/react-dom": "18.0.8",
    "@walletconnect/qrcode-modal": "^1.8.0",
    "autoprefixer": "^10.4.13",
    "axios": "^1.2.1",
    "bignumber.js": "^9.1.1",
    "blake2b": "^2.1.4",
    "bn.js": "^5.2.1",
    "classnames": "^2.3.2",
    "crypto-js": "^4.1.1",
    "elliptic": "^6.5.4",
    "eslint": "8.27.0",
    "eslint-config-next": "13.0.3",
    "ethereumjs-util": "^7.1.5",
    "ethers": "^5.7.2",
    "js-sha512": "^0.8.0",
    "jsbn": "^1.1.0",
    "moment": "^2.29.4",
    "next": "^13.1.1",
    "postcss": "^8.4.19",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-hook-form": "^7.39.7",
    "react-hot-toast": "^2.4.0",
    "react-redux": "^8.0.5",
    "redux": "^4.2.0",
    "redux-persist": "^6.0.0",
    "tailwindcss": "^3.2.4",
    "truffle-privatekey-provider": "^1.5.0",
    "typescript": "4.8.4",
    "use-debounce": "^9.0.2",
    "wagmi": "^0.9.4",
    "web-encoding": "^1.1.5",
    "web3": "1.8.0"
  }
}

I am using web3 instance inside loopring transfer method. Also created issue there. Getting this error if I create web3 instance as follows:

import Web3 from "web3";
var web3 = new Web3(`https://${chain}.infura.io/v3/${infuraProjectId}`);

[asujan205]

was getting the same error but for now degrading web3 version to 1.7.4 works for me

[luu-alex]

@asujan205 thank you for letting me know, did this issue happen in a new project or something you've been working on

[luu-alex]

Currently Im using node version 18, with next: 13.0.3 and can use

import Web3 from "web3";
var web3 = new Web3(`https://${chain}.infura.io/v3/${infuraProjectId}`);

without any errors.

@ZeeshanAhmadKhalil hi there, can you create a new issue for this and provide more detail? i'd love to help you out and it'll be more clear in a thread that isn't this one.

[ZeeshanAhmadKhalil]

@luu-alex was getting the error if I use @loopring-web/web3-provider looks like they had very old version of web3.

but using node 18 and web3@1.8.1 like above resolves the issue. thanks

[asujan205]

@asujan205 thank you for letting me know, did this issue happen in a new project or something you've been working on

yeah it been seen in my recent project