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

[wiktoriavh]

I didn't realise the other issue was closed, this is still a problem, so I am opening a new issue about it.

---

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.

Originally posted by @Braweria in https://github.com/cssinjs/jss/issues/1143#issuecomment-883651067

---

Edit (2024-02-28): I am no longer using this, so I am unsubscribing from it. I also cannot give more info on it, if requested in the future.

[wiktoriavh]

It has been about 20 days since I posted this, and it saw no comments. This is an issue that exists since before I posted about it here, so having a fix for this would be great.

[SeongwoonHong]

@Braweria have you been able to resolve this issue?

[rtivital]

This warning usually does not break anything, if you want to remove it you can patch console to filter it out until it gets fixed

if (typeof window === "undefined") {
  const originalWarn = console.warn;
  console.warn = (...args: any) => {
    if (
      args[0] !==
      'Warning: [JSS] Rule is not linked. Missing sheet option "link: true".'
    ) {
      originalWarn(...args);
    }
  };
}

[wiktoriavh]

@SeongwoonHong No, I didn't find a solution yet. @rtivital It might not break anything, but it is very annyoing to see and hiding it on my end, won't really solve the actual issue behind it.

[ilyadoroshin]

@Braweria maybe you'll find it useful

I was able to find the source of trouble, however, I couldn't find it in jss workspace. So I've got jest tests in jsdom and if there's any property set with function within keyframes or media, it'll raise warning and link: true doesn't fix it, e.g. the following raises warning:

export default createUseStyles(
  {
    '@keyframes slideRight': {
      from: { opacity: () => 0 },
      to: { opacity: 1 },
    },

or

export default createUseStyles(
  {
    root: {
      boxSizing: 'border-box',
      margin: 0,
      '@media (min-width: 1024px)': {
        width: () => 0,
      },
    },

or even

export default createUseStyles(
  {
    root: {
      boxSizing: 'border-box',
      margin: 0,
    },
    '@media (min-width: 1024px)': {
      root: {
        width: () => 0,
      },
    },

It's not reproducible in storybook tho

[ilyadoroshin]

dug deeper, and narrowed it down to this:

import { create } from 'jss';
import functions from 'jss-plugin-rule-value-function';
import nested from 'jss-plugin-nested';

const jss = create({
  plugins: [functions(), nested()],
});

test('jss', () => {
  const sheet = jss.createStyleSheet(
    {
      button: {
        opacity: 1,

        '@media (min-width: 0px)': {
          opacity: () => 1,
        },
      },
    },
  );
  sheet.attach();
  sheet.update({});
});

looks like those two plugins (nested and functions) don't play well together when defining styles as functions inside media/keyframes when sheet is updated

[ilyadoroshin]

seems related #1557

[kof]

Good repro @ilyadoroshin, that media query is created from a nested plugin, because the core media rules are on the root level only

[ilyadoroshin]

@kof but

export default createUseStyles(
  {
    '@keyframes slideRight': {
      from: { opacity: () => 0 },
      to: { opacity: 1 },
    },

leads to same results.. in fact looks like all the @media and @keyframes that have props as functions leading to this warning

[kof]

@ilyadoroshin seems like a different bug of the same kind. Probably code-wise unrelated

[benistary]

Exact problem. Any news?

Next 12.1.0 React-jss 10.9.0

[OlegBabich]

Hi guys, I have the same problem Any news???

[cameralis]

Man why is this in my terminal