Using React Materialize's TextInput ponent breaks my site only in production.

In development it works fine. with no errors or warnings.

I've seen some Stack posts about ponents not being exported/imported correctly. However my ponents all appear to be exported/imported correctly. The TextFieldGroup ponent is a default export and is imported as such, while TextInput is a named export and is imported using curly brackets.

The TextFieldGroup is a wrapper ponent the handles all the input validation and renders the Materialize TextInput p.

I have narrowed the issue down to the TextInput ponent as I have tried replacing the TextFieldGroup ponent with just the <input /> and putting the <input /> inside my TextFieldGroup wrapper p.

Please my project with the issue. Click the login button to see if fail to render the page because its trying to the TextInput.

Login.js

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { Row, Col, Button } from 'react-materialize';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import TextFieldGroup from '../../ponents/mon/TextFieldGroup';
import { loginUser } from '../../actions/authActions';

class Login extends Component {
    state = {
        usernameOrEmail: '',
        password: '',
        errors: {}
    }
    onChange = e => {
        const errors = this.state.errors;
        errors[e.target.name] = '';
        this.setState({
            [e.target.name]: e.target.value,
            errors
        });
    }
    onSubmit = e => {
        e.preventDefault();

        const userData = {
            usernameOrEmail: this.state.usernameOrEmail,
            password: this.state.password
        }
        this.props.loginUser(userData);
    }
    ponentDidMount = () => {
        if (this.props.auth.isAuthenticated) {
            this.props.history.push('/dashboard');
        }
    }
    ponentWillReceiveProps = (nextProps) => {
        if (nextProps.auth.isAuthenticated) {
            this.props.history.push('/dashboard');
        }
        if (nextProps.errors) {
            this.setState({errors: nextProps.errors});
        }
    }
    render() {
        const { errors } = this.state;

        return (
            <Row>
                <Col s={12} m={6} className="offset-m3">
                    <h2 className="center">Login</h2>
                    <form noValidate onSubmit={this.onSubmit}>
                        <Row>
                            <TextFieldGroup
                                placeholder="Username or email"
                                name="usernameOrEmail"
                                type="text"
                                value={this.state.usernameOrEmail}
                                onChange={this.onChange}
                                error={errors.usernameOrEmail}
                            />
                            <TextFieldGroup
                                placeholder="Password"
                                name="password"
                                type="password"
                                value={this.state.password}
                                onChange={this.onChange}
                                error={errors.password}
                            />
                            <Col s={12}>
                                <Link className='col s12' to="/forgotten-password">Forgotten password?</Link>
                                <Button className="btn-small right" waves="light">Login</Button>
                            </Col>
                        </Row>
                    </form>
                </Col>
            </Row>
        )
    }
}

Login.propTypes = {
    loginUser: PropTypes.func.isRequired,
    auth: PropTypes.object.isRequired,
    errors: PropTypes.object.isRequired
};

const mapStateToProps = (state) => ({
    auth: state.auth,
    errors: state.errors
});

export default connect(mapStateToProps, { loginUser })(Login);

TextFieldGroup.js

import React from 'react';
import classnames from 'classnames';
import propTypes from 'prop-types';
import { TextInput } from 'react-materialize';

const TextFieldGroup = ({
    name,
    placeholder,
    value,
    label,
    error,
    info,
    type,
    onChange,
    disabled
}) => {
    return (
        <React.Fragment>
            <TextInput
                type={type} 
                inputClassName={classnames('form-control form-control-lg', {
                    'is-invalid': error
                })}
                placeholder={placeholder}
                label={label}
                name={name} 
                s={12}
                value={value} 
                onChange={onChange}
                disabled={disabled}
            />
            {error && (<p className="red-text col s12 no-margin">{error}</p>)}
            {info && (<p className="helper-text col s12">{info}</p>)}
        </React.Fragment>
    )
}

TextFieldGroup.propTypes = {
    name: propTypes.string.isRequired,
    placeholder: propTypes.string,
    value: propTypes.string.isRequired,
    info: propTypes.string,
    error: propTypes.string,
    type: propTypes.string.isRequired,
    onChange: propTypes.func.isRequired,
    disabled: propTypes.string
}

TextFieldGroup.defaultProps = {
    type: 'text'
}

export default TextFieldGroup;

I expect the page to be able to render the login and register page correctly when using the React-Materialize TextInput ponent.

Using React Materialize's TextInput ponent breaks my site only in production.

In development it works fine. with no errors or warnings.

I've seen some Stack posts about ponents not being exported/imported correctly. However my ponents all appear to be exported/imported correctly. The TextFieldGroup ponent is a default export and is imported as such, while TextInput is a named export and is imported using curly brackets.

The TextFieldGroup is a wrapper ponent the handles all the input validation and renders the Materialize TextInput p.

