css-in-js not work well on react router framework mode #14337
-
|
Hi, I've configured my app with However, when a runtime error occurs, it seems to trigger an SSR to rerender the page. This breaks the style of my application because some of the library using css in js. How can I force react-router to run all code in server, or is it any other solution to solve it ? package version: |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments
-
|
After analyzing, I found that the issue doesn't seem to stem from executing CSS-in-JS on the server. Instead, the CSS-in-JS library try to insert style tags when the browser DOM is still empty, causing it to fail. However, I don't understand why the CSS-in-JS library executes before the DOM has initialized. This problem only occurs when the application restarts after triggering an ErrorBoundary. This problem only occurs in React Router v7's framework mode. Using library mode or other libraries like Tankstack Router does not exhibit this behavior. |
Beta Was this translation helpful? Give feedback.
-
|
The @ant-design/cssinjs use useInsertionEffect to insert style to <head>, when the application restarts after triggering an ErrorBoundary. the DOM is empty when useInsertionEffect is trigger |
Beta Was this translation helpful? Give feedback.
-
|
this might be a problem of react, i upgrade my react from 18.x to 19.x solve the problem |
Beta Was this translation helpful? Give feedback.
this might be a problem of react, i upgrade my react from 18.x to 19.x solve the problem