gatsby-starter-mate
gatsby-starter-mate copied to clipboard
EmaSuriano
React has detected a change in the order of Hooks called by EmotionCssPropInternal
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)
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.
when changing to "react-awesome-reveal": "^3.4.0", doesn't work. Do I need to delete all animations?
Keep in mind that it's a warning and not an error. For me it's more of an annoyance than anything.
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 :)
