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

fix(v2): styles removed when Nextjs (app) rehydrates #9593

Merged
merged 5 commits into from
Feb 19, 2025

Conversation

isBatak
Copy link
Contributor

@isBatak isBatak commented Feb 2, 2025

Closes #9579

📝 Description

This PR updates the implementation to use __unsafe_useEmotionCache instead of withEmotionCache, as Chakra UI injects CSS into the document head for certain transitions, requiring a nonce.

  • Chakra UI handles CSS injection in the client for specific transitions, requiring a nonce. Reference
  • Since this behavior occurs only on the client, we can safely use the __unsafe_useEmotionCache hook. Reference
  • __unsafe_useEmotionCache is labeled "unsafe" because it may break Emotion’s automatic SSR support. However, in this case, Chakra UI's logic runs exclusively on the client, making this usage safe. On the server, the hook simply returns null. Changelog Reference

⛳️ Current behavior (updates)

🚀 New behavior

💣 Is this a breaking change (Yes/No):

No

📝 Additional Information

Users should update Emotion to v11.14.0

Copy link

vercel bot commented Feb 2, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
chakra-ui-storybook ✅ Ready (Inspect) Visit Preview Feb 19, 2025 5:17pm
chakra-v3-docs ❌ Failed (Inspect) Feb 19, 2025 5:17pm

Copy link

changeset-bot bot commented Feb 2, 2025

🦋 Changeset detected

Latest commit: 43b41c5

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 14 packages
Name Type
@chakra-ui/storybook-addon Patch
@chakra-ui/gatsby-plugin Patch
@chakra-ui/styled-system Patch
@chakra-ui/theme-tools Patch
@chakra-ui/react Patch
@chakra-ui/props-docs Patch
@chakra-ui/test-utils Patch
@chakra-ui/anatomy Patch
@chakra-ui/next-js Patch
@chakra-ui/hooks Patch
@chakra-ui/icons Patch
@chakra-ui/theme Patch
@chakra-ui/utils Patch
@chakra-ui/cli Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@isBatak isBatak changed the title [V2] fix: Use __unsafe_useEmotionCache Instead of withEmotionCache fix(v2): Use __unsafe_useEmotionCache Instead of withEmotionCache Feb 2, 2025
@isBatak isBatak changed the title fix(v2): Use __unsafe_useEmotionCache Instead of withEmotionCache fix(v2): Styles removed when Nextjs (app) rehydrates Feb 3, 2025
@isBatak isBatak changed the title fix(v2): Styles removed when Nextjs (app) rehydrates fix(v2): styles removed when Nextjs (app) rehydrates Feb 3, 2025
@segunadebayo
Copy link
Member

@isBatak can you rebase this? and I'll have it merged

@segunadebayo segunadebayo merged commit 6d78072 into chakra-ui:v2 Feb 19, 2025
1 of 2 checks passed
@isBatak isBatak deleted the fix/next-15-emotion-issue branch February 19, 2025 17:21
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

Successfully merging this pull request may close these issues.

Styles removed when Nextjs (app) rehydrates
2 participants