React Native error: Element type is invalid: expected a string or a class/function but got: object

Question

I am getting this error and I am having a lot of trouble fixing this.

What I am trying to do here is have 3 different screens and have a tabbar that navigates to each screen.

Here is my index:

import React, { Component } from 'react';
import { AppRegistry, Navigator, StyleSheet, View, Text } from 'react-native';

import Nav from './app/components/Nav';
import Screen from './app/Screen';

import Tabs from 'react-native-tabs'

import SwitchView from './SwitchView';

class Proj extends Component {

constructor(props){
    super(props);
}

render(){
    var x = "FeedView";
    return(

          <View style={styles.container}>
            <Tabs selected={x} style={{backgroundColor:'white'}}
                  selectedStyle={{color:'red'}} onSelect={el=> {x = el.props.name}}>
                <Text name="FeedView">First</Text>
                <Text name="WikiView" selectedIconStyle={{borderTopWidth:2,borderTopColor:'red'}}>Second</Text>
                <Text name="BoardView">Third</Text>
            </Tabs>

            <SwitchView id={x}/>

          </View>
    );
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
})

AppRegistry.registerComponent('Proj', () => Proj);

here is my SwitchView:

import Feed from './app/pages/Feed/Feed';
import Board from './app/pages/Board';
import Wiki from './app/pages/Wiki';

class SwitchView extends Component {
render(){
    var { id } = this.props;

    switch (id) {
        case "FeedView":
            return <Feed/>
        case "WikiView":
            return <Wiki/>
        case "BoardView":
            return <Board/>
    }
}
}

nybon · Accepted Answer · 2017-07-30 06:43:10Z

113

This is probably caused by some JS module export/import issues in your program, typically for one of the two reasons listed below:

You forget to export, or you export something incorrectly
You import something that doesn't exist, or you import something incorrectly

I ran into similar error, but in my case, it is not caused by export but caused by import, and I used the import statement incorrectly to import something that doesn't exist in the module.

In my case, the import was incorrectly written as:

import { MyComponent } from './MyComponents/MyComponent'

while actually it should be:

import MyComponent from './MyComponents/MyComponent'

And it drove me crazy and took me a whole day to figure it out and I hope this will save several hours for some people.

edited Jul 30, 2017 at 6:43

answered May 29, 2017 at 21:09

nybon

9,74110 gold badges64 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Eric Engel Over a year ago

I had this issue too. I learned that it depends on how MyComponent is exported. When you put 'export default MyComponent;' then the import is without {}. When you don't use the default keyword in the export, then you need to surround the component name with {}, i.e. { MyComponent }.

sohaib javed Over a year ago

Same here I just removed Curly braces in my import

Cory Baumer Over a year ago

In my case i needed to change "import * as Fork" to "import Fork"

user1207289 Over a year ago

I was getting this error when using navigate function when trying to route. Adding "{ }' to my imports resolved it . Like import {samplePage} from './samplePage'; and the export was like this export const samplePage = () => {...}

Raj R · Accepted Answer · 2016-06-03 18:26:01Z

26

Change your SwitchView definition to

export default class SwitchView extends Component...

answered Jun 3, 2016 at 18:26

Raj R

5121 gold badge4 silver badges13 bronze badges

1 Comment

Doug Watkins Over a year ago

@Parkicism you should accept this if it was your answer. It also looks like the first one to answer correctly.

tv3free · Accepted Answer · 2016-06-03 18:41:06Z

9

Modify your SwitchView to this:

import Feed from './app/pages/Feed/Feed';
import Board from './app/pages/Board';
import Wiki from './app/pages/Wiki';
export default class SwitchView extends Component {
render(){
    var { id } = this.props;

    switch (id) {
        case "FeedView":
            return <Feed/>
        case "WikiView":
            return <Wiki/>
        case "BoardView":
            return <Board/>
    }
}
}

answered Jun 3, 2016 at 18:41

tv3free

1831 silver badge19 bronze badges

Comments

Sujit · Accepted Answer · 2017-11-08 09:59:24Z

5

I faced this issue only for the packages installed. Previously I wrote as

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

I changed to

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

answered Nov 8, 2017 at 9:59

Sujit

6588 silver badges27 bronze badges

Comments

Nitin Patel · Accepted Answer · 2021-07-16 13:24:55Z

5

I faced this issue when i wrote :

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

instead of writing like this :

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

answered Jul 16, 2021 at 13:24

Nitin Patel

1091 silver badge1 bronze badge

Comments

urubuz · Accepted Answer · 2017-07-31 07:36:52Z

3

In my vase I was on react-native 0.46.4 and had something like import MainContainer from './app' where the app directory had a shared index.js file amongst Android and iOS, but React Native wasn't detecting an index.js inside app. Once I switched to import MainContainer from './app/index.js' it worked.

answered Jul 31, 2017 at 7:36

urubuz

3521 silver badge13 bronze badges

1 Comment

efratyo Over a year ago

This is exactly what happened to me on RN 0.42.3. Thanks!

Umer Aftab · Accepted Answer · 2020-09-22 06:48:05Z

2

