Error while trying to use radix theme with pre-configured cloudflare pages (next.js) command

[trace2798]

When I tried to use Radix theme with Next.js and Cloudflare pages, during the build process I got this error

Failed to compile.

./node_modules/@radix-ui/react-primitive/dist/index.mjs
Attempted import error: 'flushSync' is not exported from 'react-dom' (imported as 'ReactDOM')

To reproduce:

1. You can clone this repo and try it yourself.

Steps I took to create it:

1. Using the following command to create a Next.js app pre-configured with Cloudflare

   npm create cloudflare@latest -- my-next-app --framework=next

2. Following the get started guide from radix

In the past, I have used radix theme in a similar way and it always worked flawlessly.

[rgabriel01]

we have the very same issue as well

[rgabriel01]

This normally happens when runtime is edge

[trace2798]

Yup. I just moved back to shadcn/ui

[Mista-Shelby]

Hi, Exact same issue here :( I built my whole app with radix UI components, everything was working fine locally but now I can't compile. Anybody has a workaround or should I rewrite all my components ?

[nkg168]

Probably because layout.tsx, which imports Theme, is server components. https://github.com/trace2798/latest-test-cf-nx-radix/blob/master/app/layout.tsx

The following may be helpful. https://github.com/snelsi/nextjs-radix-themes-template/blob/main/src/app/providers.tsx#L1

[Mista-Shelby]

Probably because layout.tsx, which imports Theme, is server components. https://github.com/trace2798/latest-test-cf-nx-radix/blob/master/app/layout.tsx

The following may be helpful. https://github.com/snelsi/nextjs-radix-themes-template/blob/main/src/app/providers.tsx#L1

That worked flawlessly, thank you so much !

[rgabriel01]

yup the above solutions works! Just to tinker a bit, is there a way without using 'use client' ?

[trace2798]

Since @nkg168 pointed out the solution which made it work I am closing this issue. Thanks a lot @nkg168

[Housi]

This example is client component, so it's not possible to render RSC with radix themes on the edge?

[Eigilak]

👀