CODEWITHSUNDEEP
javascriptreactjsformik
caribbean
caribbean

Reputation: 317

Formik submitForm() TypeError

IMPORTANT: Installing older version of Formik gets rid of this error. I used npm install [email protected] --save to solve this. Starting with 2.0.8 bug comes back.

I was trying to use Formik for the first time and was following a guide, but applying it to my form, where my divs and inputs had different classes and the layout was different but I don't think that's the issue.

I couldn't find in google anyone having this error. I'll add the whole code form the file because some of the problems are possibly because of imports.

This is the error from browser console:

Warning: An unhandled error was caught from submitForm() TypeError: Function has non-object prototype 'undefined' in instanceof check
    at Function.[Symbol.hasInstance] (<anonymous>)
    at Formik.tsx:757

Error happens when I press submit button when the code is as shown below

import React,{useState} from 'react'
import * as Yup from 'yup'
import {Formik} from 'formik'
import Error from './Error'

const ValidationSchema = Yup.object().shape({
    nicknameField: Yup.string().min(1,"Minimal length: 1").max(16, "Maximum length: 16")
    .required("Minimum length: 1")
    .matches("^[a-zA-Z0-9\\[\\]!@_-]{1,16}$", "Only A-Z, a-z, 0-9, []!@_- characters are allowed")
});

export default function ChooseNickname(){
    return(
        <Formik initialValues={{nicknameField:""}}
        validationSchema={ValidationSchema}
        onSubmit={(values, { setSubmitting, resetForm }) => {
            // setSubmitting(true);

            setTimeout(() => {
              alert(JSON.stringify(values, null, 2));
              resetForm();
              setSubmitting(false);
            }, 500);
          }
        }>
            {({values, errors, touched, handleChange, handleBlur, handleSubmit, isSubmitting}) => (
                <form onSubmit={handleSubmit}>
                <div className="form-group">
                    <h2 className="font-weight-bold text-dark">Set your nickname</h2>
                    <input type="text" 
                    className={touched.nicknameField && errors.nicknameField? "form-control is-invalid":"form-control"}
                    name="nicknameField" 
                    id="nicknameField"
                    placeholder="nickname"
                    onChange={handleChange}
                    onBlur={handleBlur}
                    value={values.nicknameField}
                    />
                    <pre>{JSON.stringify(values, null, 2)}</pre>
                    {console.log(errors)}
                </div>
                <button type="submit" className="btn btn-primary" disabled={false}>Submit</button>
                </form> 
            )}
        </Formik>
    );
};

But if i change <form onSubmit={handleSubmit}> to 

<form onSubmit={() => {
    alert("formik submitting")
}}>

then there is no error, but its obviously useless, because in this case its not a Formik form anymore, validation isnt being done, etc...

Upvotes: 2

Views: 13568

Answers (1)

awran5
awran5

Reputation: 4546

Actually your code is working fine.. I've tested (copy/pasted) it on sandbox with the latest Formik version v2.1.4 and it seems to work.

Not sure but it could be some issue with other libraries in your development environment? or maybe node_modules cache.

I did some simple modification to make sure and added some missing classes. Check it out at this sandbox

Upvotes: 1

Related Questions