Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Uncaught (in promise) ReferenceError: Web3 is not defined #11

Open
Rich2020 opened this issue Apr 15, 2021 · 27 comments · May be fixed by #36
Open

Uncaught (in promise) ReferenceError: Web3 is not defined #11

Rich2020 opened this issue Apr 15, 2021 · 27 comments · May be fixed by #36

Comments

@Rich2020
Copy link

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
Copy link

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

Help please ? thanks

@jdohm
Copy link

jdohm commented Apr 17, 2021

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 added a commit to jdohm/eth-todo-list that referenced this issue Apr 17, 2021
…is not defined

This issue is due to the fact that metamask no longer injects web3 by default

package.json
- added web3 dependency

src/index.html
- added web3 dependency
@jdohm
Copy link

jdohm commented Apr 17, 2021

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
Copy link
Author

@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
Copy link

jdohm commented Apr 17, 2021

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
Copy link

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
Copy link

jdohm commented Apr 19, 2021

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
Copy link

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
Copy link

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
Copy link

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
Copy link

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
Copy link

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
Copy link

jdohm commented Apr 20, 2021

@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
Copy link

Arun-kc commented Apr 20, 2021

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
Copy link

jdohm commented Apr 20, 2021

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
Copy link

Arun-kc commented Apr 24, 2021

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
Copy link

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

@Npascetti
Copy link

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
Copy link

jdohm commented Apr 28, 2021

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
Copy link

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
Copy link

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
Copy link

AnonDeveano commented Aug 22, 2021

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
Copy link

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
Copy link

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
Copy link

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!

@RapidCompiler RapidCompiler linked a pull request Aug 26, 2022 that will close this issue
@cuongrep
Copy link

cuongrep commented Oct 5, 2022

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
Copy link

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 :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.