Uncaught (in promise) ReferenceError: Web3 is not defined

[Rich2020]

The code is copied exactly, but it tells me that web3 is not defined. It is definitely installed - I've done the npm install and I have installed web3 manually via npm install [email protected]

Any ideas?

[DamienA24]

I confirm, I got same error. I tried many things but same result...

Help please ? thanks

[jdohm]

install web3 (npm install web3) and add

<script src="vendor/web3/dist/web3.js"></script>

above

<script src="vendor/truffle-contract/dist/truffle-contract.js"></script>.

inside the index.html

This is necessary since metamask stopped injecting web3

I'll make a pr after verifying this works :)

[jdohm]

okay took me a while but it seems to be necessary now to set the address which is used to send the transaction.
I did this by adding:
web3.eth.defaultAccount = web3.eth.accounts[0]
to the app.js inside the load function.

please keep in mind, I'm doing this tutorial to learn as well :) so my solution probably isn't perfect. I will add a pr and improve if necessary.

[Rich2020]

@jdohm that was the first thing I did - add the web3.js script to the html. However, doing so resulted in another error. It looks like it is the wrong web3 version, but I'm using the one in the tutorial.

[jdohm]

could you try to clone my fork and see if the same issue arises? I tried running the app and didn't get the #10 error.
As you can see in my pr #12 I used web3.js in version 0.20.6

[DamienA24]

Hello jdohm,

It's working with version 0.20.6 and adding src in html ;) thanks

Why we use the last version web3, we got this error ?

[jdohm]

Because it contains braking changes (see Semantic Versioning).

In this case, some functions called from truffle-contracts and in the tutorial code changed.

To use the newest web3 library you have to also update the tutorial code and the used truffle version.

See how to use newer versions in a newer tutorial: github dbank YouTube dbank tutorial

[ashubisht]

install web3 (npm install web3) and add

<script src="vendor/web3/dist/web3.js"></script>

above

<script src="vendor/truffle-contract/dist/truffle-contract.js"></script>.

inside the index.html

This is necessary since metamask stopped injecting web3

I'll make a pr after verifying this works :)

I believe this should be <script src="vendor/web3/dist/web3.min.js"></script> as I still cant find web3.js inside dist of node modules/web3. Its using v1.3.5 while picking up the latest

[saraiyakush]

install web3 (npm install web3) and add

<script src="vendor/web3/dist/web3.js"></script>

above

<script src="vendor/truffle-contract/dist/truffle-contract.js"></script>.

inside the index.html

This is necessary since metamask stopped injecting web3

I'll make a pr after verifying this works :)

This worked for me.

[saraiyakush]

okay took me a while but it seems to be necessary now to set the address which is used to send the transaction.
I did this by adding:
web3.eth.defaultAccount = web3.eth.accounts[0]
to the app.js inside the load function.

please keep in mind, I'm doing this tutorial to learn as well :) so my solution probably isn't perfect. I will add a pr and improve if necessary.

I think this should be a separate issue. This issue occurs when invoking the functions in the contract. It has nothing to do with Web3 not available. Anyway, the solution you specified here works i.e. a defaultAccount is needed to be set before calling eth.sendTransaction.

[saraiyakush]

install web3 (npm install web3) and add
<script src="vendor/web3/dist/web3.js"></script>
above
<script src="vendor/truffle-contract/dist/truffle-contract.js"></script>.
inside the index.html
This is necessary since metamask stopped injecting web3
I'll make a pr after verifying this works :)

I believe this should be <script src="vendor/web3/dist/web3.min.js"></script> as I still cant find web3.js inside dist of node modules/web3. Its using v1.3.5 while picking up the latest

I was able to get it working by <script src="vendor/web3/dist/web3.js"></script> . Try running npm ls web3 and verify the dependency is installed.

[ashubisht]

install web3 (npm install web3) and add
<script src="vendor/web3/dist/web3.js"></script>
above
<script src="vendor/truffle-contract/dist/truffle-contract.js"></script>.
inside the index.html
This is necessary since metamask stopped injecting web3
I'll make a pr after verifying this works :)

I believe this should be <script src="vendor/web3/dist/web3.min.js"></script> as I still cant find web3.js inside dist of node modules/web3. Its using v1.3.5 while picking up the latest

I was able to get it working by <script src="vendor/web3/dist/web3.js"></script> . Try running npm ls web3 and verify the dependency is installed.

Yes I have already placed in package json. Running the command outputs the web3 presence:

