Problem when using truffle-contract.js to load contract


I am having an extremely easy contract called `Friend.sol`:
    pragma solidity ^0.4.17;
    contract Friend {
        string name;
        uint age;
        function setFriend(string _name, uint _age) public {
            name = _name;
            age = _age;
        function getFriend() public constant returns (string, uint) {
            return(name, age);
I deployed my contract on ganache-cli:
 Running migration: 1_initial_migration.js
      Deploying Migrations...
      ... 0xa4d581c585527651c4a74a0d85ef2e21ac91a43e17f290f5f548d6e5f0686e22
      Migrations: 0xf741d74fb4d4eab8c044dc4b1c0dfb7a244a6922
    Saving successful migration to network...
      ... 0xca51a8f5124ef4f1dc8dfba5b9a9c1388cda003686309ff152b776600a64cf81
    Saving artifacts...
    Running migration: 2_deploy_contracts.js
      Deploying Friend...
      ... 0x9195ced6c131afaf1e735fc90464f9b94dd4215e909f463f06e51565b5e7e804
      Friend: 0x8a260eec4c77f82bd885b730f782f9bbe680dd64
    Saving successful migration to network...
      ... 0x008b78bf25c5aa93fb6b8f16367d006e68751a54550da32bcce382067ad1250d
    Saving artifacts...
Within my frontend I am trying to access the contract via web3 and truffle-contract:

    <head>Truffle-Contract Test</head>
    <link rel="stylesheet" href="" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
        <h1>I am Friend with...</h1>
        <h2 id="friend"></h2>
        <label for="name" class="col-lg-2 control-label">Name:</label>
        <input type="text" id="name">
        <label for="age" class="col-lg-2 control-label">Age:</label>
        <input type="text" id="age">
        <button id="button">Update Friend</button>
    <script src="" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    <script type="text/javascript" src="./js/web3.min.js"></script>
    <script type="text/javascript" src="./js/truffle-contract.js"></script>
    <script type="text/javascript">
        // Is there an injected web3 instance?
        if (typeof web3 !== 'undefined') {
            var web3Provider = web3.currentProvider;
        } else {
            // If no injected web3 instance is detected, fall back to Ganache
            var web3Provider = new Web3.providers.HttpProvider('http://localhost:7545');
        web3 = new Web3(web3Provider);
        // Get Contract
        $.getJSON('./Friend.json', function (data) {
            // Get the necessary contract artifact file and instantiate it with truffle-contract
            var FriendArtifact = data;
            var FriendContract = TruffleContract(FriendArtifact);
            // Set the provider for our contract
            // interact with the smart contract
            FriendContract.getFriend(function (error, result) {
                if (!error) {
                    $("#friend").html(result[0] + ' (' + result[1] + 'years old)')
                } else {
            $("button").click(function () {
                FriendContract.setFriend($("name").val(), $("age").val())
However, when running my lite-server I get:

The error is, when I want to interact with my contract on the following line:

FriendContract.getFriend(function (error, result) {

I also created a small github repo to show my entire code.

Any suggestions what I am doing wrong?
Sign In or Register to comment.