I have narrowed the issue down to the TextInput ponent as I have tried replacing the TextFieldGroup ponent with just the <input /> and putting the <input /> inside my TextFieldGroup wrapper p.

Please my project with the issue. Click the login button to see if fail to render the page because its trying to the TextInput.

Login.js

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { Row, Col, Button } from 'react-materialize';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import TextFieldGroup from '../../ponents/mon/TextFieldGroup';
import { loginUser } from '../../actions/authActions';

class Login extends Component {
    state = {
        usernameOrEmail: '',
        password: '',
        errors: {}
    }
    onChange = e => {
        const errors = this.state.errors;
        errors[e.target.name] = '';
        this.setState({
            [e.target.name]: e.target.value,
            errors
        });
    }
    onSubmit = e => {
        e.preventDefault();

        const userData = {
            usernameOrEmail: this.state.usernameOrEmail,
            password: this.state.password
        }
        this.props.loginUser(userData);
    }
    ponentDidMount = () => {
        if (this.props.auth.isAuthenticated) {
            this.props.history.push('/dashboard');
        }
    }
    ponentWillReceiveProps = (nextProps) => {
        if (nextProps.auth.isAuthenticated) {
            this.props.history.push('/dashboard');
        }
        if (nextProps.errors) {
            this.setState({errors: nextProps.errors});
        }
    }
    render() {
        const { errors } = this.state;

        return (
            <Row>
                <Col s={12} m={6} className="offset-m3">
                    <h2 className="center">Login</h2>
                    <form noValidate onSubmit={this.onSubmit}>
                        <Row>
                            <TextFieldGroup
                                placeholder="Username or email"
                                name="usernameOrEmail"
                                type="text"
                                value={this.state.usernameOrEmail}
                                onChange={this.onChange}
                                error={errors.usernameOrEmail}
                            />
                            <TextFieldGroup
                                placeholder="Password"
                                name="password"
                                type="password"
                                value={this.state.password}
                                onChange={this.onChange}
                                error={errors.password}
                            />
                            <Col s={12}>
                                <Link className='col s12' to="/forgotten-password">Forgotten password?</Link>
                                <Button className="btn-small right" waves="light">Login</Button>
                            </Col>
                        </Row>
                    </form>
                </Col>
            </Row>
        )
    }
}

Login.propTypes = {
    loginUser: PropTypes.func.isRequired,
    auth: PropTypes.object.isRequired,
    errors: PropTypes.object.isRequired
};

const mapStateToProps = (state) => ({
    auth: state.auth,
    errors: state.errors
});

export default connect(mapStateToProps, { loginUser })(Login);

TextFieldGroup.js

import React from 'react';
import classnames from 'classnames';
import propTypes from 'prop-types';
import { TextInput } from 'react-materialize';

const TextFieldGroup = ({
    name,
    placeholder,
    value,
    label,
    error,
    info,
    type,
    onChange,
    disabled
}) => {
    return (
        <React.Fragment>
            <TextInput
                type={type} 
                inputClassName={classnames('form-control form-control-lg', {
                    'is-invalid': error
                })}
                placeholder={placeholder}
                label={label}
                name={name} 
                s={12}
                value={value} 
                onChange={onChange}
                disabled={disabled}
            />
            {error && (<p className="red-text col s12 no-margin">{error}</p>)}
            {info && (<p className="helper-text col s12">{info}</p>)}
        </React.Fragment>
    )
}

TextFieldGroup.propTypes = {
    name: propTypes.string.isRequired,
    placeholder: propTypes.string,
    value: propTypes.string.isRequired,
    info: propTypes.string,
    error: propTypes.string,
    type: propTypes.string.isRequired,
    onChange: propTypes.func.isRequired,
    disabled: propTypes.string
}

TextFieldGroup.defaultProps = {
    type: 'text'
}

export default TextFieldGroup;

I expect the page to be able to render the login and register page correctly when using the React-Materialize TextInput ponent.

• javascript
• reactjs
• webpack
• materialize

• Did you add react-materialize to devDependencies in your package.json? It should be in dependencies. – Robb216 Commented Jul 22, 2019 at 10:26
• No I did not. It's only in dependencies. Thank you. – daniel blythe Commented Jul 22, 2019 at 10:29
• Does the error still occur if you upload a non-minified version of your application to production? If so, does the error include a line number? – Robb216 Commented Jul 22, 2019 at 10:36
• I would give it a try. Is it a problem that locally I have three files(/static/js/bundle.js, /static/js/0.chunk.js and /static/js/main.chunk.js) and on prod I have only two (/static/js/1.a0ef44a6.chunk.js, /static/js/main.139a355e.chunk.js). – daniel blythe Commented Jul 22, 2019 at 10:57

1 Answer 1

Turns out I needed to delete package-lock.json and node_modules on the server then run $ npm install again.