TypeError: (0 , _ethereum_Station__WEBPACK_IMPORTED_MODULE_4__.default) is not a function

Question

I am unable to go ahead due to this error.

This is the \stations\show.js file

import React, { Component } from "react";
import { Card, Grid, Button } from "semantic-ui-react";
import Layout from "../../components/Layout";
import Station from "../../ethereum/Station";
import web3 from "../../ethereum/web3";
import ContributeForm from "../../components/ContributeForm";
import { Link } from "../../routes";


class StationShow extends Component {

  static async getInitialProps(props) {

    const station = Station(props.query.address);
    const summary = await station.methods.getSummary().call();

    return {
      address: props.query.address,
      minimumContribution: summary[0],
      balance: summary[1],
      requestsCount: summary[2],
      approversCount: summary[3],
      manager: summary[4],
    };
  }

  renderCards() {

    const {
      balance,
      manager,
      minimumContribution,
      requestsCount,
      approversCount,
    } = this.props;


    const items = [

      {
        header: manager,
        meta: "Address of Manager",
        description:
          "SHO Address",
        style: { overflowWrap: "break-word" },
      },

      {
        header: minimumContribution,
        meta: "Minimum Contribution (wei)",
        description:
          "",
      },

      {
        header: requestsCount,
        meta: "Number of Requests",
        description:
          "",
      },

      {
        header: approversCount,
        meta: "Number of Approvers",
        description:
          "",
      },
      {
        header: web3.utils.fromWei(balance, "ether"),
        meta: "Campaign Balance (ether)",
        description:
          "",
      },
    ];

    return <Card.Group items={items} />;
  }

  render() {

    return (

      <Layout>

        <h3>Station Show</h3>

        <Grid>
          <Grid.Row>
            <Grid.Column width={10}>{this.renderCards()}</Grid.Column>
            <Grid.Column width={6}>
              <ContributeForm address={this.props.address} />
            </Grid.Column>
          </Grid.Row>

          <Grid.Row>
            <Grid.Column>
              <Link route={`/stations/${this.props.address}/requests`}>
                <a>
                  <Button primary>View Requests</Button>
                </a>
              </Link>
            </Grid.Column>
          </Grid.Row>
        </Grid>
      </Layout>
    );
  }
}

export default StationShow;

This is the ethereum\Station.js file

import web3 from './web3';
import Station from './build/Station.json';

const station = new web3.eth.Contract(
  JSON.parse(Station.interface),
  '0x9B9507F8d7818724979C7A931a567827c031AB63'
);

export default station;

I am confused if this error is occurring due to routing or if there is any other factor that leads to this error.

Answer 1

 import Station from "../../ethereum/Station";

Most likely you did not export default Station in "../../ethereum/Station"

Answer 2

so the issue is resolved. In the deploy.js I was deploying the StationFactory contract and so the address to which the contract had been deployed must be put as an argument in the above ethereum\Station.js file, which I did not. Instead, I directly had passed the address which is wrong. The updated ethereum\Station.js is

import Station from './build/Station.json';



  const station = (address) => {
    return new web3.eth.Contract(JSON.parse(Station.interface), address);
  };

export default station;

Doing this actually resolved the issue.

For your reference I will post the smartcontract code here.

Stat.sol

pragma solidity ^0.4.17;
contract StationFactory {
    address[] public deployedStations;

    function createStation(uint minimum) public {
        address newStation = new Station(minimum, msg.sender);
        deployedStations.push(newStation);
    }

    function getDeployedStations() public view returns (address[]) {
        return deployedStations;
    }
}

contract Station {
    struct Request {
        string description;
        uint value;
        address recipient;
        bool complete;
        uint approvalCount;
        mapping(address => bool) approvals;
    }

    Request[] public requests;
    address public manager;
    uint public minimumContribution;
    mapping(address => bool) public approvers;
    uint public approversCount;

    modifier restricted() {
        require(msg.sender == manager);
        _;
    }

    function Station(uint minimum, address creator) public {
        manager = creator;
        minimumContribution = minimum;
    }

    function contribute() public payable {
        require(msg.value > minimumContribution);

        approvers[msg.sender] = true;
        approversCount++;
    }

    function createRequest(string description, uint value, address recipient) public restricted {
        Request memory newRequest = Request({
           description: description,
           value: value,
           recipient: recipient,
           complete: false,
           approvalCount: 0
        });

        requests.push(newRequest);
    }

    function approveRequest(uint index) public {
        Request storage request = requests[index];

        require(approvers[msg.sender]);
        require(!request.approvals[msg.sender]);

        request.approvals[msg.sender] = true;
        request.approvalCount++;
    }

    function finalizeRequest(uint index) public restricted {
        Request storage request = requests[index];

        require(request.approvalCount > (approversCount / 2));
        require(!request.complete);

        request.recipient.transfer(request.value);
        request.complete = true;
    }

    function getSummary() public view returns (
      uint, uint, uint, uint, address
      ) {
        return (
          minimumContribution,
          this.balance,
          requests.length,
          approversCount,
          manager
        );
    }

    function getRequestsCount() public view returns (uint) {
        return requests.length;
    }
}

and the deploy.js script

const HDWalletProvider = require('@truffle/hdwallet-provider');
const Web3 = require('web3');
const compiledCRMS = require('./build/crms.json');
const compiledStationFactory = require('./build/StationFactory.json');

const provider = new HDWalletProvider(
  'YOUR METAMASK PHRASE',
  'INFURA LINK'
);

const web3 = new Web3(provider);


const deploy = async()=>{
  const accounts = await web3.eth.getAccounts();

  console.log('Attempting to deploy from account', accounts[0]);
const result =  await new web3.eth.Contract(JSON.parse(compiledCRMS.interface))
  .deploy({data:compiledCRMS.bytecode })
  .send({gas:'10000000',from:accounts[0]});

const result_1 = await new web3.eth.Contract(JSON.parse(compiledStationFactory.interface))
.deploy({data:compiledStationFactory.bytecode})
.send({gas:'10000000',from:accounts[0]});


console.log('CRMS Contract deployed to',result.options.address);
console.log('Station Factory Contract deployed to',result_1.options.address);
provider.engine.stop();
};
deploy();

Thank you and have a great day!