this error can be resolved by using Defualt

instead of export use export default

answered Sep 22, 2020 at 6:48

Umer Aftab

212 bronze badges

1 Comment

Arindam Over a year ago

Thanks for the contribution Umer. Can you also please add a little description explaining your solution. Why do you think this will work, what makes you determine this is the solution. reading through these will help the OP understand their mistake better and be able to utilise your answer more effectively.

Ravi Mareboina · Accepted Answer · 2022-01-27 13:00:01Z

2

I faced this issue

import Something from '@library';

Just changed to

import { Something } from '@library';

and vice verse

answered Jan 27, 2022 at 13:00

Ravi Mareboina

1895 bronze badges

1 Comment

Eric Aya Over a year ago

This has already been mentioned in some other answers.

UdayanBKamble · Accepted Answer · 2021-06-16 09:10:31Z

In my case, the problem was with incorrectly npm installation of 'AppLoading'. I got error "Component Exception: Element type is invalid" while using react-navigation. There was advice statement below this error to check the render method of 'App'. I had not installed 'AppLoading' properly. I then install it as:

expo install expo-app-loading

and then changed app loading import to

import AppLoading from "expo-app-loading";

[note: make sure that your <AppLoading /> should contain onError prop]. Making these simple changes my app started working as expected.

Abid Ali · Accepted Answer · 2021-08-02 17:08:48Z

1

In my case the error gets fixed by checking the versions of react-navigation and react-navigation/drawer

I was having the @react-navigation version 5 and having the @react-navigation/drawer version 6 and this was causing the issue.

I removed the version 6 and then installed the @react-navigation/drawer version 5 and the issue was fixed

answered Aug 2, 2021 at 17:08

Abid Ali

7801 gold badge8 silver badges15 bronze badges

Comments

Joseph Owigo · Accepted Answer · 2021-08-24 14:27:50Z

1

I was facing the same problem I have to update all my navigation/stack and drawer to be on the latest versions all of them

answered Aug 24, 2021 at 14:27

Joseph Owigo

5945 silver badges12 bronze badges

Comments

Sankalp Sachan · Accepted Answer · 2022-08-06 08:51:47Z

1

I handled the same problem as your error is saying that your component is invalid which is SwitchView you are returning this component as object checkitout.

hope this hint helped you i am new in stackoverflow so not familiar with answer tab thankyou :)

answered Aug 6, 2022 at 8:51

Sankalp Sachan

242 bronze badges

Comments

chibeepatag · Accepted Answer · 2017-03-24 23:10:41Z

0

How is that different from module.exports = SwitchView?

For me module.exports works for all of my js files except one.

answered Mar 24, 2017 at 23:10

chibeepatag

394 bronze badges

Comments

Cray · Accepted Answer · 2020-03-29 11:37:45Z

0

This is probably caused by some JS module export/import issues in your program, typically for one of the two reasons listed below:

You forget to export or you export something incorrectly
You import something that doesn't exist or you import something incorrectly

I ran into similar error, but in my case it was not caused by export, but rather import. I used the import statement incorrectly to import something that doesn't exist in the module.

edited Mar 29, 2020 at 11:37

Cray

2,8468 gold badges25 silver badges34 bronze badges

answered Mar 29, 2020 at 4:35

Najathi

3,0651 gold badge30 silver badges29 bronze badges

Comments

Abhi · Accepted Answer · 2020-07-02 06:20:39Z

0

This error comes when you are trying to access a component which is not exported. In my case, I forgot to export a component and I was accessing it.

answered Jul 2, 2020 at 6:20

Abhi

1,1671 gold badge13 silver badges25 bronze badges

Comments

javed · Accepted Answer · 2022-01-01 06:45:10Z

0

In my case I had replaced

const App: () => React$Node = () => {

in app.js this line with

const App = () => {

and it's worked for me.

answered Jan 1, 2022 at 6:45

javed

4164 silver badges11 bronze badges

Comments

Joss · Accepted Answer · 2022-08-01 15:14:00Z

İn My Case I implement rafce Command and Then Somehow Forgot to Export the App.js

const App = () =>  {
  return (
    <NavigationContainer theme={theme}>
      <Stack.Navigator screenOptions={{ headerShown : false}} initialRouteName="Home">
        <Stack.Screen name='Home' component={Home}/>
        <Stack.Screen name='Details' component={Details}/>
      </Stack.Navigator>
    </NavigationContainer>
  );
}

And then I realized that I haven't add the Export . Then I changed My code into this and it worked Fine:

const App = () =>  {
  return (
    <NavigationContainer theme={theme}>
      <Stack.Navigator screenOptions={{ headerShown : false}} initialRouteName="Home">
        <Stack.Screen name='Home' component={Home}/>
        <Stack.Screen name='Details' component={Details}/>
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

Collectives™ on Stack Overflow

React Native error: Element type is invalid: expected a string or a class/function but got: object

17 Answers 17

4 Comments

1 Comment

Comments

Comments

Comments

1 Comment

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

17 Answers 17

4 Comments

1 Comment

Comments

Comments

Comments

1 Comment

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Linked

Related