mui / mui/base-ui

NavigationMenu crashes with Preact in Astro compat mode

Open
#4,670 2 comments 0 reactions 0 assignees View on GitHub
integration: preact
Dominant language
TypeScript
Stars
10.9k
Forks
543
Avg merge
1d 20h
Merged PRs (30d)
101

Description

# 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:
/node_modules/.pnpm/preact@10.29.1/node_modules/preact/hooks/src/index.js:151:19
Stack trace:
at getHookState (/node_modules/.pnpm/preact@10.29.1/node_modules/preact/hooks/src/index.js:151:19)
at exports.useRef (/node_modules/.pnpm/preact@10.29.1/node_modules/preact/hooks/src/index.js:311:9)
at useStoreLegacy (/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 (/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 (/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 (/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 (/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 (/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 (/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 (/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 (/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 (/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 (/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 (/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

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.