I am getting this error Minified React error #130 after creating a production build of Create-React-App

412 Views Asked by At

The error only shows up when I visit login page in the application, however the register page looks fine.

The form in the login page is created with reactstrap. The application works fine in development mode, as soon as I created production build using yarn build the problem arose.

Following is my Login.js Component

import React, { Component } from 'react';
import { Button, Col, Container, Row, Form, FormGroup, Input, Label, Alert } from 'reactstrap';
import axios from 'axios';
import { Link } from 'react-router-dom';
import { AuthContext } from '../contexts/AuthContext';


class Login extends Component {

    static contextType = AuthContext;

    state = {
        isSubmitting: false,
        failed: false
    }

    

    handleSubmit = e => {
        e.preventDefault();

        this.setState({
            isSubmitting: true
        });

        const loginData = {
            email: this.email,
            password: this.password
        }
        
        axios.post('login', loginData)
            .then( res => {
                
                this.setState({
                    isSubmitting: false
                });
                
                if(res.status === 200){
                    const user = res.data.data;

                    const userData = {
                        id: user.id,
                        name: user.name,
                        api_token: user.api_token
                    }

                    if(user){
                        
                        this.context.setUser(userData);
                        this.context.storeUser(userData);
                        this.context.setAuthenticated(true);
                        
                        let pageToGo;

                        if(this.props.history.location.state !== undefined){
                            const pageFrom = this.props.history.location.state.page;
                            pageToGo = pageFrom ? pageFrom : '/dashboard';
                            this.props.history.push(pageToGo);
                        }else{
                            this.props.history.push('/dashboard');
                        }

                    }else{
                        this.setState({
                            failed: true
                        });
                    }

                }else{
                    this.setState({
                        failed: true
                    });
                }
            } )

            .catch( err => {
                console.log(err);
            })
    }

    handleLogout = () => {
        this.context.logout();
        this.props.history.push('/');
    }

    RenderErrorMessages = () => {
        if(this.state.failed){
            return(
                <div>
                    <Alert color="danger">Invalid Credentials! Try again with correct credentials!</Alert>
                </div>
            )
        }else{
            return(
                <div>
                </div>
            )
        }
    }

    RenderDashboard = () => {
        return(
            <div>
                <Container className="shadow-sm" style={{backgroundColor: '#fff'}}>
                    <Row className="p-5" color="white" >
                        <Col className="pb-4 border-bottom" md="12">
                            <h2 className="mb-3">Hi, {this.context.user.name}</h2>
                            <h5 className="font-weight-normal">You are logged in!</h5>
                        </Col>

                        
                    </Row>

                    <Row className="pb-5 px-5">
                        <Col md="6">
                            <Col md="12">
                                <p>Do you want to go to your dashboard?</p>
                                <Button className="mr-2" tag={Link} to="/dashboard">Go to Dashboard</Button>
                            </Col>
                            <Col md="12" className="mt-4">
                                <p>Do you want to logout?</p>
                                <Button onClick={() => this.handleLogout()} >Log Out</Button>
                            </Col>
                        </Col>

                        
                    </Row>
                </Container>
                
            </div>
        )
    }

    RenderLoginForm = () => {
        return (
            <Container className="py-5" >
                <Row className="justify-content-center">
                    <Col md="8">
                        <h3 className="pb-3 mb-2 text-uppercase font-weight-bold text-sm" style={{fontSize: '18px'}}>Login to start your session!</h3>
                    </Col>
                </Row>

                <Row className="justify-content-center">
                    <Col md="8">
                        <this.RenderErrorMessages />
                    </Col>
                </Row>
                

                <Row className="justify-content-center">

                    <Col className="p-5 shadow-sm" md="8" style={{backgroundColor: '#fff'}}>


                        <Form onSubmit={this.handleSubmit}>
                            <FormGroup>
                                <Label htmlFor="email" className="font-weight-bold">Email</Label>
                                <Input 
                                    type="email" 
                                    name="email" 
                                    placeholder="Enter Your Email" 
                                    onChange={e => this.email = e.target.value} 
                                    required={true}
                                />
                            </FormGroup>

                            <FormGroup>
                                <Label htmlFor="password" className="font-weight-bold">Password</Label>
                                <Input 
                                    type="password" 
                                    name="password" 
                                    placeholder="Enter Your Password" 
                                    onChange={e => this.password = e.target.value} 
                                    required={true}
                                />
                            </FormGroup>

                            <Button className="mt-4" type="submit" name="submit" disabled={this.state.isSubmitting}>{this.state.isSubmitting ? 'loading..' : 'Submit'}</Button>

                            <p className="text-right mt-2">Don't have an account? <Link to="/register">Sign Up Here</Link></p>
                        </Form>
                    </Col>
                </Row>
            </Container>
        )
    }

    render() {

        return(
            <div className="py-5" style={{backgroundColor: '#f5f5f5'}}>
                {this.context.authenticated ? <this.RenderDashboard  /> : <this.RenderLoginForm />}
            </div>
        )
    }
}


export default Login;

Here is the complete log of the error.

Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

0

There are 0 best solutions below