reactjs - react-dom.production.min.js:216 TypeError: Cannot read property 'split' of undefined on production environment

Question

I am having this issue every time I deploy my react application to Heroku:

const TodoSuggestion = () => {
    const classes = useStyles();
    const {register, handleSubmit, errors, setValue} = useForm();
    const [navData, setNavData] = useState(SUGGEST_NAVBAR_DATA);

    const onSubmit = (data) => {
        console.log(data)
    }

    React.useEffect(() => {
        register("fullName");
        register("todoTitle");
        register("todoDescription");
    }, [register])

    return (
        <div>
            <Navbar navData={navData}></Navbar>
            <div style={{display: 'flex', justifyContent: 'center', alignItems: 'center', height: '50vh'}}>
                <form onSubmit={handleSubmit(onSubmit)}>
                    <Grid container spacing={2}>
                        <Grid item xs={12}>
                            <Typography variant="h6" className={classes.Typography}>
                                <Box m={1} letterSpacing={6}>
                                    Send Me Your Creative Todo Ideas
                                </Box>
                            </Typography>
                        </Grid>
                        <ThemeProvider theme={theme}>
                            <Grid item xs={12}>
                                <TextField
                                    className={classes.margin}
                                    label="Your Full Name"
                                    variant="outlined"
                                    id="fullName"
                                    ref={register({required: true})}
                                    inputRef={register} name="fullName"
                                />
                            </Grid>
                            <Grid item xs={12}>
                                <TextField
                                    className={classes.margin}
                                    label="Title of the Todo"
                                    variant="outlined"
                                    id="todoTitle"
                                    ref={register({required: true})}
                                    inputRef={register} name="todoTitle"
                                />
                            </Grid>
                            <Grid item xs={12}>
                                <TextField
                                    className={classes.margin}
                                    label="Description of the Todo"
                                    variant="outlined"
                                    id="todoDescription"
                                    ref={register({required: true})}
                                    inputRef={register} name="todoDescription"
                                />
                            </Grid>
                        </ThemeProvider>
                    </Grid>
                    <BootstrapButton variant="contained" style={{backgroundColor: "darkslategray"}} disableRipple type="submit"
                                     className={classes.margin}>
                        <WhiteTextTypography variant="h6" className={classes.title}>
                            <Box m={1} letterSpacing={6}>
                                Send Request
                            </Box>
                        </WhiteTextTypography>
                    </BootstrapButton>
                </form>
            </div>
        </div>
    );

}



export default TodoSuggestion;

Any idea what be the issue? the code works locally however, once deployed to Heroku it generates the above error. I already searched for a smiliar error but could not manage to solve the issue.

I am using the following buildpack: https://github.com/mars/create-react-app-buildpack

I saw that an issue might be that the component is loading multiple times. However, even once including the useEffect the same error still occurs.

question from:https://stackoverflow.com/questions/65644515/react-dom-production-min-js216-typeerror-cannot-read-property-split-of-undef

Answer 1

Looking at your code sample, I think you are using material-ui with react-hook-form.

I found 2 issues, and I hope this will help you.

1. You don't need that useEffect part

    React.useEffect(() => {
        register("fullName");
        register("todoTitle");
        register("todoDescription");
    }, [register])

This part is not needed for material UI.

2. just use inputRef, not the ref.

Make the code as

<TextField
   className={classes.margin}
   label="Your Full Name"
   variant="outlined"
   id="fullName"
   inputRef={register({required: true})}
   name="fullName"
/>