Uncaught ReferenceError: TruffleContract is not defined

Question

I am working on a smart contract. When I try to serve my smart contract via lite-server I see following error in the browser console

Here my app.js source code: https://pastebin.com/UjFuYCyQ

I have tried installing TruffleContract separately but no luck.

App.js Code :

    App = {
  web3Provider: null,
  contracts: {},
  account: 0x0,

  init: function() {
    return App.initWeb3();
  },

  initWeb3: function() {

    if (typeof web3 !== 'undefined') {
      App.web3Provider = web3.currentProvider;
    } else {

      App.web3Provider = new Web3.providers.HttpProvider('http://localhost:7545');
    }
    web3 = new Web3(App.web3Provider);
    App.displayAccountInfo();
    return App.initContract();
  },

  displayAccountInfo: function(){
    web3.eth.getCoinbase(function(err, account){
      if(err === null){
        App.account = account;
        $('#accountId').text(account);
      }
    });
    return App.initContract();
  },

  initContract: function() {
    $.getJSON('Voting.json', function(votingArtifact) {

      App.contracts.Voting = TruffleContract(votingArtifact);

      App.contracts.Voting.setProvider(App.web3Provider);

      return App.reloadVoters();
    });
  },

  reloadVoters: function() {

    App.displayAccountInfo();

  }
};

$(function() {
  $(window).load(function() {
    App.init();
  });
});

Answer 1

It looks like plain javascript, in order to access TruffleContract, you need to add script on html <script src="{uri_truffle_contract.js}"></script>

If you want to add through npm package, you need to add var contract = require("truffle-contract"); on top of your javascript. In this case you need to browserify before running in a browser.

Answer 2

Simply run npm i @truffle/contract this will install the right package. trufle-contract is now renamed to @truffle/contract. Check npm docs