version 1.0.1 breaks server-side rendering for nanostores atoms in nextjs

[lunarW1TCH]

In version 1.0.0 when messages are called on the server useStore hook returns the object populated with default values. In version 1.0.1 it returns undefined.

'use client';

const NavigationPanel = (): React.ReactNode => {
  const t = useStore($messages); // undefined during initial server-side render
  // ...
}

// this example uses `@nanostores/i18n` but the issue is universal to any nanostores atom
export const $messages = i18n('root/nav', {
  title: 'Title'
});

Current behavior breaks all pre-rendering. next@16.0.10

Uncaught Error: Switched to client rendering because the server rendering errored:

Cannot read properties of undefined (reading 'title')
react-dom-client.development.js:11329:17
    updateSuspenseComponent react-dom-client.development.js:11329
    beginWork react-dom-client.development.js:12449
    runWithFiberInDEV react-dom-client.development.js:987
    performUnitOfWork react-dom-client.development.js:18995
    workLoopSync react-dom-client.development.js:18823
    renderRootSync react-dom-client.development.js:18804
    performWorkOnRoot react-dom-client.development.js:17833
    performWorkOnRootViaSchedulerTask react-dom-client.development.js:20382
    performWorkUntilDeadline scheduler.development.js:45
    (Async: EventHandlerNonNull)
    <anonymous> scheduler.development.js:223
    <anonymous> scheduler.development.js:364
    instantiateModule dev-base.ts:244
    runModuleExecutionHooks dev-base.ts:278
    instantiateModule dev-base.ts:238
    getOrInstantiateModuleFromParent dev-base.ts:162
    commonJsRequire runtime-utils.ts:389
    <anonymous> index.js:6
    instantiateModule dev-base.ts:244
    runModuleExecutionHooks dev-base.ts:278
    instantiateModule dev-base.ts:238
    getOrInstantiateModuleFromParent dev-base.ts:162
    commonJsRequire runtime-utils.ts:389
    <anonymous> react-dom-client.development.js:26276
    <anonymous> react-dom-client.development.js:30584
    instantiateModule dev-base.ts:244
    runModuleExecutionHooks dev-base.ts:278
    instantiateModule dev-base.ts:238
    getOrInstantiateModuleFromParent dev-base.ts:162
    commonJsRequire runtime-utils.ts:389
    <anonymous> client.js:37
    instantiateModule dev-base.ts:244
    runModuleExecutionHooks dev-base.ts:278
    instantiateModule dev-base.ts:238
    getOrInstantiateModuleFromParent dev-base.ts:162
    commonJsRequire runtime-utils.ts:389
    <anonymous> app-index.tsx:2
    instantiateModule dev-base.ts:244
    runModuleExecutionHooks dev-base.ts:278
    instantiateModule dev-base.ts:238
    getOrInstantiateModuleFromParent dev-base.ts:162
    commonJsRequire runtime-utils.ts:389
    <anonymous> app-next-turbopack.ts:11
    appBootstrap app-bootstrap.ts:79
    loadScriptsInSequence app-bootstrap.ts:23
    appBootstrap app-bootstrap.ts:61
    <anonymous> app-next-turbopack.ts:10
    instantiateModule dev-base.ts:244
    runModuleExecutionHooks dev-base.ts:278
    instantiateModule dev-base.ts:238
    getOrInstantiateRuntimeModule dev-base.ts:128
    registerChunk runtime-backend-dom.ts:57
    AsyncFunctionNext self-hosted:780
    (Async: async)
    registerChunk dev-base.ts:1149
    forEach self-hosted:145
    NextJS 2

[ai]

Be sure to use Nano Stores 1.2 as we recommend in peerDependencies

[lunarW1TCH]

i am using nanostores 1.2 and the problem still exists

[ai]

Can you check your lock file, that you don’t have old Nano Stores in nested dependencies?

cc @jmurty

[lunarW1TCH]

yes, the newest version is installed, i even added nanostores 1.2.0 to the resolutions field in package.json

[ai]

@lunarW1TCH I mean, can you check that you have only 1 nanostores version? npm can contains multiple versions, if it is a case of mixing different versions, we need another solution.

[lunarW1TCH]

i checked with bun pm ls --all, only one version of nanostores is installed and it is 1.2.0

[ai]

Got it. Very strange. I will think about the solution.

[jmurty]

Hi, this is my fault.

In my recent PR #39 there is an attempted fix for client-side hydration errors of SSR pages that changes how React's useSyncExternalStore is used. This change means the useStore hook now always returns the store's initial value when run on the server side, instead of the store's latest value.

We're working towards a fix for this bug in #40 to:

• fix the default behaviour so useStore returns the latest store value during server-side rendering
• let user's opt in to different approaches to solve problems with SSR + hydration
• add a test case to check for broken server-side behaviour, currently called "support for SSR does not break server behaviour in non-SSR projects" in the PR.

In the meantime please downgrade to version 1.0.0 when you need useStore to return the latest store value server-side.

[ai]

@lunarW1TCH should be fixed in 1.1.0. Thanks for the report

[lunarW1TCH]

it works just fine now, thanks for the quick fix!