dApp index.html fails to load for dAppUniversity election application

Question

Hit a brick wall with this.

git clone https://github.com/dappuniversity/election

The following is the Shell output I get when I npm run dev. I’m using the cloned project from GitHub but I’ve changed the solidity version because it wouldn’t compile on 0.4.2. There’s nothing startling in the shell output so I’m finding it impossible to debug. The issue is the page won’t load and get’s stuck on the loading screen. In your tutorial it immediately loaded once you’d made a connection between Ganache and Metamask. I connected to localhost:7545 and imported the key for one of the accounts but no joy. No idea what to do now.

Last login: Mon Apr 22 14:27:24 on ttys001
Alans-MacBook-Air:Election alancameron$ npm run dev

> pet-shop@1.0.0 dev /Users/alancameron/election
> lite-server

** browser-sync config **
{ injectChanges: false,
  files: [ './**/*.{html,htm,css,js}' ],
  watchOptions: { ignored: 'node_modules' },
  server:
   { baseDir: [ './src', './build/contracts' ],
     middleware: [ [Function], [Function] ] } }
[Browsersync] Access URLs:
 -------------------------------------
       Local: http://localhost:3000
    External: http://100.75.50.91:3000
 -------------------------------------
          UI: http://localhost:3001
 UI External: http://100.75.50.91:3001
 -------------------------------------
[Browsersync] Serving files from: ./src
[Browsersync] Serving files from: ./build/contracts
[Browsersync] Watching files...
19.04.22 14:29:54 200 GET /index.html
19.04.22 14:29:54 200 GET /js/app.js
19.04.22 14:29:54 200 GET /css/bootstrap.min.css
19.04.22 14:29:54 200 GET /js/bootstrap.min.js
19.04.22 14:29:54 200 GET /js/web3.min.js
19.04.22 14:29:54 200 GET /js/truffle-contract.js
19.04.22 14:29:55 200 GET /Election.json
19.04.22 14:33:40 304 GET /index.html
19.04.22 14:33:40 304 GET /css/bootstrap.min.css
19.04.22 14:33:40 304 GET /js/bootstrap.min.js
19.04.22 14:33:40 304 GET /js/web3.min.js
19.04.22 14:33:40 304 GET /js/truffle-contract.js
19.04.22 14:33:40 304 GET /js/app.js
19.04.22 14:33:40 304 GET /Election.json

The following is the output from the page/inspect console.

app.js:106 Error: Invalid number of arguments to Solidity function
    at Object.InvalidNumberOfSolidityArgs (inpage.js:1)
    at u.validateArgs (inpage.js:1)
    at u.toPayload (inpage.js:1)
    at u.call (inpage.js:1)
    at u.execute (inpage.js:1)
    at truffle-contract.js:136
    at new Promise (<anonymous>)
    at truffle-contract.js:127

Just noticed it fails to compile properly:

2_deploy_contracts.js
=====================

   Replacing 'Election'
   --------------------
Error:  *** Deployment Failed ***

"Election" -- Invalid number of parameters for "voters". Got 0 expected 1!.

    at /usr/local/lib/node_modules/truffle/build/webpack:/packages/truffle-deployer/src/deployment.js:364:1
    at process._tickCallback (internal/process/next_tick.js:68:7)

score 1 · Answer 1 · answered May 25 '19 at 23:38

Cloning from the git repo, I had to make 4 changes to the contract to get it to compile:

1) changed the solidity version to pragma solidity ^0.5.0;

2) changed function Election() to constructor() for the contract's constructor

3) added emit before votedEvent(_candidateId)

4) added memory before addCandidate(...) 's param name

If you compiled before making these changes, then you get Deployment Failed. You need to delete your build folder and then compile and migrate again.

Hope this helps.

dApp index.html fails to load for dAppUniversity election application

1 Answers1