Navigate back to the homepage

how to solve element type is invalid expected a string in react native?

Infinitbility
React Native
June 19th, 2022 · 1 min read

Hi Friends 👋,

Welcome To Infinitbility! ❤️

To fix Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in. In this issue, You have to check your imported components and change as per exported in your project.

Today, I’m going to show how do I fix the element type is invalid expected a string in react native, here we will take two cases of this issue that cause this error.

  1. Issue caused by external components
  2. Issue caused by internal components

Here, we will learn to solve this issue based on their code.

Let’s start with Issue caused by external components

Issue caused by external components

Here, when you know this issue is caused by external components which you have imported into your project.

Then you have to Check

  1. Package path is correct or not
  2. If correct go to their code and then check for exporting their component they are using the default keyword or not.

For example.

I have imported the below package like this ( but this will work they are exported like export default WebView )

1import WebView from 'react-native-webview-messaging/WebView';

But when I checked they are exporting this package like export WebView

so in this case we have to import like below.

1import { WebView } from 'react-native-webview-messaging/WebView';

Issue caused by internal components

Here, when you know this issue is caused by internal components which you have created and imported into your project.

Then you have to Check

  1. imported path is correct or not.
  2. if correct check whether the component is exported or not.
  3. if exported check their syntax like the below example.

If you are able to see components exported with the default keyword.

then you import it like below

1import ErrorMessage from '../Components/ErrorMessage';

Else

1import {ErrorMessage} from '../Components/ErrorMessage';

I hope it’s help you, All the best 👍.

Follow me on Twitter

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Guide book

Guidebook: The Javascript Monorepo Photoshop Guide

Tutorials

Categories

More articles from Infinitbility

how to split string in react native?

Example of split string in react native with step by step guide.

June 19th, 2022 · 1 min read

how to get key and value from json array of object in react native?

Example of to get key and value from json array of object in react native with step by step guide.

June 18th, 2022 · 1 min read
© 2020–2022 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]