Next.js 13: [zustand persist middleware] Unable to update item 'test-storage', the given storage is currently unavailable.

[ben4d85]

I am getting a warning message logged to the Terminal of my Next.js 13 application when using Zustand with the persist middleware

[zustand persist middleware] Unable to update item 'test-storage', the given storage is currently unavailable.

I understand that the storage is not available on the server, and I am not trying to use it on the server - at least as far as I am aware. All pages where I use the storage have the "use client" directive at the top. So I don't understand why I receive this warning? Or what it is that is triggering it?

Is Next.js trying to use Zustand on the server as part of its internal workings / SSR / hydration / magic? If so, should Next.js and/or Zustand make a change to ensure this isn't happening? As far as I understand it, using persist should not be possible on the server, so whatever triggers this warning should not be happening in the first place?

Either way, how can I stop this warning from appearing in my Terminal, please?

---

For context, please see the following issue, which I believe is where the warning message originated: #283. It is closed though, so I am not sure if I will receive a reply there.

[dai-shi]

zustand/src/middleware/persist.ts

Line 230 in 43791eb

`[zustand persist middleware] Unable to update item '${options.name}', the given storage is currently unavailable.`

That message is shown if you don't have the storage and you set to the store.
During SSR, even client components render, so the storage can be undefined. But, you shouldn't call "set" in render generally. So, you shouldn't see the warning message if you follow it. Or, if rendering client components on server is not desirable, you need a "ClientOnly" workaround which is to render null on server, and replaces the children on useEffect. There must be some articles or docs about it.

[dai-shi]

reactwg/server-components#4

[JorensM]

@dai-shi From the link you posted it seems that only HTML gets rendered on the server though, or am I wrong?

[dai-shi]

Yeah, SSR in this context is about generating HTML.
Hm, I'm not sure if I get your concern.

[JorensM]

@dai-shi Well in the original issue they have the zustand store being called from the server side on a client component. Zustand is JavaScript, not HTML, so when rendering a client component server-side, the zustand stores shouldn't be created, right?

[dai-shi]

Well, the zustand code will be loaded even for SSR's HTML generation. That's why we need React Context on the server.

[prenaissance]

You can lazy load the component using next/dynamic. Client components are also rendered on the server, but hydrated on the client unlike server components, which causes the error when trying to access web storage on the server. Using lazy loading on the component will solve the problem, avoid extra renders and allow you to pass a fallback.

Make sure to pass ssr: false in the options.

import dynamic from 'next/dynamic'
 
const DynamicStoreConsumer = dynamic(() => import('../components/my-component'), {
  ssr: false,
})

[caionobrex]

Love it! It worked perfectly for the issue I was having! thx!

[andrejmoltok]

Thank you, I had the same problem and solved it with dynamic import.