TypeError: (intermediate value).at is not a function

Question

This is my code:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Web3 from 'web3';

var ETHEREUM_CLIENT = new Web3(new Web3.providers.HttpProvider("http://localhost:8585"));

var peopleContractABI = [{"constant":true,"inputs":[],"name":"getContractAddress","outputs":[{"name":"","type":"address"}],"payable":false,"type":"function"},{"constant":true,"inputs":[],"name":"getPeople","outputs":[{"name":"","type":"bytes32[]"},{"name":"","type":"bytes32[]"},{"name":"","type":"uint256[]"}],"payable":false,"type":"function"},{"constant":false,"inputs":[{"name":"_firstName","type":"bytes32"},{"name":"_lastName","type":"bytes32"},{"name":"_age","type":"uint256"}],"name":"addPerson","outputs":[{"name":"success","type":"bool"}],"payable":false,"type":"function"},{"constant":true,"inputs":[{"name":"","type":"uint256"}],"name":"people","outputs":[{"name":"firstName","type":"bytes32"},{"name":"lastName","type":"bytes32"},{"name":"age","type":"uint256"}],"payable":false,"type":"function"}]
var peopleContractAddress = '0xd2304e34972744ac6eba5548b54e7377539e1085'

var peopleContract = new ETHEREUM_CLIENT.eth.Contract(peopleContractABI).at(peopleContractAddress);

This is the error I get:

TypeError: (intermediate value).at is not a function

▶ 1 stack frames were collapsed.
Object../src/App.js
src/App.js:11
   8 | var peopleContractABI = [{"constant":true,"inputs":[],"name":"getContractAddress","outputs":[{"name":"","type":"address"}],"payable":false,"type":"function"},{"constant":true,"inputs":[],"name":"getPeople","outputs":[{"name":"","type":"bytes32[]"},{"name":"","type":"bytes32[]"},{"name":"","type":"uint256[]"}],"payable":false,"type":"function"},{"constant":false,"inputs":[{"name":"_firstName","type":"bytes32"},{"name":"_lastName","type":"bytes32"},{"name":"_age","type":"uint256"}],"name":"addPerson","outputs":[{"name":"success","type":"bool"}],"payable":false,"type":"function"},{"constant":true,"inputs":[{"name":"","type":"uint256"}],"name":"people","outputs":[{"name":"firstName","type":"bytes32"},{"name":"lastName","type":"bytes32"},{"name":"age","type":"uint256"}],"payable":false,"type":"function"}]
   9 | var peopleContractAddress = '0xd2304e34972744ac6eba5548b54e7377539e1085'
  10 | 
> 11 | var peopleContract = new ETHEREUM_CLIENT.eth.Contract(peopleContractABI).at(peopleContractAddress);
  12 | 
  13 | class App extends Component {
  14 |   componentWillMount(){

Initially, I was getting the error:

"× TypeError: ETHEREUM_CLIENT.eth.contract is not a function"

then I followed this solution by making 'ETHEREUM_CLIENT.eth.contract(abi)' into 'new ETHEREUM_CLIENT.eth.Contract(abi)' as per the second solution

When I saved these changes my error changed to "TypeError: (intermediate value).at is not a function".

Any ideas?

Answer 1

Change peopleContract to this:

var peopleContract = new ETHEREUM_CLIENT.eth.Contract(peopleContractABI, peopleContractAddress);

web3 docs on specifying parameters for your contract object: https://web3js.readthedocs.io/en/1.0/web3-eth-contract.html#parameters

EDIT: above solution applies to web3.js 1.0. .atworks on web3.js 0.x.x