Issues with radix-ui

[marvinhagemeister]

Reported on discord:

I have updated the project with 22 components.

I have issues with Slider ContextMenu NavigationMenu Switch Toast

I have some errors like

An error occurred during route handling or page rendering. TypeError: Cannot
read properties of null (reading 'useMemo') at n.useMemo
(https://esm.sh/stable/react@18.2.0/es2022/react.mjs:2:6723) at

[fdemir]

It's because of the preact exports. Preact does not export useMemo hook from the root module. It exports from preact/hooks. Possibly it can solved by adding alias or external params to radix-ui.

We also should add it to the doc imo. Because so many libraries depends on react and should marked as external.

[marvinhagemeister]

@fdemir FYI: I work on Preact and wrote a good chunk of the react compatiblity layer.

React should always be aliased to preact/compat. It re-exports the preact/hooks entry and others. I mainly made this issue because we should have an easy way in Fresh to do that and have that applied automatically to dependencies coming from esm.sh and elsewhere.

[king8fisher]

1.4.2 -> 1.4.3 brought some new errors. Adding alias=react:preact/compat,@types/react:preact/compat to the https://esm.sh/ links has definitely made compiler happier. New compiler errors surfaced after that, around forwardRef. https://github.com/king8fisher/test-fresh-radix-ui is a fork from original reporter with these adjustments.

[kevingorski]

@king8fisher The alias params you mentioned helped me out, thanks!

I see in your fork that there appear to be some typos that may be causing issues: reac instead of react in &external=reac,react-dom

[king8fisher]

Oh! Great catch @kevingorski! Going to try and see if that affects the build!

[king8fisher]

1.4.3 -> 1.5.0 Still no great results. Errors around forwardRef:

• Strangely hinting to re-import forwardRef: The import specifier can be remapped to "react/jsx-runtime" which will resolve it via the active import map.deno(import-map-remap)
• Runtime error:

  An error occurred during route handling or page rendering.
  TypeError: Cannot read properties of undefined (reading '__H')
  at l (https://esm.sh/stable/preact@10.17.1/es2022/hooks.js:2:192)
  at B (https://esm.sh/stable/preact@10.17.1/es2022/hooks.js:2:326)
  at k (https://esm.sh/stable/preact@10.17.1/es2022/hooks.js:2:295)
  at P (https://esm.sh/v132/@radix-ui/react-use-controllable-state@1.0.1/X-YS9AdHlwZXMvcmVhY3Q6cHJlYWN0L2NvbXBhdCxyZWFjdDpwcmVhY3QvY29tcGF0CmUvcmVhY3QscmVhY3QtZG9t/es2022/react-use-controllable-state.mjs:2:574)
  at w (https://esm.sh/v132/@radix-ui/react-use-controllable-state@1.0.1/X-YS9AdHlwZXMvcmVhY3Q6cHJlYWN0L2NvbXBhdCxyZWFjdDpwcmVhY3QvY29tcGF0CmUvcmVhY3QscmVhY3QtZG9t/es2022/react-use-controllable-state.mjs:2:377)
  at https://esm.sh/v132/@radix-ui/react-toggle-group@1.0.4/X-YS9AdHlwZXMvcmVhY3Q6cHJlYWN0L2NvbXBhdCxyZWFjdDpwcmVhY3QvY29tcGF0CmUvcmVhY3QscmVhY3QtZG9t/es2022/react-toggle-group.mjs:2:1786
  at Object.t (https://esm.sh/stable/preact@10.17.1/es2022/compat.js:2:1577)
  at v (https://esm.sh/v133/preact-render-to-string@6.2.2/X-ZS8q/denonext/preact-render-to-string.mjs:2:3032)
  at v (https://esm.sh/v133/preact-render-to-string@6.2.2/X-ZS8q/denonext/preact-render-to-string.mjs:2:3597)
  at v (https://esm.sh/v133/preact-render-to-string@6.2.2/X-ZS8q/denonext/preact-render-to-string.mjs:2:3597)

[hapaxlife]

The link to fork and experiment modifications https://github.com/hapaxlife/test-fresh-radix-ui

[harrysolovay]

Pinging this issue, as I believe this compatibility is very important to many users, who may want to depend on radix-based libs such as shadcn/ui.

[ooker777]

React should always be aliased to preact/compat

By this do you mean to add this to the import map?

"react": "https://esm.sh/preact@10.15.1/compat",

It does alleviate the compiler, but it doesn't seem to be able to replace it completely. I use it to use cmdk but I don't see any UI from it.