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

[KevinMongiello]

After upgrading from React 16.0.0 to 16.3.0, I'm getting the following breaking changes when trying to render my <Formik><Form /></Formik> component.

Uncaught TypeError: this.props.formik.registerField is not a function
 at FieldInner.componentDidMount

Formik Version: 1.5.1
React Version: >= 16.3.0

[pvijeh]

seeing this too with react v 16.5.1

[amelieMa]

same with react v16.8.4

[russpitre]

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.

[ColadaFF]

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

[mikemclin]

Updating to Formik 1.5.2 fixed this for me

[phil-lgr]

Still have the issue with 1.5.2

[vget98]

Any update with this issue?

[KevinMongiello]

For whatever reason it started working for me.
i didn't change a thing except the react packages.

Formik: 1.51
react: 16.8.6
react-dom: 16.8.6

[gaspardip]

Having the same problem on 1.5.2, any workarounds?

[jaredpalmer]

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.

[jaredpalmer]

My guess is that it has to do with the way that connect is including the types for create-react-context. I believe that import<> could be rpoblematic for those on a typescript version less that 2.9.

import * as React from 'react';
import { FormikContext } from './types';
export declare const FormikProvider: React.ComponentClass<import("create-react-context").ProviderProps<FormikContext<any>>, any>, FormikConsumer: React.ComponentClass<import("create-react-context").ConsumerProps<FormikContext<any>>, any>;
export declare function connect<OuterProps, Values = {}>(Comp: React.ComponentType<OuterProps & {
    formik: FormikContext<Values>;
}>): React.ComponentType<OuterProps>;

[gaspardip]

@jaredpalmer I tried to reproduce it on a CodeSandbox but I couldn't, everything was working fine, but no create-react-context was involved there, regarding your suspicions. I also am on TS 3.4

My original use case was this code, I'd wrap an entire Modal (3rd party component) with Formik

 <Formik onSubmit={onSubmit}>
      <Form>
        <Modal testId="create-partner-modal">
          <ModalHeader testId="modal-header">
            <h1>New partner</h1>
          </ModalHeader>
          <ModalBody>
            <Field name={"test"} component={TextField} />
          </ModalBody>
          <ModalFooter>
            <Button kind="tertiary" onClick={onCancel} noFill>
              Cancel
            </Button>
            <Button kind="primary">Create partner</Button>
          </ModalFooter>
        </Modal>
      </Form>
    </Formik>

This would throw the aforementioned error, see how formik is empty.

Now, when I moved Formik and Form inside Modal everything worked properly, so I have no clue about whats going on. I have access to Modal's code, so if you point me in the right direction I might be able to solve it.

What can a component do for Formik to stop working?

[gaspardip]

Took a look at Modal's code and from what I understand it seems Formik doesn't like its fields to be rendered outside the underneath <form>

CodeSandbox: https://codesandbox.io/s/movo3rpq88

[jaredpalmer]

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

[jaredpalmer]

You are effectively creating a portal in your example FYI

[jaredpalmer]

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

[gaspardip]

Good to know. Unfortunately i'm not the maintainer of that component, I just happen to be required to use it. I'll contact the person in charge of that component and notify them about this issue.

One would think that by the jsx markup, the content was being rendered in a single tree, but this was not the case.

Thanks a lot!

[jaredpalmer]

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()

[leanne2]

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.

[ken0x0a]

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 :D

I hope this help!

[yoerivdm]

@leanne2 how do you get this right in development? I tried linking formik from my application in my library but it fails on the npm link command, giving an error that tsconfig.base is not found :-(

Had similar issues with React using hooks ... which is solved by linking (as stated on the react website). Linking formik doesn(s seem obvious in this case :(

[leanne2]

@yoerivdm My component library is a separate self-contained repo on a Storybook server with its own dev env so I do all the library development in the library itself. Therefore I was not using npm link. The duplicate formik issue only surfaced later when I imported the library repo into my application. As noted i am not using TS. If you can have your library as a self-contained repo with its own dev env and not rely on implicit dependencies being resolved by the consuming application via npm link this is probably going to be a more robust approach and will mitigate a range of dependency issues such as this one. You just have to make sure you use peerDependencies to ensure your library and your application stay aligned in terms of shared dependencies.

[yoerivdm]

@leanne2 Okay ... so, to resolve my issues I pushed my library dist folder to git and I added the git-repo as a dependency to my application. That way it all works as expected.

[igor0ser]

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