Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Housi opened this issue Oct 22, 2024 · 1 comment
Open

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

Housi opened this issue Oct 22, 2024 · 1 comment

Comments

@Housi
Copy link

Housi commented Oct 22, 2024

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
Copy link

Eigilak commented Nov 5, 2024

I'm experiencing the exact same issue!

How to produce

  • Make new simple Nextjs app npx create-next-app@latest
  • Install `@radix-ui/[email protected]´
  • Import the <Theme></Theme> into the root page
  • set export const runtime = "edge"; in the root page

Also tried to follow this discussion: radix-ui/primitives#1915 but no luck

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants