radix-ui / themes

Radix Themes is an open-source component library optimized for fast development, easy maintenance, and accessibility. Maintained by @workos.
https://radix-ui.com/themes
MIT License
5.64k stars 202 forks source link

bug: Themes don't work with edge SSR #613

Open Housi opened 3 weeks ago

Housi commented 3 weeks ago

After switching runtime to 'edge' next won't build

I see there is similar issue which is closed as 'completed' with the solution to 'use client' ... Applying styles is not justified use-case for 'use client' (I could as well use styled-components in such scenario)

[01:12:43.597] Failed to compile.
[01:12:43.597] 
[01:12:43.597] ./node_modules/@radix-ui/react-primitive/dist/index.mjs
[01:12:43.597] Attempted import error: 'flushSync' is not exported from 'react-dom' (imported as 'ReactDOM').
[01:12:43.598] 
[01:12:43.598] Import trace for requested module:
[01:12:43.598] ./node_modules/@radix-ui/react-primitive/dist/index.mjs
[01:12:43.598] ./node_modules/@radix-ui/react-visually-hidden/dist/index.mjs
[01:12:43.598] ./node_modules/@radix-ui/themes/dist/esm/components/visually-hidden.js
[01:12:43.598] ./node_modules/@radix-ui/themes/dist/esm/components/base-button.js
[01:12:43.598] ./node_modules/@radix-ui/themes/dist/esm/components/button.js
[01:12:43.598] __barrel_optimize__?names=Button,Flex,Heading,Text!=!./node_modules/@radix-ui/themes/dist/esm/index.js
[01:12:43.598] ./app/medical-survey/thank-you/page.tsx
[01:12:43.598] ./node_modules/next/dist/build/webpack/loaders/next-app-loader/index.js?name=app%2Fmedical-survey%2Fthank-you%2Fpage&page=%2Fmedical-survey%2Fthank-you%2Fpage&pagePath=private-next-app-dir%2Fmedical-survey%2Fthank-you%2Fpage.tsx&appDir=%2Fvercel%2Fpath0%2Fapp&appPaths=%2Fmedical-survey%2Fthank-you%2Fpage&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&basePath=&assetPrefix=&nextConfigOutput=&flyingShuttle=false&preferredRegion=&middlewareConfig=e30%3D!./app/medical-survey/thank-you/page.tsx?__next_edge_ssr_entry__

This is output after adding ' 'optimizePackageImports' and 'transpilePackages' in next-config. I tried both settings with "@radix-ui/themes", "@radix-ui/react-primitive" and "react-dom" (as someone suggested for vite), nothing works

Eigilak commented 1 week ago

I'm experiencing the exact same issue!

How to produce

Also tried to follow this discussion: https://github.com/radix-ui/primitives/discussions/1915 but no luck