react-router: React.createElement: type is invalid -- expected a string or a class/function but got: undefined

Same problem. My error was

import {DataTable} from './data_table';

instead of

import DataTable from './data_table';

I was having a similar issue and realised that I was not importing Router correctly.

I was using import { BrowserRouter as Router, Route } from 'react-router' instead of: import { BrowserRouter as Router, Route } from 'react-router-dom'

Using the right name react-router-dom solved the problem

OK… I’ve tracked it down. I confess the mistake is on my part in that I didn’t follow my own instructions and instead of installing react-router-dom@next, I used the entry in my own project’s package.json and installed react-router@4.0.0-alpha.6.

This was the root of the problem.

@hyeluri , make sure that you are using the right react-router package. In the version that I am using (specifically 4.0.0-alpha.6) there is no such component as <Route />, instead it uses <Match />, which behaves, as far as I can work out, in the same way.

For me, i’ve changed import React, {Component} from 'react' to import React, { Component } from 'react'

I had the same problem. I was using "react-router-redux": "^4.0.8" and it didn’t work. When I changed it to "react-router-redux": "next" it was fine.

I had the similar and couldn’t tell the difference at first.

I was using import Link from 'react-router-dom' instead of import { Link } from 'react-router-dom'

So importing the Link as named import fixed the problem. The Link is a named export in the 'react-router-dom' module. See this for indepth explanation: http://stackoverflow.com/questions/36795819/when-should-i-use-curly-braces-for-es6-import/36796281

Thanks for your speedy response.

I am tearing my hair out here. I have followed the process above as well and am still getting the same error. Give me a day and I’ll get you a repo.

I solved it by changing import { Link } from 'react-router' to import { Link } from 'react-router-dom'

check your main.js , remove unwanted code…

Tried everything but still got this error, finally I buy a new macbook pro, it works fine here! = =

having same issue as shooftie

i had an old implementation of react router redux… updated my deps and all worked…

  "dependencies": {
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.2.2",
    "react-router-redux": "^5.0.0-alpha.9",
    "react-scripts": "1.1.1",
    "redux-saga": "^0.16.0"
  },

My case was:

const Header = (
  <h1>Title</h1>
);  

instead of:

const Header = () => (
  <h1>Title</h1>
)

I think the larger issue is that the error message is incredibly vague. Any reason why react or react-router can’t do a better job of catching the actual error instead of just throwing up it’s hands when the component doesn’t give back exactly what it wants?

I had the same problem, solved by changing: import Route from 'react-router-dom'; to import { Route } from 'react-router-dom';

I’m not sure it’s appropriate - it is in Stack -, but I ran in this google search with this bug:

<Route path="5-b-box-mutation" component={<BoxMutation/>}/>

instead of

<Route path="5-b-box-mutation" component={BoxMutation}/>

If you do use “default” on export then you should import without braces, else you should use braces. “Default” is used to tell, that is the main class of your code.

In my case I forgot to export my component ))

It’s when the component prop is not a component. Unfortunately, because of stateless functional components, answering that question ahead of time is actually fairly hard to do. It’s really on React to provide a better error for React.createElement.

I have the same issue but with a normal component, not anything with react-router. I believe the cause is something else. Fixed by change from import {something} from '../folder to import something from '../folder'

@ristinolla Freaking love you dude!

It’s really hard to find what exactly causes this error. Any hint’s for debugging this issue?

I was getting similar errors and started playing with import statements trying to fix it after reading through this (react-router v4). What solved it for me was restarting the webpack dev-server I was running off of after changing the import to reference ‘react-router-dom’ from ‘react-router’. Changing the import reference did not fix it on its own.

I also ran into this issue but I was using Link from react-router and not react-router-dom. Once I switched it worked fine.

I actually had this problem when I went back to a parallel web service for login that I hadn’t updated for a bit and it was still using = require() for modules, and I’d changed the main web service to use a transpiler addon for import, and using the require in that case resulted in this problem. Changed it all to import module from './sourcefile'; fixed it for me.