Strange error in component wrapped by Fade

[morellodev]

Strange error in component wrapped by Fade

[morellodev]

Hi, unfortunately this is an issue with the latest version of Emotion. As soon as this will be fixed by the Emotion team, I will update React Awesome Reveal.

As a temporary fix, please use the version 3.4.0 🦊

[aaronsarnat]

I was just looking through issues on Emotion's repo. I didn't find any obvious open issues that pertain to this particular problem we're having.

Has anyone here thought about opening an issue with Emotion in hopes that it might put this bug on their radar if it isn't already? I would, except I don't really understand the underlying problem or how to describe our issue in a way that would be relevant to Emotion.

I only found out about Emotion a few minutes ago, shortly after I found out about this library... which looks awesome, by the way!

[tills13]

I have taken the liberty of submitting an issue to the Emotion repo and I'll have a PR there soon as well.

emotion-js/emotion#2423

[EliotSlevin]

Any updates on this?

I also don't see any issues like this in emotions issues log, I'm just not sure if it's actually an issue caused by emotion - wouldn't it be showing up in other emotion powered projects?

I'm personally only seeing it as a dev only issue, but it can't be ruled out that it won't cause errors in surprising mysterious way. React seems pretty certain it's a bad idea.

It definitely seems to be caused by nesting animations, but nesting animations sounds like a feature you'd totally want?

[meaghanbass]

I've had the same issue and tried using 3.4.0, but am still getting the error. I was using Fade around Slide. I've tried removing Fade to see if that would help, but am still getting the error. Any thoughts?

[meaghanbass]

@dennismorello Ahh i figured it out. thanks!!

[caseymhunt]

That’s nice for you, but it was causing visual behavior issues for me.

On Mon, Feb 22, 2021 at 6:42 PM Aaron Sarnat ***@***.***> wrote: FYI everyone, this is just a dev warning and not an actual error. The warning doesn't show up in production, so I consider this at worst a minor annoyance during dev time. I'm not going to worry about it anymore, nor am I going to roll back to a previous version. So far it's working great on prod with no errors (or warnings) which is all I care about. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#57 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAPYJT6KC7ZUMV7PIMBZUKDTAL2XNANCNFSM4T3VBOHQ> .

-- ---- casey hunt [email protected] | @caseymhunt | caseymhunt.com <[email protected]>

[tills13]

FYI everyone, this is just a dev warning and not an actual error. The warning doesn't show up in my production build, ...

To be clear, this is because it's a class of error that's suppressed by React in production mode, not because it's "just a dev warning".

To everyone else, I assume your code looks something like this?

<Element css={someFlag && css`...`} />

The issue is with this line in Emotion, which also hints at a solution:

<Element css={[someFlag && css`...`]} />

[cargallo]

Tnx @dennismorello! I will do that 👍

[morellodev]

I've had the same issue and tried using 3.4.0, but am still getting the error. I was using Fade around Slide. I've tried removing Fade to see if that would help, but am still getting the error. Any thoughts?

Why are you putting <Slide> as child of <Fade>? You can just set the direction prop to <Fade> and get rid of <Slide> 👀

---

The React error is not caused by react-awesome-reveal itself, so I do not have control over it. I am releasing v3.5.2 where I updated the @emotion/react dependency – the one responsible of the error. Hope it fixes the issue 🤞

[Allwithyou999]

I had the same issue with v3.7.0.

<Slide triggerOnce duration={200}>
  <SubNavigation>
    <Slide cascade duration={500}>
      {navData.map((subNav, index) => (
        <div key={`sub-nav-${index}`}>
          <SubNavItem>
            {subNav.title}
          </SubNavItem>
        </div>
      ))}
    </Slide>
  </SubNavigation>
</Slide>

[morellodev]

I had the same issue with v3.7.0.

<Slide triggerOnce duration={200}>

 <Slide cascade duration={500}>

  <h1>test1</h1>

  <h1>test2</h1>

 </Slide>

</Slide> 

Why are you wrapping the <h1> elements twice with <Slide>?

