TypeError: __WEBPACK_IMPORTED_MODULE_1__firebase__.a.auth(...).createUserWithEmailandPassword is not a function

Question

I'm a beginner at React and Firebase, I'm facing this issue when I'm trying to register the user from my front end. Can anyone please help me out.? I'm using firebase version 6.0.2. Is there any other way to go about this..or do I downgrade to an older version of firebase.

Register.js

import React from 'react';
import firebase from '../../firebase';
import {Grid,Form,Segment,Button,Header,Message,Icon} from 'semantic-ui-react';
import {Link} from 'react-router-dom'

class Register extends React.Component{
    state={
        username:'',
        email:'',
        password:'',
        passwordConfirmation:''

    }

    handleChange=event=>{
        this.setState({
            [event.target.name]:event.target.value
        })
    }

    handleSubmit=event=>{
        event.preventDefault();
        firebase
         .auth()
         .createUserWithEmailandPassword(this.state.email,this.state.password)
         .then(createdUser=>{
            console.log(createdUser);
         })
         .catch(err=>{
            console.log(err);

         } )
    }



    render(){
        const {username,email,password,passwordConfirmation}=this.state
        return(
            <Grid textAlign="center" verticalAlign="middle"className="app">
                <Grid.Column style={{maxWidth:450}}>
                    <Header as="h2" icon color="orange" textAlign="center">
                        <Icon name="puzzle piece" color="orange"/>
                            Register for DevChat 
                    </Header>
                    <Form onSubmit={this.handleSubmit}size="large">
                        <Segment stacked>
                            <Form.Input 
                            fluid name="username" 
                            icon="user" iconPosition="left"
                            placeholder="Username" 
                            onChange={this.handleChange} 
                            value={username}
                            type="text"/>

                             <Form.Input fluid name="email" 
                             icon="mail" iconPosition="left"
                            placeholder="Email Address" 
                            onChange={this.handleChange} 
                            value={email}
                            type="email"/>

                            <Form.Input fluid name="password" 
                            icon="lock" iconPosition="left"
                            placeholder="Password" 
                            onChange={this.handleChange} 
                            value={password}
                            type="password"/>

                            <Form.Input fluid name="passwordConfirmation" 
                            icon="repeat" 
                            iconPosition="left"
                            placeholder="Password Confirmation" 
                            onChange={this.handleChange} 
                            value={passwordConfirmation}
                            type="password"/>

                        <Button color="orange" fluid size="large">Submit</Button>
                        
                       
                       
                        </Segment>

                    </Form>
                    <Message> Already a user?<Link to="/login">Login</Link> </Message>
                </Grid.Column>
            </Grid>
        )
    }
}

export default Register

firebase.js

import firebase from 'firebase/app';
import "firebase/auth"
import "firebase/database"
import "firebase/storage"

const firebaseConfig = {
    //credentails
  };
  firebase.initializeApp(firebaseConfig);


  export default firebase;

Thanks in advance!

Answer 1

Franks comment was correct you have a type error

Your handlesubmit:

 handleSubmit=event=>{
        event.preventDefault();
        firebase
         .auth()
         .createUserWithEmailandPassword(this.state.email,this.state.password)
         .then(createdUser=>{
            console.log(createdUser);
         })
         .catch(err=>{
            console.log(err);

         } )
    }

your handle submit should look like this or change you function to this

 handleSubmit=event=>{
        event.preventDefault();
        firebase
  .auth()
  .createUserWithEmailAndPassword(this.state.email,this.state.password) //change in this line
  .then(createdUser=>{
   console.log(createdUser);
    })
  .catch(err=>{
      console.log(err);
         })
    }

If Frank's solution worked for you just ignore this(as this is just the same but in code)