Error: Missing getServerSnapshot, which is required for server-rendered content. Will revert to client rendering.

[talentlessguy]

With React 18, this error occurs when using a useStore hook:

// useDarkMode.ts
import create from 'zustand'
import { persist } from 'zustand/middleware'

type darkModeState = {
  /**
   * State of user settings
   */
  isDarkMode: boolean
  toggleDarkMode: () => void
}

export const useDarkMode = create<darkModeState>(
  persist(
    (set) => ({
      isDarkMode: false,
      toggleDarkMode: () =>
        set(({ isDarkMode }) => ({
          isDarkMode: !isDarkMode
        }))
    }),
    { name: 'useDarkMode' }
  )
)

// app.tsx

import { useMemo } from 'react'
import { cssStringFromTheme } from '../css/cssStringFromTheme'
import { useDarkMode } from '../hooks/useDarkMode'
import { darkTheme } from '../themes/darkTheme'
import { lightTheme } from '../themes/lightTheme'
import { Box } from './Box'

export const ThemeSwitch = () => {
  const isDarkMode = useDarkMode((s) => s.isDarkMode)
  const toggleDarkMode = useDarkMode((s) => s.toggleDarkMode)

  const themeObject = useMemo(() => {
    if (isDarkMode) return darkTheme
    else return lightTheme
  }, [isDarkMode])

  return (
    <style global jsx>
      {`
        :root {
          ${cssStringFromTheme(themeObject)}
        }

        @media (prefers-color-scheme: dark) {
          :root {
            ${cssStringFromTheme(isDarkMode ? darkTheme : themeObject)}
          }
        }
      `}
    </style>
  )
}

this error occurs:

This is using zustand@4.0.0-beta.2, react@18 and next@12.1

[dai-shi]

Ohhh, I wasn't aware that.. I was expecting it will revert to client rendering silently.
Thanks for reporting.
Is this warning only problem? Hmm, I think we should follow how react-redux does. 🤔

[dai-shi]

Can you try this?
https://ci.codesandbox.io/status/pmndrs/zustand/pr/550/builds/233894
Find "Local Install Instructions" ☝️

[talentlessguy]

yeah it seems to work, thanks

https://codesandbox.io/s/react-typescript-forked-7fyb80?file=/src/App.tsx

looking forward to have this in 4.0.0-beta.3

[dai-shi]

https://www.npmjs.com/package/zustand/v/4.0.0-beta.3

[nickytonline]

I seem to be experiencing this issue in open-sauced/app#1734 with Zustand 4.3.2 with Next.js 13.4.7. Still digging into why the fix here doesn't kick in. 🤔