Uncaught 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.

[shibli786]

Do you want to request a feature or report a bug?
I think this is most probably is a Bug

index.js:946 Uncaught 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.

How ever i have exported All component properly

// Forms.js

   import React from 'react'
   import ReactDOM from 'react-dom';
  export default class App extends React.Component{

      render(){
          return (
               <div>
             <ul>
	          <li>Home</li>
	     </ul>
                        {this.props.children}
              </div>
  	      );
      }
   }    


   export  class Home extends React.Component{

        render(){
         return (
               <div>
                     <h1>Home...</h1>
                 </div>
              )
       }
   }

//main.js

  import React from 'react';
  import ReactDOM from 'react-dom';
  import {App,Home} from './Forms.jsx';
  import {  Route, hashHistory } from 'react-router'
  import Router from 'react-router';

   ReactDOM.render((
       <Router history = {hashHistory}>
       <Route path = "/" component = {App}>
       <Route path = "/home" component = {Home} />
               </Route>
      </Router>
       ), document.getElementById('app'));




                "history": "^4.6.1",
"react": "^15.4.2",
"react-dom": "^15.4.2",
"react-redux": "^5.0.3",
"react-router": "^4.0.0",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.4.2"

[selbekk]

It looks like you're importing your App component wrong. You're exporting it as default, but importing it as a named export.

To fix this, change the 3rd line of main.js to this:

import App, {Home} from './Forms.jsx';

, and that should work.

[gaearon]

Yep, that's the problem.

[malikgenius]

Great ... took me 4 hours to find out and fixed in a second after landed here ...

[selbekk]

@malikgenius - haha I feel you. This is one of those things that you spend a ton of time figuring out the first time, and then you know how to fix it forever.

A note though - React provides some really good error messages, so it helps to read them thoroughly.

[gaearon]

Yeah :-) the message pretty much says this:

You likely forgot to export your component from the file it's defined in.

[gaearon]

I guess we could amend and add something like "or you might have mistaken default and named imports".

[selbekk]

On it @gaearon :)

[shardy315]

Hey @selbekk

In my App.js , I have the following code :

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

class App extends React.Component {
  render(){
    return (
      <View>
        <Text> Sierra </Text>
        <Text> Tanner </Text>
      </View>
    )
  }
}

AppRegistry.registerComponent('SampleApp', () => App);

This is very similar to https://facebook.github.io/react-native/docs/tutorial.html and I don't see what I am not sure what I am exporting/importing incorrectly .

Thank you :)

[selbekk]

Can’t see anything wrong with that code tbh.

[gaearon]

I’ll lock this issue because any similar problems are not necessarily related to the particular problem this issue is describing, and closed issues don’t usually get responses. Please file a new issue if you experience a problem, along with a reproducing project.