Warning because of dynamic values during SSR
- Dominant language
- JavaScript
- Stars
- 7.1k
- Forks
- 386
- PR merge metrics
- No merged PRs in 30d
Description
__Describe the bug:__
I'm using my styles like these:
```js
export default (theme) => ({
root: {
position: 'relative',
display: 'inline-flex',
alignItems: 'center',
textAlign: 'center',
background: theme.bgColor,
fontWeight: ({weight}) => weight, // here is the problem
},
});
```
And I'm getting this error on server-side (client is fine): `Warning: [JSS] Rule is not linked. Missing sheet option "link: true".`
If I delete the dynamic value for `fontWeight` I will not get this error again. The problem not only in the warning itself, but also in the way how my styles will be applyed in production mode (they break styles in the styles where I'm using dynamic value and server sends me wrong styles after page reloading).
P.S. I have tried using styles like this `const useStyles = createUseStyles(styles, {link: true});` and it's still not working :(
__Codesandbox link:__
I'm sorry, I have a problem with adding codesandbox.io with SSR and node.js console.
- latest version:
- Chrome:
- Windows:
Contributor guide
Research direction
Start with the SSR path around createUseStyles and reproduce the reported styles object using a dynamic fontWeight value and link: true. Compare the server-rendered output and client behavior after reload; done means the warning is gone and dynamic styles remain correct in production. The issue has no reproducible CodeSandbox or named files/tests, so locating the relevant SSR entry point is part of the work.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100