Provider does not have a request or send method to use

Question

I am doing the Ethereum and Solidity: The Complete Developer's Guide and I am unable to resolve this error.

The code is expected to do a transaction via

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

But it is not behaving properly and giving me the following error:

index.js?fccc903:155 Uncaught (in promise) Error: Provider does not have a request or send method to use.
    at RequestManager.module.exports.RequestManager.send (index.js?fccc903:155)
    at sendRequest (index.js?5b050cb:617)
    at Eth.send [as getAccounts] (index.js?5b050cb:644)
    at CampaignNew._callee$ (new.js?edc8855:17)
    at tryCatch (runtime.js?0e76910:62)
    at Generator.invoke [as _invoke] (runtime.js?0e76910:296)
    at Generator.prototype.<computed> [as next] (runtime.js?0e76910:114)
    at step (asyncToGenerator.js?ae4f0b1:17)
    at asyncToGenerator.js?ae4f0b1:35
    at new Promise (<anonymous>)

I remember the code was working fine, a few moments before, but now I am unsure why the error is occurring and the metamask window is not appearing. Please give your suggestions.

The new.js file for the code is:

import React, { Component } from 'react'
import { Container, Button, Form, Input } from 'semantic-ui-react'
import Layout from '../../components/Layouts'

import factory from '../../eth/factory'
import web3 from '../../eth/web3'

class CampaignNew extends Component {
    state = {
        minimumContribution: ''
    };
    
    onSubmit = async (event)=>{
        event.preventDefault();

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

    render() {
        return (
            <Container>
                <Layout>
                    <h1>Create a new Campaign page</h1>
                    <Form onSubmit={this.onSubmit}>
                        <Form.Field>
                            <label>Minimum contribution</label>
                            <Input 
                                labelPosition='right' 
                                label='wei' 
                                placeholder='0' 
                                
                                value={this.state.minimumContribution}
                                onChange={event => this.setState({minimumContribution: event.target.value})}
                            />
                        
                        </Form.Field>

                        <Button primary>Create</Button>
                    </Form>
                </Layout>

            </Container>
        );
    }
};

export default CampaignNew;

Answer 1

There was no problem with the send request that I have written. The problem was with the provider, which I have not assigned properly.

In my web3.js file, previously this was written:

web3 = new Web3(window.web3.currentProvider.enable());

I changed this to:

await window.web3.currentProvider.enable();
web3 = new Web3(window.web3.currentProvider);