Strange error in component wrapped by Fade

[cargallo]

Hi, I'm receiving this error when using Fade to wrap another component.

[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 🦊

[cargallo]

Tnx @dennismorello! I will do that 👍

[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?

[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 🤞

[meaghanbass]

@dennismorello Ahh i figured it out. thanks!!

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

I had the same issue with v3.7.0.

test1

test2

Why are you wrapping the

elements twice with <Slide>?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/dennismorello/react-awesome-reveal/issues/57#issuecomment-763777053, 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!

[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!

[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.

[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 [email protected] 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 https://github.com/dennismorello/react-awesome-reveal/issues/57#issuecomment-783783694, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAPYJT6KC7ZUMV7PIMBZUKDTAL2XNANCNFSM4T3VBOHQ .

--

casey hunt [email protected] | @caseymhunt | caseymhunt.com [email protected]

[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?

[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.

[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`...`]} />

[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.

[tills13]

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

https://github.com/emotion-js/emotion/issues/2423

[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?