Having trouble importing web3: Uncaught reference error

[Mickmacha]

Is there an existing issue for this?

• [X] I have searched the existing issues

Current Behavior

celo-inpage.js:1 Uncaught ReferenceError: Web3 is not defined at r.default (celo-inpage.js:1:1495) at Object. (celo-inpage.js:1:1058) at 1../lib/setupWeb3.js (celo-inpage.js:1:1072) at i (celo-inpage.js:1:254) at e (celo-inpage.js:1:414) at celo-inpage.js:1:431

Expected Behavior

Did not expect the uncaught reference error

Steps to Reproduce

// import libraries const Web3 = require('web3'); //import Web3 from 'web3' console.log(Web3); import { newKitFromWeb3 } from '@celo/contractkit' import BigNumber from "bignumber.js" import propertyAbi from '../contract/property.abi.json' import erc20Abi from "../contract/erc20.abi.json"

//The package.json file { "main": "index.js", "dependencies": { "@celo/contractkit": "^1.0.2", "bignumber.js": "^9.0.1", "web3": "^1.3.4" }, "devDependencies": { "html-webpack-plugin": "3.2.0", "webpack": "4.29.6", "webpack-cli": "^3.1.2", "webpack-dev-server": "^3.11.2", "friendly-errors-webpack-plugin": "1.7.0" }, "scripts": { "dev": "node index.js", "build": "webpack" } }

Web3.js Version

1.3.4

Environment

• Operating System: Pop os 22.04
• Browser: Brave
• Node.js Version: v12.22.9.
• NPM Version: 8.5.1

Anything Else?

No response

[spacesailor24]

Hi there, thank you for reaching out so that we can help debug this issue with you

Does this line console.log(Web3); print anything to the console or is it undefined?

[spacesailor24]

My initial hunch on this is there is an issue with the webpack config. If you could provide a link to your repository so we can take a a more detailed look at your setup, we may be able to further assist you

[Mickmacha]

console.log(Web3); prints undefined:11173:1 Uncaught ReferenceError: Web3 is not defined at :1:13 (

[Mickmacha]

https://github.com/Mickmacha/RealEstateSmartContract.git (this is the link to my repo)

[mconnelly8]

6/12 - Keep

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions. If you believe this was a mistake, please comment.

[Muhammad-Altabba]

https://github.com/Mickmacha/RealEstateSmartContract.git (this is the link to my repo)

Hi @Mickmacha, the link no longer exist. Are you still facing the issue?

Did you try with web3.js version 4.x? By the way, with version 4.x you need to import like this: const { Web3 } = require('web3'); or import { Web3 } from 'web3'.

[Muhammad-Altabba]

Hi @Mickmacha

I tested this in a fresh project and the issue does not show. I am will close this issue. However, if you still face the same error, kindly reopen this issue and provide more details. And please confirm first whether the next steps works with you.

Here are the steps I did:

1. Navigate to a directory you like. And then run npm init.
2. Use the following code: inside package.json:

   {
   "main": "index.js",
   "dependencies": {
   "@celo/contractkit": "^1.0.2",
   "bignumber.js": "^9.0.1",
   "web3": "^1.3.4"
   },
   "devDependencies": {
   "friendly-errors-webpack-plugin": "1.7.0",
   "html-webpack-plugin": "3.2.0",
   "webpack": "4.29.6",
   "webpack-cli": "^3.1.2",
   "webpack-dev-server": "^3.11.2"
   },
   "scripts": {
   "dev": "node index.js",
   "build": "webpack"
   }
   }

inside index.js:

// import web3
const Web3 = require("web3"); 

console.log(Web3);

3. Run yarn dev and it will print the Web3 object.

I also tested it with "web3": "^4.2.2" and importing it with const { Web3 } = require("web3"); and all worked as expected.