[email protected] /Users/utkarshbisht/block8/eth-todo
├─┬ @truffle/[email protected]
│ ├─┬ @truffle/[email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ └── [email protected] deduped
├─┬ [email protected]
│ ├─┬ @truffle/[email protected]
│ │ └─┬ @truffle/[email protected]
│ │ └─┬ @truffle/[email protected]
│ │ └── [email protected] deduped
│ └─┬ @truffle/[email protected]
│ └── [email protected] deduped
└── [email protected]

[jdohm]

@ashubisht as stated above please install version 0.20.6 instead of 1.xx.xx
Version 1.xx.xx is not compatible with this project

[Arun-kc]

okay took me a while but it seems to be necessary now to set the address which is used to send the transaction.
I did this by adding:
web3.eth.defaultAccount = web3.eth.accounts[0]
to the app.js inside the load function.

please keep in mind, I'm doing this tutorial to learn as well :) so my solution probably isn't perfect. I will add a pr and improve if necessary.

This really helped. Thanks @jdohm 👍
Any idea on why this issue occurred?

[jdohm]

My guess would be that in the past metamask not only injected web3 but also set the default account. But I toke a quick look at the metamask code and couldn't find such a thing so I'm not sure.

[Arun-kc]

Ok, @jdohm.I'm pretty new to this, so I'm also learning all these new concepts and workflows. Thanks for sharing your views.

[camerenisonfire]

I copied the changes you commited on your fork, @jdohm, and that fixed the issue for me. Thank you.

[Npascetti]

Thanks @jdohm for your fixes. I came up with the same solutions after debugging for a couple hours. Should have have just read this issue!! There is still an issue if you change your metamask address between page refreshes. I worked around it by adding window.ethereum.on("accountsChanged", function (accounts) { web3.eth.defaultAccount = accounts[0]; App.account = web3.eth.defaultAccount; });
in the loadAccount method of app.js

[jdohm]

If you want to make a PR feel free to include my work ( web3.eth.defaultAccount = web3.eth.accounts[0] would be better of in the loadAccount method a swell).
It seems however @gwmccubbin isn't that active on his repos.

[csillabeg]

If you want to make a PR feel free to include my work ( web3.eth.defaultAccount = web3.eth.accounts[0] would be better of in the loadAccount method a swell).
It seems however @gwmccubbin isn't that active on his repos.

Hello,

This works for "Uncaught (in promise) error: invalid address" also. Dankeee @jdohm :D

[evan-fannin]

install web3 (npm install web3) and add

<script src="vendor/web3/dist/web3.js"></script>

above

<script src="vendor/truffle-contract/dist/truffle-contract.js"></script>.

inside the index.html

This is necessary since metamask stopped injecting web3

I'll make a pr after verifying this works :)

Confirming that it works when adding this script after running "npm install [email protected]".

[AnonDeveano]

Can confirm the web3.eth.defaultAccount = web3.eth.accounts[0] solution works for getting rid of the invalid address error. Now having an issue making the added tasks actually show up but I don't think it's related to this...yet.

Dev error: I didn't redeploy the smart contract which is why the txn were counted in Ganache but literally not showing up on the page. I didn't see the checkbox for the Dapp University task but didn't put it together.

[davappler]

I was having the same issue, I did this command => npm install [email protected]
and added this => <script src="vendor/web3/dist/web3.min.js"></script>
in html file above => <script src="vendor/truffle-contract/dist/truffle-contract.js"></script>
and it worked for me

[MustafaCQN]

install web3 (npm install web3) and add

<script src="vendor/web3/dist/web3.js"></script>

above

<script src="vendor/truffle-contract/dist/truffle-contract.js"></script>.

inside the index.html

This is necessary since metamask stopped injecting web3

I'll make a pr after verifying this works :)

check if you use web3.js or web3.min.js

[Sudhee-bsp]

Confirm by installing this dependency:-

npm install [email protected]

Make sure the order for using it is:-

<script src="vendor/web3/dist/web3.js"></script>
<script src="vendor/truffle-contract/dist/truffle-contract.js"></script>

Then we can use (for address):-

web3.eth.defaultAccount = web3.eth.accounts[0];
console.log(App.account);

Works fine!

[cuongrep]

install web3 (npm install web3) and add
<script src="vendor/web3/dist/web3.js"></script>
above
<script src="vendor/truffle-contract/dist/truffle-contract.js"></script>.
inside the index.html
This is necessary since metamask stopped injecting web3
I'll make a pr after verifying this works :)

I believe this should be <script src="vendor/web3/dist/web3.min.js"></script> as I still cant find web3.js inside dist of node modules/web3. Its using v1.3.5 while picking up the latest

This worked for me.

[alok-marathe]

Confirm by installing this dependency:-

npm install [email protected]

Make sure the order for using it is:-

<script src="vendor/web3/dist/web3.js"></script> <script src="vendor/truffle-contract/dist/truffle-contract.js"></script>

Then we can use (for address):-

web3.eth.defaultAccount = web3.eth.accounts[0];
console.log(App.account);

Works fine!

Here you will have to change the console log command to the following:

web3.eth.defaultAccount = web3.eth.accounts[0];
console.log(web3.eth.defaultAccount);

It's obvious, though just telling to make coding more faster :)