An error was found in the production logs: "ReferenceError: sessionStorage is not defined"
This happened because NextJS attempted to render the component server side (and follow the stream..hydration lifecycle), even though there was a "use client" directive. To solve this we can wrap any browser API call in a useEffect() to make it very clear this is client code. There may be other ways but this will definitely work.
Here's the related thread on Slack.
Future work:
Scan and think about other areas of the code where this pattern could protect against accidental servers side rendering of client code.
Description
An error was found in the production logs: "ReferenceError: sessionStorage is not defined"
This happened because NextJS attempted to render the component server side (and follow the stream..hydration lifecycle), even though there was a "use client" directive. To solve this we can wrap any browser API call in a
useEffect()to make it very clear this is client code. There may be other ways but this will definitely work. Here's the related thread on Slack.Future work: Scan and think about other areas of the code where this pattern could protect against accidental servers side rendering of client code.