CSSTransitionGroup demo not working with react-lazyload@2.0

[thescientist13]

I was trying to get the CSSTransitionDemo working as shown here https://jasonslyvia.github.io/react-lazyload/examples/#/fadein

For some reason, although there were no errors, the images would not actually fade in, but would still just "pop in".

I thought upgrading to v2.0 of react-lazyload might help but instead it showed an error in the console.

Here is my code

<LazyLoad height={233} throttle={300} once>
  <CSSTransitionGroup key="1"
    transitionName="fade"
    transitionAppear
    transitionAppearTimeout={500}
    transitionEnter={false}
    transitionLeave={false}>
    { Card.generateImage(this.props.imgSource, this.props.imgAlt) }
  </CSSTransitionGroup>
</LazyLoad>

Here is the error I am seeing in the browser

6warning.js:33 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 `Card`.
    in Card (created by EventsList)
    in div (created by EventsList)
    in div (created by EventsList)
    in div (created by EventsList)
    in EventsList (created by NavigationBar)
    in div (created by NavigationBar)
    in div (created by TabPane)
    in Transition (created by Fade)
    in Fade (created by TabPane)
    in TabPane (created by Tab)
    in Tab (created by NavigationBar)
    in div (created by TabContent)
    in TabContent (created by Tabs)
    in div (created by Tabs)
    in TabContainer (created by Tabs)
    in Tabs (created by Uncontrolled(Tabs))
    in Uncontrolled(Tabs) (created by NavigationBar)
    in div (created by NavigationBar)
    in div (created by NavigationBar)
    in NavigationBar (created by Home)
    in div (created by Home)
    in Home (created by Bootstrap)
    in div (created by Bootstrap)
    in Bootstrap

Thanks for this great package, the <LazyLoad> component is working quite well for!

[jasonslyvia]

hmm, it seems like a import/bundle issue rather than a library issue to me.

在 2017年11月24日，19:49，Owen Buckley notifications@github.com 写道：

I was trying to get the CSSTransitionDemo working as shown here https://jasonslyvia.github.io/react-lazyload/examples/#/fadein

For some reason, although there were no errors, the images would not actually fade in, but would still just "pop in".

I thought upgrading to v2.0 of react-lazyload might help but instead it showed an error in the console.

Here is my code

{ Card.generateImage(this.props.imgSource, this.props.imgAlt) }

Here is the error I am seeing in the browser

6warning.js:33 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 Card. in Card (created by EventsList) in div (created by EventsList) in div (created by EventsList) in div (created by EventsList) in EventsList (created by NavigationBar) in div (created by NavigationBar) in div (created by TabPane) in Transition (created by Fade) in Fade (created by TabPane) in TabPane (created by Tab) in Tab (created by NavigationBar) in div (created by TabContent) in TabContent (created by Tabs) in div (created by Tabs) in TabContainer (created by Tabs) in Tabs (created by Uncontrolled(Tabs)) in Uncontrolled(Tabs) (created by NavigationBar) in div (created by NavigationBar) in div (created by NavigationBar) in NavigationBar (created by Home) in div (created by Home) in Home (created by Bootstrap) in div (created by Bootstrap) in Bootstrap Thanks for this great package, the component is working quite well for!

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

[thescientist13]

I've got everything working with the 1.x line now, so let me try again and report back so as to make sure it wasn't an implementation issue on my side.

[olup]

You are using v2 of react transition group ? see the migration guide

[fabioimpe]

faced the same issue even after the migration guide of react-transition-group, no errors on console but the image just pop in as thescientist13 reported

[alextouzel]

I'm experiencing the same issue while using react-lazyload in a component animated by ReactCSSTransitionReplace. Instead of sliding in, the component just pops, breaking the animation. As soon as I remove the LazyLoad component, the animation works. I haven't found any workaround yet. Any idea?

[mmarkelov]

@atouzel could you provide your code? Cause it's ok for we with react-lazyload provided example: https://twobin.github.io/react-lazyload/examples/#/fadein?_k=xv96lu

[alextouzel]

Sure. I made a sandbox demonstrating the issue.

In the sandbox, click the button twice to see the problem with the animation. Then, you can go to "ViewWithLazyLoad.js" and comment out the LazyLoad component. Run the animation again and everything should be fine.