Uncaught TypeError: ... is not a function

709 views Asked by At

I would really appreciate another pair of eyes to review why this issue persists.

Basically, a component does some check with validation functions imported from another file

...
const {emailField, phoneFieldUS, postalCodeField} = validators;

class ReturnForm extends React.Component {

...

    formHasAnyErrors = () => {
        console.log("phoneFieldUS type ", typeof phoneFieldUS)
        console.log("postalCodeField type ", typeof postalCodeField)

        const zipCodeValid = postalCodeField(form.contactInfo.postalCode);
        const emailValid = emailField(form.contactInfo.email);
        const mobileValid = phoneFieldUS(form.contactInfo.mobile);
        if (!zipCodeValid || !emailValid || !mobileValid) {
            return true;
        }

        return Object.values(errors.contactInfo).find(el => !!el);
    };

...

}

And the validators imported looks like this:

exports.default = exports.validators = exports.validatorFactory = exports.statuses = exports.layouts = void 0;

const validatorFactory = (test, pass = () => {}, fail = () => {}) => {
  return value => {
    const validValue = test(value);

    if (validValue === true) {
      pass();
    } else {
      fail();
    }

    return validValue;
  };
};


exports.validatorFactory = validatorFactory;
const validators = {
emailField: validatorFactory(value => {
    return /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/.test(value); // eslint-disable-line max-len
  }),
  postalCodeField: validatorFactory(value => { 
    return ((value.length === 5 && /^\d+$/.test(value)) ^ (value.length === 6 && /\d/.test(value) && /[a-zA-Z]/.test(value)))
  }),
  emptyField: validatorFactory(value => value.length > 0 && !/^\s*$/.test(value)),
  phoneFieldUS: validatorFactory(value => /^\(?(\d{3})\)?[-\. ]?(\d{3})[-\. ]?(\d{4})$/.test(value))
};
exports.validators = validators;

What I absolutely don't understand is

        console.log("phoneFieldUS type ", typeof phoneFieldUS) // prints function
        console.log("postalCodeField type ", typeof postalCodeField) // prints undefined

Hence every time the ReturnForm component is complaining about Uncaught TypeError: postalCodeField is not a function

Like how?????? They're both defined almost the same way?????? Please tell me if I'm missing something, any help appreciated!

0

There are 0 answers