zustand: Zustand breaks with NextJS 13 when enabling appDir (Cannot read properties of null (reading 'useDebugValue'))

Hi everyone! Just want to note that we’re looking into this on the nextjs team.

Yeah, it’s never going to be possible to use zustand in a server component, as state is not supported by server components in general. It works quite well in app directory right now as long as you are using client components. Actually I think it may be working fine with the latest version of nextjs, I just made a reproduction repo here and everything is working quite nicely. This includes an example of it working both in pages and app directory.

Let me know if I missed anything or if anyone has a reproduction with the latest version - hopefully this can be closed out!

Edit: confirmed that updating to 13.0.3 in the original stackblitz fixes the issue

Issue seems to appear again with next 13.4.19

still getting same error, on pages directory. Using following version of next and zustand:

    "next": "13.4.19",
    "zustand": "^4.4.1"

Same issue without appDir is enabled

Issue is here again on "next": "14.1.0", "zustand": "^4.5.0"

It seems like this issue is fixed with next@13.4.3 for custom server (my use case). This issue is tracked in Next.js https://github.com/vercel/next.js/issues/49355, it is not related to just zustand. I think this issue should be closed.

We encountered this error when using Next.js 13.4 with a custom server, even though we were not using the new app dir. I believe the problem is explained here: https://github.com/vercel/next.js/issues/49355#issuecomment-1537536063

We’ve fixed this for now by specifying our Next.js version as ~13.3.4

can use it just fine after add “use client”

@vlausargs Which files are you labelling ‘use client’? I have tried adding it to all files that import anything from zustand and I’m still seeing the error appearing:

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
TypeError: Cannot read properties of null (reading 'useDebugValue')

@adriannecris Thanks. So it is impossible to use it as Server Side component?

you may be able to use useBearStore.setState(…) / useBearStore.getState().myVal in the server side without an issue.

can use it just fine after add “use client”

We also facing a issue when we want to load the store into a file which is located at /app/contact.tsx (It gives an error like: Unhandled Runtime Error Error: useRef is not a function)

contact.tsx

import useBearStore from '../../stores/cart'

function HomePage() {
  const { bears } = useBearStore();
  return (
    <main>
      Contact
      { bears }
    </main>
  )
}

export default HomePage;

@nhatimme Have you tried adding 'use client'; at the very first line. Reference in this link

Please try #2154 https://ci.codesandbox.io/status/pmndrs/zustand/pr/2154 ☝️ Find “Local Install Instructions”

We also facing a issue when we want to load the store into a file which is located at /app/contact.tsx (It gives an error like: Unhandled Runtime Error Error: useRef is not a function)

contact.tsx

import useBearStore from '../../stores/cart'

function HomePage() {
  const { bears } = useBearStore();
  return (
    <main>
      Contact
      { bears }
    </main>
  )
}

export default HomePage;

@jescalan any suggestions on state management tools similar to Zustand in the mean time?

Ah, maybe because React doesn’t provide ESM. Can you try this?

// ./node_modules/zustand/esm/index.mjs
import React from 'react'

// ...
  React.useDebugValue(slice)

nope, this won’t work, same error.

@dai-shi yeah you’re right it is not caused by zustand library itself. I did some test and I saw this error is triggered when useDebugValue is called on the server side. This simple patch will make the code work. Not sure about the proper way to fix this though:

diff --git a/node_modules/zustand/esm/index.mjs b/node_modules/zustand/esm/index.mjs
index 2c76b55..73ad140 100644
--- a/node_modules/zustand/esm/index.mjs
+++ b/node_modules/zustand/esm/index.mjs
@@ -13,7 +13,9 @@ function useStore(api, selector = api.getState, equalityFn) {
     selector,
     equalityFn
   );
-  useDebugValue(slice);
+  if (typeof window !== "undefined") {
+    useDebugValue(slice);
+  }
   return slice;
 }
 const createImpl = (createState) => {