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

[federicogatti]

At first run, without any change, when I navigate over one of the 3 section (About, Project or Writing) I will receive this error from Browser Console:

index.js:2177 Warning: React has detected a change in the order of Hooks called by EmotionCssPropInternal. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks: https://fb.me/rules-of-hooks

   Previous render            Next render
   ------------------------------------------------------
1. useContext                 useContext
2. undefined                  useContext
   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

    in EmotionCssPropInternal (created by InView)
    in InView (created by Reveal)
    in Reveal (created by Slide)
    in Slide (at Section.tsx:39)
    in Header (at About.tsx:16)
    in div (created by Section__SectionContainer)
    in Section__SectionContainer (at Section.tsx:22)
    in section (created by Section)
    in Section (at Section.tsx:20)
    in Container (at About.tsx:15)
    in About (at pages/index.tsx:14)
    in ScrollingProvider (at Layout.tsx:38)
    in Ge (at Layout.tsx:36)
    in main (at Layout.tsx:35)
    in Layout (at pages/index.tsx:11)
    in IndexPage (created by HotExportedIndexPage)
    in AppContainer (created by HotExportedIndexPage)
    in HotExportedIndexPage (created by PageRenderer)
    in PageRenderer (at query-result-store.js:90)
    in PageQueryStore (at root.js:58)
    in RouteHandler (at root.js:80)
    in div (created by FocusHandlerImpl)
    in FocusHandlerImpl (created by Context.Consumer)
    in FocusHandler (created by RouterImpl)
    in RouterImpl (created by Context.Consumer)
    in Location (created by Context.Consumer)
    in Router (at root.js:75)
    in ScrollHandler (at root.js:71)
    in RouteUpdates (at root.js:70)
    in EnsureResources (at root.js:68)
    in LocationHandler (at root.js:126)
    in LocationProvider (created by Context.Consumer)
    in Location (at root.js:125)
    in Root (at root.js:134)
    in StaticQueryStore (at root.js:150)
    in ConditionalFastRefreshOverlay (at root.js:149)
    in _default (at app.js:163)

[aaronsarnat]

This is a known issue with one of the dependencies, react-awesome-reveal: https://github.com/dennismorello/react-awesome-reveal/issues/57

...which in turn is due to one of its dependencies, Emotion.

[Szejke]

when changing to "react-awesome-reveal": "^3.4.0", doesn't work. Do I need to delete all animations?

[aaronsarnat]

Keep in mind that it's a warning and not an error. For me it's more of an annoyance than anything.

[EmaSuriano]

Hello, I would recommend keeping an eye on the issue and wait for the maintainers of the library to address the issue. I think downgrading it's not a good approach in this situation, because as @aaronsarnat said this is a development warning, and it won't make the app crash :)