Is it compatible with Preact?

[vxncetxn]

I use regular React in development mode and Preact in production by adding this to my next.config.js:

if (!dev && !isServer) { Object.assign(config.resolve.alias, { react: 'preact/compat', 'react-dom/test-utils': 'preact/test-utils', 'react-dom': 'preact/compat', }) }

and found that the Radix primitives only work in development mode, in production, a timeout will occur in any page containing any Radix primitives. This has to be the issue because it works perfectly fine if I remove the above lines, so I'm just wondering if these primitives are incompatible with Preact, or perhaps it is just incompatible with the way I am using Preact. Thanks!

[jjenzz]

We haven't done any testing with Preact I'm afraid. We only support React at the moment so I wouldn't know what the issue is here 😞

[wenzf]

Any news about this? Has there been found a way to use Radix primitives in Preact?

[benoitgrelard]

We only support React as we make heavy use of things like portals with event bubbling.

[nikuda]

@vxncetxn @wenzf Major issues with Radix and Preact compatibility seem to have been fixed in Preact v10.10.1.

[yumin-chen]

I have tried latest Preact v10.10.2 with latest Radix Primitives v1.0.0, and can confirm I'm having issues with Portals in Radix UI. Portals won't show up correctly from components like Select.Portal, causing runtime exceptions like:

• TypeError: items[(items.length - 1)] is undefined from SelectContentImpl.

The root cause is elements under Radix Portals went missing. The entire implementation of https://www.radix-ui.com/docs/primitives/utilities/portal might be incompatible with Preact.

[josetr]

I just tried the latest version of Preact + @radix-ui/react-hover-card, and clicking on <HoverCard.Trigger /> doesn't send you to the specified "href" unless you click rare edges of the trigger (usually top right corner works).

[heimathafen-io]

Did you use the compat lib of preact? https://github.com/preactjs/compat-alias-package

[beautyfree]

Same question

[senpro-ingwersenk]

I haven't run into any issues so far with Preact 10.23.2 - however, I did do aliasing in Vite:

    resolve: {
      alias: {
        'react': 'preact/compat',
        'react-dom': 'preact/compat',
        // shadcn
        '@': resolve(__dirname, "frontend/"),
      }
    }

Additionally, the vite-preact preset does that, and a few other things as well to help compatibility.

Hoping to see some Preact-oriented testing in the future - even if only ran on the side to produce a list of what works and what doesn't as a bit of a guide to people wanting to go down this route.

I sure do, because the difference between react and preact/compat is actually noticeable, especially when you add other components like the react-router or the various vdom modules.

[MMTE]

as @senpro-ingwersenk mentioned vite is handling the process. also there is a installation for vite if you are using preact-vite:
https://ui.shadcn.com/docs/installation/vite