Incorrect "Rule is not linked" warning on server when using function rules

[felthy]

Expected behavior:
No warning.

Describe the bug:
All function rules are triggering the following warning when run on the server: Warning: [JSS] Rule is not linked. Missing sheet option "link: true".

I've traced the problem back to the fact that in Jss.js, options.Renderer is set to null when not in the browser. This eventually leads to the code in BaseStyleRule.prop() falling through to the warning because this.renderable and this.renderer are not defined at styleRule.js#L71.

The warning is incorrect: the sheet option link is actually true, and the fact that this.renderable and this.renderer are not defined is correct because on the server, we don't need anything to happen in prop() because we'll call toString() later the render the CSS.

I would contribute a test to replicate the bug, but I don't think it's possible with the existing karma setup because we need 'is-in-browser' to report false to trigger the bug. So, I've written a jest test (see link below) to demonstrate.

Codesandbox link:
https://repl.it/@felthy/JssInvalidWarningDuringSSR

Versions:

• jss: 10.0.0-alpha.20

jest test source:

/**
 * @jest-environment node
 */
import warning from 'tiny-warning'
import {create, SheetsRegistry, SheetsManager} from 'jss/dist/jss.cjs'
import functionPlugin from 'jss-plugin-rule-value-function/dist/jss-plugin-rule-value-function.cjs'
import isInBrowser from 'is-in-browser'

jest.mock('tiny-warning')

describe('React-JSS: rendering in an SSR context', () => {
  it('should render a dynamic rule without warnings', () => {
    expect(isInBrowser).toBe(false)

    const jss = create().use(functionPlugin())
    const sheet = jss.createStyleSheet({
      rule: () => ({
        color: 'red'
      })
    }, {
      link: true
    }).attach()
    sheet.update({})
    const css = sheet.toString()

    expect(css).toContain('color: red;')
    expect(warning).not.toHaveBeenCalled()
  })
})

[kof]

I think the option link: true shouldn't be passed to JSS on the server.

[felthy]

Removing link: true didn’t seem to help (by changing to isInBrowser && dynamicStyles !== null in createStyleSheet()).

On the other hand, this issue will go away if we stop calling manageSheet() on the server like @HenriBeck suggested in #1140, because of the sheet.attached check:

if (sheet && sheet.attached) {
  warning(false, '[JSS] Rule is not linked. Missing sheet option "link: true".')
}

[kof]

@felthy is this still an issue?

[felthy]

@kof it is fixed when using createUseStyles() but it still occurs when using the withStyles() HOC.

I think the HOC should be updated to not call manageSheets() - the hook's behaviour has now diverged from that of the HOC.

[hanayashiki]

Still get this annoying warning on the server side. Any solutions?

[benistary]

Same here guys 🙋‍♂️

[DavidWells]

I'm also seeing this. Has anyone found a solution to this?

[Ontopic]

Tried the solutions that were mentioned above, but no luck so far. Is anyone else also using Babel, styled-components and/or NextJS? I'm feeling the errors become less if I temporarily shut a part down, although more research required.

[wiktoriavh]

I am running into this problem myself and build a minimal viable repo of it.
https://github.com/Braweria/react-jss-issue-rule-not-linked

I could trace the Problem to HeadingSection.tsx -> Box.tsx.
<Box /> alone does not call the error, but in combination with the <HeadingSection /> it does.

I am using NextJS in my project, and both my _app and _document are correctly set up using the following resources:

• https://codesandbox.io/s/03yx1m5k6w?file=/pages/_document.js
• https://github.com/vercel/next.js/blob/master/examples/with-react-jss/pages/_document.js

My dependencies:

  "dependencies": {
    "jss": "^10.7.1",
    "jss-plugin-camel-case": "^10.7.1",
    "jss-plugin-global": "^10.7.1",
    "jss-plugin-vendor-prefixer": "^10.7.1",
    "next": "11.0.1",
    "normalize-jss": "^4.0.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-jss": "^10.7.1"
  }

When I start the dev server I get this warning

Warning: [JSS] Rule is not linked. Missing sheet option "link: true".

exactly twice. For each refresh, I get this warning twice.

The solutions mentioned here did not help.

[SeongwoonHong]

i'm facing the same issue, any luck ?

[aymengraoui]

im facing the same issue even with createUseStyles(), any updates ?

[benistary]

Exact problem. Any news?

Next 12.1.0
React-jss 10.9.0