I'm currently getting the following error with my React app:
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of
Formik.
I am getting this error because I am wrapping my Submit button in Apollo's <Mutation> component to enable me to post data to my graph database:
<Mutation mutation={CREATE_EVENT} variables={eventID, values.eventName, null, null, values.favourite, values.broadcast}>
{postMutation => <Button
type="submit"
onClick={postMutation}
disabled={isSubmitting}
className={classes.saveMem}
>
Save
</Button>}
</Mutation>
When I remove Apollo's <Mutation> component the Formik form renders as expected:
<Button
type="submit"
onClick={() => CreateMem(props.values.file, values)}
disabled={isSubmitting}
className={classes.saveMem}
>
Save
</Button>
I'm unsure whether this is a bug with Formik or if there is another issue.
I have seen a few other people seeing the same error message and they have found a solution by updating their version of Formik, React and React-Dom. I'm currently running the current versions of all of them:
"formik": "^2.1.5",
"react": "^16.9.0",
"react-dom": "^16.9.0",
The other thing I've seen suggested is to import Forms from react-bootstrap instead of from Formik but that doesn't seem to work either.