DEV Community

ProGamer2711
ProGamer2711

Posted on

Uncaught TypeError: _util_validationUtils__WEBPACK_IMPORTED_MODULE_1__.validateField(...) is null in React

I'm making a React app which has some util functions related to validation of forms. A custom hook called useForm calls the validation util functions to validate its data but this error gets thrown when I call the util function. Error:

Uncaught TypeError: _util_validationUtils__WEBPACK_IMPORTED_MODULE_1__.validateField(...) is null
    handleBlur useForm.js:18
    onBlur SignUp.js:90
    React 23
    js index.js:6
    factory react refresh:6
    Webpack 3
2 useForm.js:18
Enter fullscreen mode Exit fullscreen mode

Here's my hook:

import { useState } from "react";
import { validateField, validateForm } from "../util/validationUtils";

export const useForm = initialState => {
    const [formState, setFormState] = useState(initialState);
    const [formErrors, setFormErrors] = useState({});

    const handleChange = e => {
        setFormState(formState => ({
            ...formState,
            [e.target.name]: e.target.value,
        }));
    };

    const handleBlur = (e, ...args) => {
        console.log(e.target.value, ...args);

        const [error, secondaryError, field] = validateField(e, ...args);

        setFormErrors(formErrors => ({
            ...formErrors,
            [e.target.name]: error || "",
        }));

        if (field) {
            setFormState(formState => ({
                ...formState,
                [field]: secondaryError || "",
            }));
        }
    };

    return [
        formState,
        formErrors,
        handleChange,
        handleBlur,
    ];
};
Enter fullscreen mode Exit fullscreen mode

And here's my validation function:

export const validateField = (e, ...args) => {
    const { name, value } = e.target;
    let error = null;
    let secondaryError = null;
    let field = null;

    if (value.length === 0) return error;

    switch (name) {
        case "username":
            error = validateUsername(value)
                ? null
                : "Username must not contain spaces";
            break;
        case "email":
            error = validateEmail(value) ? null : "Invalid email";
            break;
        case "password":
            error = validatePassword(value)
                ? null
                : "Password must be at least 8 characters, have an uppercase and lowercase letter and one special character";

            if (validateMatchingPasswords(value, ...args[0])) {
                field = "confirmPassword";
                secondaryError = "Passwords do not match";
            }
            break;
        case "confirmPassword":
            error = validateMatchingPasswords(...args[0], value)
                ? null
                : "Passwords do not match";
            break;
        case "imageUrl":
            error = validateUrl(value) ? null : "Invalid URL";
            break;
        default:
            break;
    }

    return [error, secondaryError, field];
};
Enter fullscreen mode Exit fullscreen mode

In the form component I call the function handleBlur, exported from the hook. When I need ...args like confirmPassword field's value I pass it on. I think the problem happens when I give the field an empty value (e.target.value is "")

Top comments (0)