Strange error in component wrapped by Fade #57

cargallo · 2020-11-19T16:55:36Z

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

morellodev · 2020-11-19T17:15:08Z

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 · 2020-11-19T17:19:33Z

Tnx @dennismorello! I will do that 👍

meaghanbass · 2021-01-06T18:50:30Z

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 · 2021-01-06T19:25:47Z

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 · 2021-01-06T21:40:42Z

@dennismorello Ahh i figured it out. thanks!!

Allwithyou999 · 2021-01-20T09:38:51Z

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 · 2021-01-20T16:46:31Z

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 · 2021-01-20T16:52:11Z

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 · 2021-01-20T16:54:08Z

But why would you want to use nested animation components?

Allwithyou999 · 2021-01-20T17:02:31Z

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 · 2021-02-06T20:32:51Z

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 · 2021-02-07T13:19:01Z

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 · 2021-02-08T15:54:17Z

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 · 2021-02-08T15:58:18Z

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 · 2021-02-08T16:44:59Z

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 · 2021-02-14T07:43:56Z

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 · 2021-02-16T19:38:41Z

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 · 2021-02-23T00:42:14Z

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 · 2021-02-23T01:04:07Z

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 casey.hunt@gmail.com | @caseymhunt | caseymhunt.com <casey.hunt@gmail.com>

EliotSlevin · 2021-04-13T01:21:59Z

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 · 2021-06-12T10:59:01Z

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.

react-awesome-reveal set to 3.4 according to morellodev/react-awesome-reveal#57

tills13 · 2021-07-08T17:03:47Z

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 · 2021-07-09T00:39:00Z

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 · 2021-07-09T02:02:56Z

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

papuruth · 2021-07-30T07:09:00Z

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 · 2022-04-07T07:24:59Z

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

This was referenced Nov 20, 2020

React Hooks warning, possibly related to Emotion #58

Closed

React has detected a change in the order of Hooks called by EmotionCssPropInternal #59

Closed

morellodev mentioned this issue Dec 17, 2020

Change in the order of Hooks #64

Closed

aaronsarnat mentioned this issue Feb 14, 2021

React has detected a change in the order of Hooks called by EmotionCssPropInternal EmaSuriano/gatsby-starter-mate#667

Open

andesyv added a commit to andesyv/syvertsen.dev that referenced this issue Jun 18, 2021

Refactor

3fdd9e5

react-awesome-reveal set to 3.4 according to morellodev/react-awesome-reveal#57

Nathan-Patnam mentioned this issue Jul 1, 2021

Changed Hook Order Error Rari-Capital/rari-dApp#416

Open

morellodev closed this as completed Aug 16, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Strange error in component wrapped by Fade #57

Strange error in component wrapped by Fade #57

cargallo commented Nov 19, 2020

morellodev commented Nov 19, 2020

cargallo commented Nov 19, 2020

meaghanbass commented Jan 6, 2021

morellodev commented Jan 6, 2021 •

edited

Loading

meaghanbass commented Jan 6, 2021

Allwithyou999 commented Jan 20, 2021 •

edited

Loading

morellodev commented Jan 20, 2021

Allwithyou999 commented Jan 20, 2021 via email

morellodev commented Jan 20, 2021

Allwithyou999 commented Jan 20, 2021

marcelscruz commented Feb 6, 2021

cargallo commented Feb 7, 2021

marcelscruz commented Feb 8, 2021

cargallo commented Feb 8, 2021

marcelscruz commented Feb 8, 2021

aaronsarnat commented Feb 14, 2021

cabello commented Feb 16, 2021

aaronsarnat commented Feb 23, 2021 •

edited

Loading

caseymhunt commented Feb 23, 2021 via email

EliotSlevin commented Apr 13, 2021

bentong95923 commented Jun 12, 2021

tills13 commented Jul 8, 2021 •

edited

Loading

aaronsarnat commented Jul 9, 2021

tills13 commented Jul 9, 2021

papuruth commented Jul 30, 2021

Damjanose commented Apr 7, 2022 •

edited

Loading

Strange error in component wrapped by Fade #57

Strange error in component wrapped by Fade #57

Comments

cargallo commented Nov 19, 2020

morellodev commented Nov 19, 2020

cargallo commented Nov 19, 2020

meaghanbass commented Jan 6, 2021

morellodev commented Jan 6, 2021 • edited Loading

meaghanbass commented Jan 6, 2021

Allwithyou999 commented Jan 20, 2021 • edited Loading

morellodev commented Jan 20, 2021

Allwithyou999 commented Jan 20, 2021 via email

morellodev commented Jan 20, 2021

Allwithyou999 commented Jan 20, 2021

marcelscruz commented Feb 6, 2021

cargallo commented Feb 7, 2021

marcelscruz commented Feb 8, 2021

cargallo commented Feb 8, 2021

marcelscruz commented Feb 8, 2021

aaronsarnat commented Feb 14, 2021

cabello commented Feb 16, 2021

aaronsarnat commented Feb 23, 2021 • edited Loading

caseymhunt commented Feb 23, 2021 via email

EliotSlevin commented Apr 13, 2021

bentong95923 commented Jun 12, 2021

tills13 commented Jul 8, 2021 • edited Loading

aaronsarnat commented Jul 9, 2021

tills13 commented Jul 9, 2021

papuruth commented Jul 30, 2021

Damjanose commented Apr 7, 2022 • edited Loading

morellodev commented Jan 6, 2021 •

edited

Loading

Allwithyou999 commented Jan 20, 2021 •

edited

Loading

aaronsarnat commented Feb 23, 2021 •

edited

Loading

tills13 commented Jul 8, 2021 •

edited

Loading

Damjanose commented Apr 7, 2022 •

edited

Loading