Formik: Invariant Violation: Element type is invalid: expected a string(for built-in components) or a class/function (for composite components) but got: object.

[jigz]

Current Behavior

Related to #785 
Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
Check the render method of `Formik`.

This error is located at:
   in Formik (at index.js:49)
   in RCTView (at View.js:112)
   in View (at View.js:9)
   in ViewNB (at connectStyle.js:384)
   in Styled(ViewNB) (at index.js:48)
   in RCTView (at View.js:112)
   in View (at View.js:9)
   in ViewNB (at connectStyle.js:384)
   in Styled(ViewNB) (at index.js:47)
   in RCTView (at View.js:112)
   in View (at KeyboardAvoidingView.js:184)
   in KeyboardAvoidingView (at index.js:39)
   in Login (at index.js:41)
   in LoginForm (at SceneView.js:31)
   in SceneView (at CardStack.js:405)
   in RCTView (at View.js:112)
   in View (at createAnimatedComponent.js:134)
   in AnimatedComponent (at Card.js:26)
   in Card (at PointerEventsContainer.js:55)
   in Container (at CardStack.js:436)
   in RCTView (at View.js:112)
   in View (at CardStack.js:365)
   in RCTView (at View.js:112)
   in View (at CardStack.js:364)
   in CardStack (at CardStackTransitioner.js:97)
   in RCTView (at View.js:112)
   in View (at Transitioner.js:187)
   in Transitioner (at CardStackTransitioner.js:49)
   in CardStackTransitioner (at StackNavigator.js:60)
   in Unknown (at createNavigator.js:52)
   in Navigator (at createNavigationContainer.js:216)
   in NavigationContainer (at App.js:15)
   in RCTView (at View.js:112)
   in View (at Root.js:13)
   in Root (at connectStyle.js:384)
   in Styled(Root) (at App.js:14)
   in App (at setup.js:39)
   in StyleProvider (at setup.js:38)
   in Setup (created by AwakeInDevApp)
   in RCTView (at View.js:112)
   in View (created by AwakeInDevApp)
   in AwakeInDevApp (at registerRootComponent.js:35)
   in RootErrorBoundary (at registerRootComponent.js:34)
   in ExpoRootComponent (at renderApplication.js:35)
   in RCTView (at View.js:112)
   in View (at AppContainer.js:102)
   in RCTView (at View.js:112)
   in View (at AppContainer.js:122)
   in AppContainer (at renderApplication.js:34)

Steps to Reproduce

Create-React-Native-App
Yarn add Formik
Yarn upgrade react --latest

Expected behavior

Form should be rendered and compatible with react ^16.3

Suggested solution(s)

Downgrading solves it but not an ideal permanent solution especially when you want to use with React Context.

Additional context

Error
react-native: 0.51.0,
react: 16.5.2,
formik: 1.3.1

No Error(downgrade)
react-native: 0.51.0,
react: 16.2.0,
formik: 1.3.1
or
react-native: 0.51.0,
react: 16.5.2,
formik: 0.11.11

CodeSandbox Link:

---

• Formik Version: 1.3.1
• React Version: 16.5.2
• TypeScript Version: Using Flow
• Browser and Version: React Native(Expo) on iPad
• OS: iOS 12.0.1
• Node Version: 8.11.4
• Package Manager and Version: Yarn 1.9.4

[Andrejs1979]

Same here
"react": "^16.5.2",
"formik": "^1.3.1",

[smakosh]

Same here

[mackbrowne]

Also getting this as of today after updating react.

[jaredpalmer]

Can you create a snack or something? Are you using the named export?

[h0jeZvgoxFepBQ2C]

~Getting the same in the sandbox: https://codesandbox.io/s/640mw0n1kz~

Was happening because I used Formik 1.2 in the sandbox.

[jaredpalmer]

Any updates?

[dclark27]

I resolved this by updating react-dom from 16.0.0 to 16.7.0.

Additional Context:
I was running Formik 0.11.1 and updated to 1.4.3 when I saw this appear.

[mackbrowne]

Updating formik fixed it for me too! @jaredpalmer

[lzacharkow]

I had the same issue—I was running [email protected] and [email protected]. Not react-native though.

I upgraded react-dom to 16.7.0 and the issue is resolved 🎉

[TimoRuetten]

I am using [email protected] and [email protected] and still getting this error.

Downgrading React to 16.7 fixed it for me.

[ManasN]

Is there any way to get around this without downgrading etc

[omerdn1]

Why was this closed? I'm getting the same error using react native.

"formik": "^1.5.8",
"react": "16.8.3",
"react-dom": "^16.8.6",

[Mnabawy]

same issue here is my package.json
"dependencies": {
"@types/node": "^12.12.14",
"expo": "^35.0.0",
"formik": "^2.0.8",
"react": "16.8.3",
"react-country-region-selector": "^1.4.5",
"react-dom": "16.8.3",
"react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz",
"react-native-country-picker-modal": "^1.9.8",
"react-native-elements": "^1.2.7",
"react-native-gesture-handler": "^1.3.0",
"react-native-material-dropdown": "^0.11.1",
"react-native-phone-input": "^0.2.4",
"react-native-reanimated": "^1.2.0",
"react-native-screens": "^1.0.0-alpha.23",
"react-native-web": "^0.11.7",
"react-navigation": "^4.0.10",
"react-navigation-drawer": "^2.3.3",
"react-navigation-stack": "^1.10.3",
"yup": "^0.27.0"
},
"devDependencies": {
"@types/jest": "^24.0.23",
"@types/react": "^16.9.15",
"@types/react-native": "^0.57.65",
"@types/react-test-renderer": "^16.9.1",
"babel-preset-expo": "^7.1.0",
"prettier": "1.19.1",
"react-native-device-info": "^5.4.0",
"react-native-vector-icons": "^6.6.0",
"typescript": "^3.6.4"
},

[seanbetts]

I'm getting this issue
"formik": "^2.1.5", "react": "^16.9.0", "react-dom": "^16.9.0"

Did anyone find another solution?

[maks-io]

@seanbetts (or anybody else) - did you maybe use default import import Formik from "formik"; instead of import { Formik } from "formik";? I just accidentally did this and got the same error as you guys, even though I have used formik ~1000 times in the past already :D

[seanbetts]

@maks-io - I was using import { Formik } from "formik" already so doesn't solve my issue I'm afraid

[johnrom]

As far as I've seen, Formik is almost never the issue in this scenario. Many times when updating from an old React to a new React, the old environment may have been bootstrapped with a webpack config that is no longer supported by React or newer dependencies. I recommend creating a new environment with an up-to-date version of your favorite tool. If _that_ works, you're gonna have to figure out what's different in your environment. Running a diff on your webpack could help. If you're using a dev server like CRA, CRNA, TSDX, etc, you should update that _and all of its dependencies_ which will update its internal webpack config.

This issue is closed because the OP stopped responding and didn't provide any further info. If you still have an issue even after creating a fresh new environment, open a new issue or pop into the discord and hopefully someone can help.

[manny1001]

Same error any help?

[johnrom]

@manny1001 Try recreating your environment in Codesandbox and link the repro here if it doesn't work. The chances are, however, it will work and that may help you find a configuration issue in your environment.