Skip to content

"React.createElement: type is invalid" after upgrading to 5.0 #144

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

Open
nlfiedler opened this issue Nov 15, 2018 · 7 comments
Open

"React.createElement: type is invalid" after upgrading to 5.0 #144

nlfiedler opened this issue Nov 15, 2018 · 7 comments

Comments

@nlfiedler
Copy link

Code works fine with version 4.1.3, but raises an error in 5.0:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `ThumbnailImage`.
    in ThumbnailImage (created by ThumbnailColumn)
    in div (created by ThumbnailColumn)
    in div (created by Box)
    in Box (created by withHelpersModifiers(Box))
    in withHelpersModifiers(Box) (created by ThumbnailColumn)
    in div (created by ThumbnailColumn)
    in ThumbnailColumn (created by Connect(ThumbnailColumn))
    in Connect(ThumbnailColumn) (created by AssetPage)
    in div (created by AssetPage)
    in div (created by AssetPage)
    in AssetPage (created by Route)
    in Route (created by App)
    in div (created by App)
    in Router (created by ConnectedRouter)
    in ConnectedRouter (created by App)
    in App
    in Provider

Using Electron 1.8.8 (Node.js v8.2.1), react(-dom) 16.6.3. Code looks like this:

    const figure = (<div>hello</div>)
    return React.createElement(VisibilitySensor, {
      onChange: this.onVisibilityChange,
      partialVisibility: true
    }, figure)

I substituted the example from the README, but that didn't make a difference.

@markuskr
Copy link

How do you import VisibilitySensor ?

@nlfiedler
Copy link
Author

That's a good question, sorry for not mentioning that -- it's just like the example:

const VisibilitySensor = require('react-visibility-sensor')

@markuskr
Copy link

One change from 4.1.X to 5.0.0 was the way VisibilitySensor is exported. In 5.0.0 the class is exported as default:

export default class VisibilitySensor extends React.Component {

Does it work for you if you change your import to:
const VisibilitySensor = require('react-visibility-sensor').default?

@nlfiedler
Copy link
Author

That does indeed resolve the issue, thank you. So does that mean the example in the README needs to be updated?

@markuskr
Copy link

Created #146

@ahmadsaeed90
Copy link

Thank you @markuskr . It worked for me too.

@LeonBorWork
Copy link

LeonBorWork commented Jun 20, 2019

I had to switch from

import * as VisibilitySensor from "react-visibility-sensor";

to

import VisibilitySensor from "react-visibility-sensor";

works fine now

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants