formik: React 16.8 | this.props.formik.registerField is not a function

Not sure if this help you all but I was seeing the same error. I noticed i had an errant import statement (es5) like this:

import {
  Form,
  Formik
} from 'formik/dist/index';

I changed it to and now all is well:

import {
  Form,
  Formik
} from 'formik'

Hope that helps.

It doesn’t have to do with the form element. That error can only happen if you render a Field with out a parent Formik context

I’m going to close this issue. If you are seeing this, it means that you have rendered a <Field>, <Form>, etc. without a parent <Formik> (which is a context provider). The registerField method is used by <Field> to tell the parent <Formik> that your field has indeed mounted. The only way this can be undefined is in the aforementioned scenario.

I am going to open a new issue to add a warning message that will yell at you if Formik context is undefined within connect()

same with react v16.8.4

seeing this too with react v 16.5.1

FWIW I had a similar issue and I was not using TS and all my Formik components were wrapped in a <Formik /> tag so none of the suggestions above solved my issue. My form components where being imported in from a custom component library. It turned out that, for some reason, the component library was installing its own copy of formik so i had 2 formik in my node_modules tree. Even though they were exact same version, this was causing the above issue. The fix was to set formik as both a devDependency and a peerDependency in my component library so that only one copy was installed in my application.

Can you share code that is problematic? I have tested with latest versions of React and everything works fine. That error can only happen if your Field is not being rendered underneath a <Formik> component.

maybe it will help to someone:

I was moving files and my IDE somehow changed from:

import { Formik } from 'formik';

to

import { Formik } from 'formik/dist/index';

After that I’ve encountered issue with registerField is not a function

I got this error with

"formik": "1.5.0",
"formik": "1.5.4",

two versions in yarn workspaces.

somehow it break something and throw this.props.formik.registerField is not a function

I removed “formik”: “1.5.0”, from dependencies and start working again 😄

I hope this help!

but a portal would preserve context, your code is mounting React to a brand new dom node.

I ran into the same issue and solved it by moving the Field component as a direct child of the Formik component.