Last 12 weeks · 0 commits
3 of 6 standards met
First thanks for the great library, I've always wished react had a better styling story similar to vue. React Compiler is now stable in Next.js 16 but using it with styled-jsx results in hydrations errors: It seems like styled-jsx created class names are added server side but not client side (or possibly the other way round). I've created a reproduction example here: https://codesandbox.io/p/devbox/quirky-sea-forked-gxhzym?workspaceId=ws_32JKZYd2T1VBPZg1gzYUpy
Do you want to request a feature or report a bug? bug What is the current behavior? Can not import . If the current behavior is a bug, please provide the steps to reproduce and possibly a minimal demo or testcase in the form of a Next.js app, CodeSandbox URL or similar Codesandbox Importing in external files doesn't work. From README What is the expected behavior? Successful import in external files.
Repository: vercel/styled-jsx. Description: Full CSS support for JSX without compromises Stars: 7794, Forks: 269. Primary language: JavaScript. Languages: JavaScript (100%), TypeScript (0%). License: MIT. Homepage: http://npmjs.com/styled-jsx Topics: css, css-in-js, dynamic-styles, jsx, react, shadow-dom. Latest release: v5.1.7 (10mo ago). Open PRs: 6, open issues: 77. Last activity: 10mo ago. Community health: 62%. Top contributors: giuseppeg, rauchg, leo, huozhi, nkzawa, Timer, thysultan, ijjk, a-ignatov-parc, ryanfitzer and others.
JavaScript
Steps to reproduce: Use `documenthydrateRoothydrateRootuseInsertionEffectdocument.headundefinedStyleSheet.makeStyleTagdocument.headnulluseInsertionEffectCannot read properties of null (reading 'appendChild')` and client rendering fails, resulting in a blank page. Codesandbox example. My opinion: Yes, the underlying issue is a bug in the app. Completely preventing hydration mismatch is difficult, especially when mismatches can be caused by unexpected browser behavior, extensions, and race conditions. The ability to log mismatches and fix them later is a good workflow for this as testing every case is not feasible. The reason I think styled-jsx should change is due to it causing client rendering to fail. React will try to recover from a mismatch and styled-jsx prevents recovery. Instead of a performance regression, users experience a broken page. I'm happy to discuss this and will open a PR "fixing" this issue. I don't expect the PR to be merged as I'm not familiar with the codebase and someone probably knows of a better way to address this. Thanks!
Do you want to request a _feature_ or report a _bug_? Bug What is the current behavior? This file https://github.com/vercel/styled-jsx/blob/main/.github/ISSUE_TEMPLATE.md contains please fill an issue to Next.js instead. https://github.com/verce/next.js/issues is not a valid link. It should have an "l" at the end: https://github.com/vercel/next.js/issues If the current behavior is a bug, please provide the steps to reproduce and possibly a minimal demo or testcase in the form of a Next.js app, CodeSandbox URL or similar What is the expected behavior? Using correct link https://github.com/vercel/next.js/issues The current link is 404 https://github.com/verce/next.js/issues Environment (include versions) N/A - gh repo related Did this work in previous versions? N/A - gh repo related