-
-
Notifications
You must be signed in to change notification settings - Fork 2.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
React 16.8 | this.props.formik.registerField is not a function #1368
Comments
seeing this too with react v 16.5.1 |
same with react v16.8.4 |
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:
I changed it to and now all is well:
Hope that helps. |
I ran into the same issue and solved it by moving the |
Updating to Formik |
Still have the issue with |
Any update with this issue? |
For whatever reason it started working for me. Formik: 1.51 |
Having the same problem on |
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 |
My guess is that it has to do with the way that
|
@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 <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 Now, when I moved What can a component do for |
Took a look at CodeSandbox: https://codesandbox.io/s/movo3rpq88 |
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 |
You are effectively creating a portal in your example FYI |
but a portal would preserve context, your code is mounting React to a brand new dom node. |
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! |
I'm going to close this issue. If you are seeing this, it means that you have rendered a I am going to open a new issue to add a warning message that will yell at you if Formik context is undefined within |
FWIW I had a similar issue and I was not using TS and all my Formik components were wrapped in a |
I got this error with
two versions in yarn workspaces. somehow it break something and throw I removed "formik": "1.5.0", from dependencies and start working again :D I hope this help! |
@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 :( |
@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. |
@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. |
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 |
In my case I was getting this error in a test suite (jest, react-testing-library).
|
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.Formik Version: 1.5.1
React Version: >= 16.3.0
The text was updated successfully, but these errors were encountered: