title: Uncaught TypeError: _util_validationUtils__WEBPACK_IMPORTED_MODULE_1__.validateField(...) is null in React
body: <p>I'm making a React app which has some util functions related to validation of forms. A custom hook called <code>useForm</code> calls the validation util functions to validate its data but this error gets thrown when I call the util function. Error:</p>
  <pre class="lang-js prettyprint-override"><code>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
  </code></pre>
  <p>Here's my hook:</p>
  <pre class="lang-js prettyprint-override"><code>import { useState } from &quot;react&quot;;
  import { validateField, validateForm } from &quot;../util/validationUtils&quot;;
  
  export const useForm = initialState =&gt; {
      const [formState, setFormState] = useState(initialState);
      const [formErrors, setFormErrors] = useState({});
  
      const handleChange = e =&gt; {
          setFormState(formState =&gt; ({
              ...formState,
              [e.target.name]: e.target.value,
          }));
      };
  
      const handleBlur = (e, ...args) =&gt; {
          console.log(e.target.value, ...args);
  
          const [error, secondaryError, field] = validateField(e, ...args);
  
          setFormErrors(formErrors =&gt; ({
              ...formErrors,
              [e.target.name]: error || &quot;&quot;,
          }));
  
          if (field) {
              setFormState(formState =&gt; ({
                  ...formState,
                  [field]: secondaryError || &quot;&quot;,
              }));
          }
      };
  
      return [
          formState,
          formErrors,
          handleChange,
          handleBlur,
      ];
  };
  </code></pre>
  <p>And here's my validation function:</p>
  <pre class="lang-js prettyprint-override"><code>export const validateField = (e, ...args) =&gt; {
      const { name, value } = e.target;
      let error = null;
      let secondaryError = null;
      let field = null;
  
      if (value.length === 0) return error;
  
      switch (name) {
          case &quot;username&quot;:
              error = validateUsername(value)
                  ? null
                  : &quot;Username must not contain spaces&quot;;
              break;
          case &quot;email&quot;:
              error = validateEmail(value) ? null : &quot;Invalid email&quot;;
              break;
          case &quot;password&quot;:
              error = validatePassword(value)
                  ? null
                  : &quot;Password must be at least 8 characters, have an uppercase and lowercase letter and one special character&quot;;
  
              if (validateMatchingPasswords(value, ...args[0])) {
                  field = &quot;confirmPassword&quot;;
                  secondaryError = &quot;Passwords do not match&quot;;
              }
              break;
          case &quot;confirmPassword&quot;:
              error = validateMatchingPasswords(...args[0], value)
                  ? null
                  : &quot;Passwords do not match&quot;;
              break;
          case &quot;imageUrl&quot;:
              error = validateUrl(value) ? null : &quot;Invalid URL&quot;;
              break;
          default:
              break;
      }
  
      return [error, secondaryError, field];
  };
  </code></pre>
  <p><strong>In the form component I call the function handleBlur, exported from the hook. When I need <code>...args</code> like <code>confirmPassword</code> field's value I pass it on. I think the problem happens when I give the field an empty value (<code>e.target.value</code> is <code>&quot;&quot;</code>)</strong></p>