It's showing me uncaught reference error in my index.html file

  <div id="candidate-box"></div>
            <button class="btn btn-primary" onclick="App.vote()">Vote</button>
            <div id="msg"></div>

This is my app.js file in directory src/js.

import "../css/style.css"

// Import libraries we need.
import { default as Web3} from "web3"
import { default as contract } from "truffle-contract"

// get build artifacts from compiled smart contract and create the truffle contract
import ballotArtifacts from "../../build/contracts/Ballot.json"
var BallotContract = contract(ballotArtifacts)

 * This holds all the functions for the app
window.App = {
  // called when web3 is set up
  start: function() { 
    // setting up contract providers and transaction defaults for ALL contract instances
    var account0;
      account0 = result[0];});
    BallotContract.defaults({from: account0,gas:6721975})

    // creates an VotingContract instance that represents default address managed by VotingContract

      // calls getNumOfCandidates() function in Smart Contract, 
      // this is not a transaction though, since the function is marked with "view" and
      // truffle contract automatically knows this

        // adds candidates to Contract if there aren't any
        if (numOfCandidates == 0){
          // calls addCandidate() function in Smart Contract and adds candidate with name "Candidate1"
          // the return value "result" is just the transaction, which holds the logs,
          // which is an array of trigger events (1 item in this case - "addedCandidate" event)
          // We use this to get the candidateID
            $("#candidate-box").append(`<div class='form-check'><input class='form-check-input' type='checkbox' value='' id=${result.logs[0].args.candidateID}><label class='form-check-label' for=0>Candidate1</label></div>`)
            $("#candidate-box").append(`<div class='form-check'><input class='form-check-input' type='checkbox' value='' id=${result.logs[0].args.candidateID}><label class='form-check-label' for=1>Candidate1</label></div>`)
          // the global variable will take the value of this variable
          numOfCandidates = 2 
        else { // if candidates were already added to the contract we loop through them and display them
          for (var i = 0; i < numOfCandidates; i++ ){
            // gets candidates and displays them
              $("#candidate-box").append(`<div class="form-check"><input class="form-check-input" type="checkbox" value="" id=${data[0]}><label class="form-check-label" for=${data[0]}>${window.web3.toAscii(data[1])}</label></div>`)
        // sets global variable for number of Candidates
        // displaying and counting the number of Votes depends on this
        window.numOfCandidates = numOfCandidates 
      console.error("ERROR! " + err.message)

  // Function that is called when user clicks the "vote" button
  vote: function() {
    var uid = $("#id-input").val() //getting user inputted id

    // Application Logic 
    if (uid == ""){
      $("#msg").html("<p>Please enter id.</p>")
    // Checks whether a candidate is chosen or not.
    // if it is, we get the Candidate's ID, which we will use
    // when we call the vote function in Smart Contracts
    if ($("#candidate-box :checkbox:checked").length > 0){ 
      // just takes the first checked box and gets its id
      var candidateID = $("#candidate-box :checkbox:checked")[0].id
    else {
      // print message if user didn't vote for candidate
      $("#msg").html("<p>Please vote for a candidate.</p>")
    // Actually voting for the Candidate using the Contract and displaying "Voted"
      console.error("ERROR! " + err.message)

  // function called when the "Count Votes" button is clicked
  findNumOfVotes: function() {
      // this is where we will add the candidate vote Info before replacing whatever is in #vote-box
      var box = $("<section></section>") 

      // loop through the number of candidates and display their votes
      for (var i = 0; i < window.numOfCandidates; i++){
        // calls two smart contract functions
        var candidatePromise = instance.getCandidate(i)
        var votesPromise = instance.totalVotes(i)

        // resolves Promises by adding them to the variable box
          box.append(`<p>${window.web3.toAscii(data[0][1])}: ${data[1]}</p>`)
          console.error("ERROR! " + err.message)
      $("#vote-box").html(box) // displays the "box" and replaces everything that was in it before

// When the page loads, we create a web3 instance and set a provider. We then set up the app
window.addEventListener("load", function() {
  // Is there an injected web3 instance?
  if (typeof web3 !== "undefined") {
    console.warn("Using web3 detected from external source like Metamask")
    // If there is a web3 instance(in Mist/Metamask), then we use its provider to create our web3object
    window.web3 = new Web3(web3.currentProvider)
  } else {
    console.warn("No web3 detected. Falling back to http://localhost:9545. You should remove this fallback when you deploy live, as it's inherently insecure. Consider switching to Metamask for deployment. More info here: http://truffleframework.com/tutorials/truffle-and-metamask")
    // fallback - use your fallback strategy (local node / hosted node + in-dapp id mgmt / fail)
    window.web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:9545"))
  // initializing the App

I think the error is in web3 account i am trying to get but not able to rectify it. I am using web3 version 1.0.0

BallotContract.defaults({from: window.web3.eth.accounts[0],gas:6721975})

In the terminal when I am trying writing

 var accounts;
    accounts =  window.web3.eth.getAccounts();

it's showing the array of all accounts but when i am writing accounts[0] it is showing undefined

Please help!

1 Answer 1


The error message indicates that the function is not being identified properly. Which mostly can be if the JS file is not loaded properly.

Can you try loading the js file before the of the html file? This is not the best practice, but there are always exception situations.

Now coming to accounts query. In web3js 1.0 getAccounts() occurs through an asynchronous call. You will get a promise in return. So the right way to get the address is:

 var account;
 web3.eth.getAccounts().then(function(err, accs) {
            account = accs[0];})
  • It didn't resolved the problem. It is not able to regonise "App" in the starting of js file. Do you have any clue how to resolve it? Commented Jul 22, 2019 at 9:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.