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

[shooftie]

Test Case

import React from 'react'
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'

const Child = ({ match }) => (
  <div>
    <h3>ID: {match.params.id}</h3>
  </div>
)

const ParamsExample = () => (
  <Router>
    <div>
      <h2>Accounts</h2>
      <ul>
        <li><Link to="/netflix">Netflix</Link></li>
        <li><Link to="/zillow-group">Zillow Group</Link></li>
        <li><Link to="/yahoo">Yahoo</Link></li>
        <li><Link to="/modus-create">Modus Create</Link></li>
      </ul>

      <Route path="/:id" component={Child}/>
    </div>
  </Router>
)

export default ParamsExample

Steps to reproduce

Create a new app
npm install -g create-react-app
create-react-app react-router-params
cd react-router-params/

Install react router
npm install react-router-dom@next

Paste in example lifted directly from docs

Run it
npm start

Expected Behavior

See docs

Actual Behavior

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. Check the render method of
`ParamsExample`.

[pshrmn]

I just tested this and it worked for me. You pasted the above code into src/App.js?

[hyeluri]

having same issue as shooftie

[pshrmn]

@shooftie @hyeluri Can either of you determine which component is invalid? Or at least upload a repo with the non-working code and post a link here?

[mjackson]

I just ran the entire command sequence @shooftie described and cannot duplicate this error. Closing.

[shooftie]

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.

[shooftie]

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 [email protected].

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.

[nicolas-zozol]

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

[rajkovukovic]

Same problem. My error was

import {DataTable} from './data_table';

instead of

import DataTable from './data_table';

[albertovilla]

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

[ristinolla]

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

[l3lackcurtains]

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

[alonecoder1337]

I got the same problem. Follow this thread for explanation.

https://stackoverflow.com/questions/42813342/react-createelement-type-is-invalid-expected-a-string/43868528#43868528

[steviesama]

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.

[Gruneau]

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

[zsid]

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.

[bsunderhus]

I'm having a similar issue. I setted a BrowserSync dev environment with webpack and it seens that the BrowserRouter is somewhat troublesome in the first load of the environment.

After a reload everything is fine, but still, awkward.

import React from 'react'
import {render} from 'react-dom'
import {BrowserRouter as Router} from 'react-router-dom'

render(
  <Router>
    <div>hi!</div>
  </Router>,
  document.getElementById('root')
)

if ('serviceWorker' in navigator && process.env.NODE_ENV === 'production') {
  navigator.serviceWorker.register('js/sw.js')
    .then(({scope}) => console.log(`ServiceWorker registration successful, scope: ${scope}`))
    .catch((err) => console.log('ServiceWorker registration failed: ', err))
}

[ktSempire]

check your main.js , remove unwanted code...

[YutHelloWorld]

don't install [email protected], just install react-router@3.* . It will works

[bsunderhus]

That is my main.js @ktSempire .

Anyway, solved the problem. It was nothing with react-router itself. Was a problem with the integration o the webpack-dev-middleware and browser-sync

[Nate-Wilkins]

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.

[marcusjwhelan]

@zsid why do you think this is?

[nicubarbaros]

In my case I forgot to export my component ))

[FuruholmAnton]

@BernardoS I am also using browser-sync. How did you solve it?

[bsunderhus]

@FuruholmAnton, I actually stopped using browser-sync, but the problem was the interaction between de webpack-dev-middleware and my server itself. apparently when I called compiler.watch, somehow it fucked it up with the dev-middleware.

[duhaime]

The component that threw this error was using import { Link } from 'react-router'; (from earlier v3 code). I resolved the error by updating that line to import { Link } from 'react-router-dom';

[muzaffaryousaf]

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

[choelterati]

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.

[karladler]

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

[steviesama]

@abimelex Typically there is a problem in callback hell where something isn't finishing allocation in time for it to render and perhaps isn't properly checked at run-time. If you believe you did that well enough, I don't know about anything else. It's always been some variation of what I described when it happens to me.

Not necessarily call back hell I guess. It depends on what you have going on when components load.

[avaneeshtripathi]

The issue is because of the way you import. React components class/function should be imported like this:

• import ComponentName from './path-to-component';

and not:

• import {ComponentName} from './path-to-component';

Change the way you are importing the component, if there is an error, you are doing import incorrectly.

[tusharf5]

Mine was I had export statement two times for the same class.

[steferr]

@ristinolla Freaking love you dude!

[suredo]

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.

[M1seRy]

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

[iamthuypham]

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'

[xploreraj]

Agree with @suredo 's comment. I was importing a _non-default_ class without curly-braces.

[mort3za]

My case was:

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

instead of:

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

[jordan-realfoto]

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?

[timdorr]

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.

[xploreraj]

Same error as @rajkovukovic , and I broke my head even with obvious error. Broke my head over it, and after fixing it, I saw his issue even though this page was open in my tab when the issue first showed up. Lazy

[totymedli]

For me this happened because I was using a react-router-config which doesn't support render prop. Thank God it worked with component.

Wrong:

{
  path: '/stuff/featured',
  render: props => <Stuff tab={TABS.FEATURED}/>,
}

Right:

{
  path: '/stuff/featured',
  component: props => <Stuff tab={TABS.FEATURED}/>,
}

[stenmuchow]

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"
  },