Check the render method of `Formik`

Viewed 1752

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.

0 Answers
Related