NavigationMenu crashes with Preact in Astro compat mode

[k3dom]

Bug report

Current behavior

Base UI does not seem to work properly with Preact in an Astro app using @astrojs/preact.
In my Astro project, I added Base UI and used @base-ui/react/navigation-menu inside a component rendered with client:load. Even after configuring Preact compatibility, the app crashes with:

17:57:09 [ERROR] Cannot read properties of undefined (reading '__H')
  Location:
    <project-root>/node_modules/.pnpm/preact@10.29.1/node_modules/preact/hooks/src/index.js:151:19
  Stack trace:
    at getHookState (<project-root>/node_modules/.pnpm/preact@10.29.1/node_modules/preact/hooks/src/index.js:151:19)
    at exports.useRef (<project-root>/node_modules/.pnpm/preact@10.29.1/node_modules/preact/hooks/src/index.js:311:9)
    at useStoreLegacy (<project-root>/node_modules/.pnpm/@base-ui+utils@0.2.8_@preact+compat@18.3.2_preact@10.29.1__@preact+compat@18.3.2_preact@10.29.1__@types+react@19.2.14/node_modules/@base-ui/utils/esm/store/useStore.js:106:10)
    at FloatingRootStore.useState (<project-root>/node_modules/.pnpm/@base-ui+utils@0.2.8_@preact+compat@18.3.2_preact@10.29.1__@preact+compat@18.3.2_preact@10.29.1__@types+react@19.2.14/node_modules/@base-ui/utils/esm/store/ReactStore.js:142:12)
    at NavigationMenuList (<project-root>/node_modules/.pnpm/@base-ui+react@1.4.1_@date-fns+tz@1.2.0_@preact+compat@18.3.2_preact@10.29.1__@preact+c_39c42a3009535fefbc40e16c3cc37286/node_modules/@base-ui/react/esm/navigation-menu/list/NavigationMenuList.js:43:3)
    at _renderToString (<project-root>/node_modules/.pnpm/preact-render-to-string@6.6.7_preact@10.29.1/node_modules/preact-render-to-string/src/index.js:404:23)
    at _renderToString (<project-root>/node_modules/.pnpm/preact-render-to-string@6.6.7_preact@10.29.1/node_modules/preact-render-to-string/src/index.js:715:10)
    at _renderToString (<project-root>/node_modules/.pnpm/preact-render-to-string@6.6.7_preact@10.29.1/node_modules/preact-render-to-string/src/index.js:501:16)
    at _renderToString (<project-root>/node_modules/.pnpm/preact-render-to-string@6.6.7_preact@10.29.1/node_modules/preact-render-to-string/src/index.js:501:16)
    at _renderToString (<project-root>/node_modules/.pnpm/preact-render-to-string@6.6.7_preact@10.29.1/node_modules/preact-render-to-string/src/index.js:501:16)
    at _renderToString (<project-root>/node_modules/.pnpm/preact-render-to-string@6.6.7_preact@10.29.1/node_modules/preact-render-to-string/src/index.js:501:16)
    at _renderToString (<project-root>/node_modules/.pnpm/preact-render-to-string@6.6.7_preact@10.29.1/node_modules/preact-render-to-string/src/index.js:501:16)
    at _finallyRethrows (<project-root>/node_modules/.pnpm/preact-render-to-string@6.6.7_preact@10.29.1/node_modules/preact-render-to-string/src/index.js:578:16)
    at Object.renderToStaticMarkup (<project-root>/node_modules/.pnpm/@astrojs+preact@5.1.2_@babel+core@7.29.0_@types+node@25.6.0_jiti@2.6.1_lightningcss@1.3_9da29607664a30e36b9ef4c691a1a242/node_modules/@astrojs/preact/dist/server.js:58:36)
    at process.processTicksAndRejections (node:internal/process/task_queues:104:5)

I already tried the usual compatibility setup:

• added pnpm overrides for react and react-dom to resolve to @preact/compat
• enabled compat mode in Astro with preact({ compat: true })
  Relevant versions from the project:
• @base-ui/react: 1.4.1
• @astrojs/preact: 5.0.3
• astro: 6.1.9
• preact: 10.29.1

This looks similar to #1995

Expected behavior

Base UI components should work with Preact when using @astrojs/preact and the standard compat setup (@preact/compat overrides + compat: true).

Base UI version

1.4.1

Which browser are you using?

Chrome

Which OS are you using?

Linux

Additional context

When disabling SSR for that island via client:only="preact" everything works

[mj12albert]

Codex findings:

• Bug confirmed. I reproduced it in a clean Astro app with astro 6.1.9, @astrojs/preact 5.1.2, preact 10.29.1, @preact/compat 18.3.2, and @base-ui/react 1.4.1. Rendering NavigationMenu with client:load fails on pnpm build with the same __H stack.
• This is not user error. The failing path starts in packages/utils/src/store/useStore.ts, which imports use-sync-external-store shims.
• The evidence points to an ESM/CJS interop bug with Preact compat, not NavigationMenu logic itself:
  • CJS SSR works.
  • ESM SSR fails.
  • A minimal ESM Preact SSR example that imports use-sync-external-store/shim or /with-selector also fails.
  • @preact/compat exposes separate import and require entrypoints, so the shim is very likely pulling a different runtime than Astro’s ESM renderer.
• Scope is broader than NavigationMenu. The same hazard exists in packages/react/src/utils/useIsHydrating.ts and packages/react/src/unstable-use-media-query/index.ts.

Workaround

• client:only="preact" is a valid temporary workaround and matches the issue report.
• Forcing CJS also avoids the crash, but that is brittle and not a good user-facing workaround.

Proposed fix

• Add an internal ESM-safe useSyncExternalStore compat helper that prefers React.useSyncExternalStore under Preact compat, reusing the existing Preact detection idea from packages/utils/src/useStableCallback.ts
• Replace the external selector shim in packages/utils/src/store/useStore.ts with a local useSyncExternalStoreWithSelector wrapper built from React hooks.
• Keep the current React 18 behavior unless Preact compat is detected, so we don’t regress the React 18 concerns noted in PR #3360.
• Audit and switch the direct shim consumers in useIsHydrating and useMediaQuery to the same helper.

I validated this fix shape by patching a throwaway install under .context; after replacing the selector shim with a local wrapper, the Astro repro build passed.