Issues on initial page load on NextJS v13

[GLips]

Not sure exactly what's going on here, but I've created a minimal repro on CodeSandbox that shows the issue.

The error is TypeError: Cannot read properties of null (reading 'useContext')

Commenting out useAtom() in /components/Clock.js and replacing its variables with hardcoded values causes the page to render correctly:

//  const [{ lastUpdate, light }, setClock] = useAtom(clockAtom);
const lastUpdate = 0;
const light = false;
const setClock = (x) => {};

Once you've loaded the page, you can add the useAtom() call again and remove the hardcoded definitions and the page will work as expected. Possibly something related to SSR or hydration?

[dai-shi]

Sounds like related with pmndrs/zustand#1395 in zustand.

[GLips]

Sounds like related with pmndrs/zustand#1395 in zustand.

I think you're right—I neglected to mention this only occurs when you add experimental: { appDir: true } in next.config.js, as described in pmndrs/zustand#1395

[CodeWithShreyans]

This is probably because features like useContext required for Jotai are only available in client components. You need to append 'use client'; on the top of the file.

[Caryyon]

would it be as easy as adding "use client" to the Provider.tsx and maybe a few other client component files? Otherwise maybe a small babel plugin that would parse the file for "use client" and throw an error that explains the issue? happy to do the work for either, just new to jotai so would love a nudge in that right direction.

[thejus-r]

Jack Herrington made a great video about this I think.. YouTube Video

We really have to think differently when using React Server Components.

[dai-shi]

Closing as a resolution is "use client".