Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
shooftie opened this issue Feb 6, 2017 · 42 comments

Comments

@shooftie
Copy link

commented Feb 6, 2017

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

This comment has been minimized.

Copy link
Collaborator

commented Feb 6, 2017

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

@hyeluri

This comment has been minimized.

Copy link

commented Feb 7, 2017

having same issue as shooftie

@pshrmn

This comment has been minimized.

Copy link
Collaborator

commented Feb 7, 2017

@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

This comment has been minimized.

Copy link
Member

commented Feb 7, 2017

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

@mjackson mjackson closed this Feb 7, 2017

@shooftie

This comment has been minimized.

Copy link
Author

commented Feb 7, 2017

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

This comment has been minimized.

Copy link
Author

commented Feb 7, 2017

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.

@nicolas-zozol

This comment has been minimized.

Copy link

commented Mar 7, 2017

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

This comment has been minimized.

Copy link

commented Mar 13, 2017

Same problem. My error was

import {DataTable} from './data_table';

instead of

import DataTable from './data_table';

@albertovilla

This comment has been minimized.

Copy link

commented Mar 19, 2017

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

This comment has been minimized.

Copy link

commented May 9, 2017

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

This comment has been minimized.

Copy link

commented May 21, 2017

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

@alonecoder1337

This comment has been minimized.

Copy link

commented May 21, 2017

@steviesama

This comment has been minimized.

Copy link

commented May 26, 2017

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

This comment has been minimized.

Copy link

commented May 31, 2017

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

@ReactTraining ReactTraining deleted a comment from daryn-k Jun 29, 2017

@zsid

This comment has been minimized.

Copy link

commented Jul 9, 2017

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

This comment has been minimized.

Copy link

commented Jul 20, 2017

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

This comment has been minimized.

Copy link

commented Jul 21, 2017

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

@YutHelloWorld

This comment has been minimized.

Copy link

commented Jul 29, 2017

don't install react-router@4.0, just install react-router@3.* . It will works

@bsunderhus

This comment has been minimized.

Copy link

commented Jul 29, 2017

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

This comment has been minimized.

Copy link

commented Aug 6, 2017

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

This comment has been minimized.

Copy link

commented Aug 8, 2017

@zsid why do you think this is?

@nicubarbaros

This comment has been minimized.

Copy link

commented Aug 9, 2017

In my case I forgot to export my component ))

@FuruholmAnton

This comment has been minimized.

Copy link

commented Aug 16, 2017

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

@bsunderhus

This comment has been minimized.

Copy link

commented Aug 17, 2017

@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

This comment has been minimized.

Copy link

commented Sep 7, 2017

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

This comment has been minimized.

Copy link

commented Sep 7, 2017

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

@choelterati

This comment has been minimized.

Copy link

commented Sep 7, 2017

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.

@abimelex

This comment has been minimized.

Copy link

commented Sep 18, 2017

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

@steviesama

This comment has been minimized.

Copy link

commented Sep 18, 2017

@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

This comment has been minimized.

Copy link

commented Sep 26, 2017

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

This comment has been minimized.

Copy link

commented Oct 9, 2017

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

@steferr

This comment has been minimized.

Copy link

commented Oct 13, 2017

@ristinolla Freaking love you dude!

@suredo

This comment has been minimized.

Copy link

commented Oct 26, 2017

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

This comment has been minimized.

Copy link

commented Nov 2, 2017

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

@iamthuypham

This comment has been minimized.

Copy link

commented Nov 21, 2017

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

This comment has been minimized.

Copy link

commented Jan 1, 2018

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

@mort3za

This comment has been minimized.

Copy link

commented Jan 9, 2018

My case was:

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

instead of:

const Header = () => (
  <h1>Title</h1>
)
@jordan-realfoto

This comment has been minimized.

Copy link

commented Jan 30, 2018

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

This comment has been minimized.

Copy link
Collaborator

commented Jan 30, 2018

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

This comment has been minimized.

Copy link

commented Feb 4, 2018

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

This comment has been minimized.

Copy link

commented Feb 20, 2018

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

This comment has been minimized.

Copy link

commented Feb 23, 2018

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

@ReactTraining ReactTraining deleted a comment from pleerock Apr 4, 2018

@ReactTraining ReactTraining deleted a comment from fizzvr Apr 4, 2018

@ReactTraining ReactTraining locked as resolved and limited conversation to collaborators Apr 4, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.