[Allwithyou999]

That is just an example. When I use another <Slide> or <Fade> in a <Slide>, I have an issue. For v3.4.0, I don't see this issue. So for now, I use v3.4.0.

…

On Wed, Jan 20, 2021 at 8:46 AM Dennis Morello ***@***.***> wrote: I had the same issue with v3.7.0. <Slide triggerOnce duration={200}> <Slide cascade duration={500}> <h1>test1</h1> <h1>test2</h1> </Slide> </Slide> Why are you wrapping the <h1> elements twice with <Slide>? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#57 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AHYF6MFGW7LDCFJ6NNAWWCLS24CHTANCNFSM4T3VBOHQ> .

[morellodev]

But why would you want to use nested animation components?

[Allwithyou999]

I updated the actual code I am using. Firstly, the sub-navigation section is shown with the slide effect, and then, the items of the submenu will be shown with the cascade slide in the section.

[marcelscruz]

Hi Dennis,

Do you have any updates on that, or what worked for you to get rid of the error?

I tried with the following versions, but still get the message:

• 3.4.0
• 3.5.2
• 3.7.0

I understand this is caused by Emotion, just trying to see if there's a workaround for it.

Thanks!

[cargallo]

Hi Dennis,

Do you have any updates on that, or what worked for you to get rid of the error?

I tried with the following versions, but still get the message:

• 3.4.0
• 3.5.2
• 3.7.0

I understand this is caused by Emotion, just trying to see if there's a workaround for it.

Thanks!

If you downgrade to 3.4.0 that should work. At least I did that and it worked for me.

[marcelscruz]

If you downgrade to 3.4.0 that should work. At least I did that and it worked for me.

Unfortunately, it didn't. :/

But thanks for suggesting it.

[cargallo]

If you downgrade to 3.4.0 that should work. At least I did that and it worked for me.

Unfortunately, it didn't. :/

But thanks for suggesting it.

Then, check that you are not using nested animations.

[marcelscruz]

Then, check that you are not using nested animations.

Yep, I was. Removing nested animations combined with downgrading to 3.4.0 did the trick.

Thanks!

[cabello]

I am facing the same issue, my app is on Emotion 10, react-awesome-reveal 3.5 and up is on Emotion 11, I see the same errors, downgraded to v3.4.0 for now.

On related matters I tried to upgrade Emotion to 11, but Typescript support changed and Theming and other things proved harder than expected, I explored for a day but will leave that for the future.

[aaronsarnat]

FYI everyone, this is just a dev warning and not an actual error. The warning doesn't show up in my production build, so I consider this at worst a minor annoyance during dev time. I'm not going to worry about it anymore, nor am I going to roll back to a previous version. So far it's working great on prod with no errors (or warnings) which is all I care about.

[bentong95923]

Any updates on this?

I also don't see any issues like this in emotions issues log, I'm just not sure if it's actually an issue caused by emotion - wouldn't it be showing up in other emotion powered projects?

I'm personally only seeing it as a dev only issue, but it can't be ruled out that it won't cause errors in surprising mysterious way. React seems pretty certain it's a bad idea.

It definitely seems to be caused by nesting animations, but nesting animations sounds like a feature you'd totally want?

I am also feeling the same. I feel like there is something wrong with the code that uses the emotions js in the react-awesome-reveal plugin. It will be great if there is someone who can review it to tackle the problems.

[aaronsarnat]

To be clear, this is because it's a class of error that's suppressed by React in production mode, not because it's "just a dev warning".

Point taken @tills13. Though I'd still emphasize that it's presented as a "warning" and not an "error." In any case, thanks for doing a deep dive into the emotion code to identify the culprit.

[papuruth]

I would like to mention a warning too about @emotion/core package. I have separate @emotion/core package installed in my project and since this package is using @emotion too therefore react logs warning into console. Is there any way to suppress the warning?

[Damjanose]

Hi!
I'm at version 11.9.0 and i'm still getting the same error. Is this fixed yet?