Element type is invalid React Native

react-native-elements
element type is invalid scrollview
react element type is undefined
react svg element type is invalid
check the render method of `app`.
dndprovider element type is invalid: expected a string
element type is invalid expected a string icon
you might have mixed up default and named imports.

I have been having this error for hours and I don't know how to fix it, it's driving me crazy. In this shortcode here, I keep getting this 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.

import * as Font from 'expo-font';
import React, {Component} from "react";
import { ActivityIndicator } from 'react-native'
import {Application} from "./src/Application.js";

class App extends Component {
    constructor() {
        super();
        this.state = {
            isReady: false,
        };
    }
    componentWillMount = async() => {
        await Font.loadAsync({
            Roboto: require('./node_modules/native-base/Fonts/Roboto.ttf'),
            Roboto_medium: require('./node_modules/native-base/Fonts/Roboto_medium.ttf')
        });
        this.setState({isReady: true,});
    };

    render() {
        if (!this.state.isReady) {
            return <ActivityIndicator />
        }
        return (
            <Application/>
        );
    }
}


export default App;

The error pointed to _callee$ in 18:16, which is this line

this.setState({isReady: true,});

What could be causing this and a possible solution?

I tried importing import {Application} from "./src/Application.js" without {} before, but it also returned the error of

Check the render method of _default

Edited: Added "Application.js"

import React from 'react';
import Root from "native-base";
import { createAppContainer } from '@react-navigation/native';
import { createStackNavigator } from 'react-navigation-stack';
import { createDrawerNavigator } from 'react-navigation-drawer';
import Home from "./screens/home/index";
import Email from "./screens/email/index";
import ProfileScreen from "./screens/ProfileScreen";
import SideBar from "./screens/SideBar/SideBar";

const Drawer = createDrawerNavigator(
    {
        Home: { screen: Home},
        //Email: { screen: Email},
        ProfileScreen: { screen: ProfileScreen}
    },
    {
        initialRouteName: "Home",
        contentOptions: {
            activeTintColor: "#e91e63"
        },
        contentComponent: props => <SideBar {...props}/>
    }
);

const AppNavigator = createStackNavigator (
    {
        Drawer: {screen: Drawer}
    },
    {
        initialRouteName: "Drawer",
        headerMode: "none"
    }
);

const AppContainer = createAppContainer(AppNavigator);

export default () =>
    <Root>
        <AppContainer/>
    </Root>

With this statement,

export default () =>
    <Root>
        <AppContainer/>
    </Root>

Without parentheses,it will interpreted as

export default () =>();
    <Root>
        <AppContainer/>
    </Root>

So,it will return undefined which is not valid react element.Because of this above error will occur.

wrap the export default statement with ().It should be

  export default () =>( 
                       <Root> <AppContainer/></Root> 
                      );

OR

export default () =>( <Root> <AppContainer/></Root> );

And import should be

import Application from "./src/Application";

Invariant Violation: Element type is invalid: expected a string( for , The code does NOT recognize components by React Native. PHPStorm does not link the imported component (like it should do), so that seems to be related to this​  Expo react native Element type is invalid: expected a string or a class/function but got: undefined Hot Network Questions Was there a scene where Frodo's Elven cloak was shown to keep him warm while he feels cold

Try

import * as Application from './src/application.js';

You are not exporting a named item but just a function byt you are trying to import a named item.

Uncaught Invariant Violation: Element type is invalid: expected a , import React from 'react'; import { AppRegistry, View, Text } from 'react-native'; class App extends React.Component { render(){ return ( <View> <Text> Sierra </​Text>  October 23, 2019. While I was working on a react native project, I suddenly came across this particular react native error. Here’s the full error: Invariant Violation: 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 that you are exporting Application correctly from Application.js. It should just be "export Application".

[React Native]Invariant Violation: Element type is invalid: expected a , Here's full description:. “[React Native]Invariant Violation: Element type is invalid: expected a string( for built-in…” is published by Tran Ngoc  j'ai appliqué ce tutoriel pour lire une video: enter link description here this tutrial is in typescript and I'm using normal JSx component so (it was the developer's advice): Rename all .tsx and

You are probably importing your components the wrong way.

How are you exporting Application in Application.js ?

Maybe remove {} will fix it

import Application from "./src/Application.js";

There is two ways you can export/import

export function ...
// another file 
import {...} from '...'

Or using the default export

export default function ...
// another file
import ... from '...'

If you want to import it like

import {Application} from "./src/Application.js";

You should be exporting it like

export function Application...

And if you look ate what the error says...

...You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Common bugs in React Native, Invariant Violation: 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 'App'. REACT-Native react-navigation-tabs createBottomTabNavigator tabBarVisible false not working Hot Network Questions Sed: within the same line, stop repeating pattern replacement once a certain string is reached

[Solved]react navigation Invariant Violation: Element type is invalid , I am trying to setup a new react native project and new component but I got the error: Invariant Violation: Element type is invalid: expected a string (for built-in  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. · Issue #16332 · facebook/react-native · GitHub.

Invariant Violation: Element type is invalid: expected a string (for , Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function React Native Error Fix. Leave a  Warning: React.createElement: 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 Whil

Keep getting this error: Invariant violation element type is invalid , r/reactnative: A community for learning and developing native mobile applications using React Native by Facebook. Although we try to make the experience of using React Native Elements hassle-free, time to time you may encounter some problems along the way. On this page you can find solutions to commonly encountered issues. |> Invariant Violation: Element type is invalid This error occurs when trying to import a component that doesn't exist.

Comments
  • thanks for your reply, I tried changing the import as you said, but it returned the following error Check the render method of _default . If I dont change it and only change the export default () => (<Root> <AppContainer/></Root>); . The error remains
  • thanks for your reply. I tried your way and got a new error Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object
  • tested it but I do not get you exception so I cannot give any more insights, sorry :/
  • I tried without {} initially. If I do that, this line would have this error return ( <Application/> );
  • @AnhMinhTran please show what is inisde ./src/Application.js