App.js not running properly on the client side

[lasborne]

Goodday, Web3 devs and learners, I am having this persistent issue for some days now. Each time i'm following up the tutorial on Intro To Ethereum programming [Full Course] at about 7hrs:14mins. I tried running the app.js file by doing npm run dev. It runs smooth but returns this error on inspection Uncaught (in promise) TypeError: Web3 is not a constructor at Object.loadWeb3 (bundle.js:85130:20) at Object.load (bundle.js:85122:19) at bundle.js:85167:13 at dispatch (jquery.min.js:3:12444) at r.handle (jquery.min.js:3:9173)

Note: The bundle.js is actually a browserified version of app.js, since require() doesn't apply smoothly to client-side JS, i had to create a browserified version of my original app.js file by running the command browserify app.js -o bundle.js

But, on clicking on the resulting error above, i noticed that the error is actually centered on any line with web3 as shown below App = { load: async () => { await App.loadWeb3() await App.loadAccount() }, // https://medium.com/metamask/https-medium-com-metamask-breaking-change- loadWeb3: async () => { if (typeof web3 !== 'undefined') { App.web3Provider = web3.currentProvider web3 = new Web3(web3.currentProvider)

These errors were about 3 before now, but i've been able to debug the other 2, remaining this, and would appreciate a solution or input

[lasborne]

Okay, i finally found a way of going through the issue i posted above by following issue #19 updates posted by @ahampriyanshur. But then again, i have run into another issue of ethereum not defined

[iamthekavita]

I am also facing the same issue. Uncaught TypeError: Web3 is not a constructor Uncaught (in promise) ReferenceError: Web3 is not defined

any help or solutions are appreciated.

[lasborne]

@iamthekavita try inserting this in your html before the i.e., it should be something like this below for your scripts

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
    </script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="vendor/bootstrap/dist/js/bootstrap.min.js"></script>
    **<script src="vendor/web3/dist/web3.min.js"></script>**
    <script src="vendor/truffle-contract/dist/truffle-contract.js"></script>
    <script src="app.js"></script>

[lasborne]

Sorry, use this,
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="vendor/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="vendor/web3/dist/web3.min.js"></script>
<script src="vendor/truffle-contract/dist/truffle-contract.js"></script>
<script src="app.js"></script>

[gurkankaya05]

@iamthekavita try inserting this in your html before the i.e., it should be something like this below for your scripts

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
    </script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="vendor/bootstrap/dist/js/bootstrap.min.js"></script>
    **<script src="vendor/web3/dist/web3.min.js"></script>**
    <script src="vendor/truffle-contract/dist/truffle-contract.js"></script>
    <script src="app.js"></script>

thanks! This worked for me.