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 <script src="vendor/web3/dist/web3.min.js"></script> in your html before the <script src="vendor/truffle-contract/dist/truffle-contract.js"></script>
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 <script src="vendor/web3/dist/web3.min.js"></script> in your html before the <script src="vendor/truffle-contract/dist/truffle-contract.js"></script> 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.