javascript - React Native error: Element type is invalid: expected a string or a classfunction but got: object - Stack Overflow

admin管理员组

文章数量:1134232

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/>
    }
}
}

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/>
    }
}
}

• javascript
• android
• reactjs
• react-native

Share Improve this question Follow edited Oct 21, 2017 at 9:02 ROMANIA_engineer 56.5k3030 gold badges208208 silver badges205205 bronze badges asked Jun 3, 2016 at 17:39 ParkicismParkicism 2,52555 gold badges2222 silver badges2121 bronze badges 0

Add a comment  | 

17 Answers 17

Sorted by: Reset to default 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.

Change your SwitchView definition to

export default class SwitchView extends Component...

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/>
    }
}
}

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';

I faced this issue when i wrote :

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

instead of writing like this :

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

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.

this error can be resolved by using Defualt

instead of export use export default

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.

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

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

I faced this issue

import Something from '@library';

Just changed to

import { Something } from '@library';

and vice verse

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 :)

How is that different from module.exports = SwitchView?

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

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

1. You forget to export or you export something incorrectly
2. 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.

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.

In my case I had replaced

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

in app.js this line with

const App = () => {

and it's worked for me.

İ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;

本文标签：