Uncaught (in promise) Error: No "from" address specified in neither the given options, nor the default options

Question

I was wondering if anyone can guide me in the right direction regarding a project I'm working on which is part of Udemy's course ( ethereum and solidity the complete developers guide )

So I'm currently working on putting together the front-end of a Kickstarter alternative. The issue I'm facing lies in the new.js file which serves as a JS file representing a new page that contains a button enabling the user to create a new campaign(doing the actual transaction through metamask).

import React, { Component } from 'react';
import { Form, Button, Input } from 'semantic-ui-react';
import Layout from '../../components/Layout';
import factory from '../../ethereum/factory';
import web3 from '../../ethereum/web3';
require('babel-polyfill');

class CampaignNew extends Component {
  state = {
    minimumContribution: ''
  };

  //to record and track user changes and inputs
  onSubmit = async (event) => {
    event.preventDefault();

    const accounts = await web3.eth.getAccounts();
    await factory.methods
      .createCampaign(this.state.minimumContribution)
      .send({ from: accounts[0] });
  };

  render() {
    return (
      <Layout>
        <h3>Create a Campaign</h3>

        <Form onSubmit={this.onSubmit}>
          <Form.Field>
            <label>Minimum Contribution</label>
            <Input
              label="wei"
              labelPosition="right"
              value={this.state.minimumContribution}
              onChange={event =>
                this.setState({ minimumContribution: event.target.value })}
            />
          </Form.Field>

          <Button primary>Create!</Button>
        </Form>
      </Layout>
    );
  }
}

export default CampaignNew;

Now on the page itself, when i try to click on the create campaign button which has an onChange handler that should record the input. The error that comes up after i try clicking the button which is hooked with an onEvent handler generates the following:

errors.js?207caff:127 Uncaught (in promise) Error: No "from" address specified in neither the given options, nor the default options.
    at Object.ContractNoFromAddressDefinedError (errors.js?207caff:127)
    at Object._executeMethod (index.js?901a092:775)
    at CampaignNew._callee$ (new.js?bfcc6bf:22)
    at tryCatch (runtime.js?af915c5:62)
    at Generator.invoke [as _invoke] (runtime.js?af915c5:296)
    at Generator.prototype.<computed> [as next] (runtime.js?af915c5:114)
    at step (asyncToGenerator.js?210f254:17)
    at asyncToGenerator.js?210f254:28

I'm using web3 1.0.0-beta26 as the course has instructed so we can both be following the same syntax. I updated the truffle HD wallet as well as I thought it might be preventing a proper connection to Metamask so the transaction can run and the campaign can be created. I have no idea what else to do so it would honestly be great if someone can gratefully guide me in the right direction.

Answer 1

// in your web3.js try adding a ; at the bottom }

web3 = new Web3(provider);

}; (<-- Add semicolon here)

export default web3;

// And add .enable():

if (typeof window !== 'undefined' && typeof window.web3 !== 'undefined') {
// We are in the browser and Metamask is running
web3 = new Web3(window.web3.currentProvider.enable())

This will connect the wallet, but is not a final solution. If more problems after connected to wallet. Remove .enable() again and you should be able to do transactions..