TypeError: _jss.RuleList is not a constructor

[trusktr]

I'm getting this error:

TypeError: _jss.RuleList is not a constructor
    at new GlobalContainerRule (/Users/trusktr/src/Signafy+mapper-public-website/node_modules/jss-global/lib/index.js:28:18)
    at Array.onCreateRule (/Users/trusktr/src/Signafy+mapper-public-website/node_modules/jss-global/lib/index.js:162:14)
    at PluginsRegistry.onCreateRule (/Users/trusktr/src/Signafy+mapper-public-website/node_modules/react-jss/node_modules/jss/lib/PluginsRegistry.js:39:46)
    at createRule (/Users/trusktr/src/Signafy+mapper-public-website/node_modules/react-jss/node_modules/jss/lib/utils/createRule.js:33:26)
    at RuleList.add (/Users/trusktr/src/Signafy+mapper-public-website/node_modules/react-jss/node_modules/jss/lib/RuleList.js:104:46)
    at new StyleSheet (/Users/trusktr/src/Signafy+mapper-public-website/node_modules/react-jss/node_modules/jss/lib/StyleSheet.js:52:18)
    at Jss.createStyleSheet (/Users/trusktr/src/Signafy+mapper-public-website/node_modules/react-jss/node_modules/jss/lib/Jss.js:123:19)
    at Jss.createState (/Users/trusktr/src/Signafy+mapper-public-website/node_modules/react-jss/lib/createHoc.js:221:34)
    at new Jss (/Users/trusktr/src/Signafy+mapper-public-website/node_modules/react-jss/lib/createHoc.js:146:27)
    at processChild (/Users/trusktr/src/Signafy+mapper-public-website/node_modules/react-dom/cjs/react-dom-server.node.development.js:2098:14)
    at resolve (/Users/trusktr/src/Signafy+mapper-public-website/node_modules/react-dom/cjs/react-dom-server.node.development.js:2064:5)
    at ReactDOMServerRenderer.render (/Users/trusktr/src/Signafy+mapper-public-website/node_modules/react-dom/cjs/react-dom-server.node.development.js:2383:22)
    at ReactDOMServerRenderer.read (/Users/trusktr/src/Signafy+mapper-public-website/node_modules/react-dom/cjs/react-dom-server.node.development.js:2357:19)
    at renderToString (/Users/trusktr/src/Signafy+mapper-public-website/node_modules/react-dom/cjs/react-dom-server.node.development.js:2729:25)
    at renderPage (/Users/trusktr/src/Signafy+mapper-public-website/node_modules/next/dist/server/render.js:275:26)
    at Function.getInitialProps (/Users/trusktr/src/Signafy+mapper-public-website/.dist/server/bundles/pages/_document.js:307:26)

JSS v3.11.1

Any ideas why? What might I be doing wrong?

[kof]

Please report properly with reproduction on the latest version. You want us to take time answering it.

[trusktr]

It is private code, so unfortunately I can't share it. I can't report a reproduction because I don't know how to reproduce yet.

From what I saw, it looked like the code in jss-global was trying to do new _jss.RuleList() and RuleList was not a constructor (undefined maybe?). I couldn't pause code execution because for some reason the error is logged from a console.log, not thrown (👎 to that).

Could it be a build issue? I'm not sure yet.

When I re-enable the code that was breaking it, I'll try to report more details that I can find.

[trusktr]

That's why I wrote "Any ideas?". It could be that you may have seen the error before. But I suppose not.

[kof]

I have seen it, but its either bug in jss which is potentially fixed or something wrong with your code. So many chances that I can't help with this. According to your description an error was thrown. Mb something is catching and logging it. I don't think we use console.log in the current version, not sure about v3. I think you will have to get us a reproduction on codesandbox. Closing for now.

[trusktr]

@kof

The error is happening in node_modules/jss-global/lib/index.js line 28, in the code that looks like this:

// ...
var GlobalContainerRule = function () {
  function GlobalContainerRule(key, styles, options) {
    _classCallCheck(this, GlobalContainerRule);

    this.type = 'global';

    this.key = key;
    this.options = options;
    this.rules = new _jss.RuleList(_extends({}, options, { // HERE <----------------------
      parent: this
    }));

    for (var selector in styles) {
      this.rules.add(selector, styles[selector], { selector: selector });
    }

    this.rules.process();
  }
// ...

If I add a console.log(_jss), like

    console.log(_jss)
    this.rules = new _jss.RuleList(_extends({}, options, { // HERE <----------------------
      parent: this
    }));

then the output before the error is

Jss {
  sheets: SheetsRegistry { registry: [] },
  plugins: PluginsRegistry { registry: [] },
  uid: { get: [Function: get], reset: [Function: reset] },
  version: '3.11.1',
  Jss: [Function: Jss],
  StyleSheet: [Function: StyleSheet],
  Rule: [Function: Rule],
  default: [Circular] }

and there's clearly no RuleList in there.

My stylesheet which triggers the error is like this:

function style(theme: Theme) {
  return {
    "@global": {
      ...fonts,

      ":root": {
        "--body-width": "calc( 1px )"
      },

      "*": {
        boxSizing: "border-box",
        border: "1px solid #ccc"
      },

      "html, body": {
        width: "100%",
        height: "100%",
        margin: 0,
        padding: 0
      },

      html: {
        fontFamily: "SF, sans-serif",
        fontSize: "100%",
        "--current-scale": 1,

        "& #root, & #header, & #mobileMenu": {
          transformOrigin: "top left"
        }
      },

      [media("<XS4")]: {
        html: {
          "& #root, & #header, & #mobileMenu": {
            transform: `scale( ${theme.media.scale.XS5} )`,
            width: `calc( 100% * 1 / ${theme.media.scale.XS5} )`
          },
          "--current-scale": theme.media.scale.XS5
        }
      },

      ".mobile": {
        [media(">=desktop")]: {
          display: "none"
        }
      },

      body: {
        margin: 0,
        padding: 0,
        overflowX: "hidden"
      },

      ".fades": {
        transition: "opacity 1s"
      },

      ".fadedOut": {
        opacity: 0
      },

      ".btn": {
        transition: "opacity 200ms",
        cursor: "pointer",
        "-webkit-tap-highlight-color": "transparent",

        "&:hover": {
          opacity: 0.65
        },

        a: {
          textDecoration: "none",
          "-webkit-tap-highlight-color": "transparent"
        }
      },

      ".contact_button": `
        background-color: #000000;
        display: block;
        color: ${theme.colors.white};
        font-family: SFProDisplay-Bold;
        font-size: ${px(24)};
        text-align: center;
        text-decoration: none;

        width: ${px(200)};
        height: ${px(57)};
        line-height: ${px(57)};
        border-radius: ${px(4)};
        box-shadow: ${px(3)} ${px(3)} ${px(14)} ${px(2)} rgba(16, 16, 16, 0.35);
    `
    }
  };
}

[trusktr]

Alright, I found out that if I remove the @global top level object, then the error goes away, so my style looks like this:

function style(theme: Theme) {
  return {
      ...fonts,

      ":root": {
        "--body-width": "calc( 1px )"
      },

      "*": {
        boxSizing: "border-box",
        border: "1px solid #ccc"
      },

      "html, body": {
        width: "100%",
        height: "100%",
        margin: 0,
        padding: 0
      },

      html: {
        fontFamily: "SF, sans-serif",
        fontSize: "100%",
        "--current-scale": 1,

        "& #root, & #header, & #mobileMenu": {
          transformOrigin: "top left"
        }
      },

      [media("<XS4")]: {
        html: {
          "& #root, & #header, & #mobileMenu": {
            transform: `scale( ${theme.media.scale.XS5} )`,
            width: `calc( 100% * 1 / ${theme.media.scale.XS5} )`
          },
          "--current-scale": theme.media.scale.XS5
        }
      },

      ".mobile": {
        [media(">=desktop")]: {
          display: "none"
        }
      },

      body: {
        margin: 0,
        padding: 0,
        overflowX: "hidden"
      },

      ".fades": {
        transition: "opacity 1s"
      },

      ".fadedOut": {
        opacity: 0
      },

      ".btn": {
        transition: "opacity 200ms",
        cursor: "pointer",
        "-webkit-tap-highlight-color": "transparent",

        "&:hover": {
          opacity: 0.65
        },

        a: {
          textDecoration: "none",
          "-webkit-tap-highlight-color": "transparent"
        }
      },

      ".contact_button": `
        background-color: #000000;
        display: block;
        color: ${theme.colors.white};
        font-family: SFProDisplay-Bold;
        font-size: ${px(24)};
        text-align: center;
        text-decoration: none;

        width: ${px(200)};
        height: ${px(57)};
        line-height: ${px(57)};
        border-radius: ${px(4)};
        box-shadow: ${px(3)} ${px(3)} ${px(14)} ${px(2)} rgba(16, 16, 16, 0.35);
      `
  };
}

Now there's no more error.

Any idea why there may not be a _jss.RuleList on _jss?

[trusktr]

Versions:

• jss: 3.11.1
• react-jss: 8.6.1
• jss-global: 3.0.0

package.json:

    "react-jss": "^8.6.1",

Does anything stand out about that?

[trusktr]

I see react-jss depends on

    "jss": "^9.7.0",

so why would it install such an old version of JSS?

[trusktr]

Shoot, because I have another lib in my project that depends on JSS 3, I think this has to do with it...

But why on earth is NPM not forking the dependency?

jss-global and react-jss should both be importing their own version of JSS. It has nothing to do with the other lib, and normally npm should install both versions (a dependency fork).

Maybe this is an npm bug.

[trusktr]

For some reason, npm is telling me that jss v9 is a peer dependency of react-jss, but I don't see that to be the case in react-jss package.json:

  "dependencies": {
    "hoist-non-react-statics": "^2.5.0",
    "jss": "^9.7.0",
    "jss-preset-default": "^4.3.0",
    "prop-types": "^15.6.0",
    "theming": "^1.3.0"
  },
  "peerDependencies": {
    "react": ">=0.13"
  },

WEIRD...

[trusktr]

I think this is an NPM bug, because jss is clearly a dependency of react-jss, so the proper version should be installed.

[trusktr]

Why is npm telling me

npm WARN reset-jss@1.0.0 requires a peer of jss@^9.0.0 but none is installed. You must install peer dependencies yourself.

@kof Is that true? Did I miss something obvious?

I'm looking in https://unpkg.com/react-jss@8.6.1/package.json, and I do not see jss listed as a peerDependency.

---

TLDR: I expected to install only react-jss in my project and for it to work.

---

I was able to solve the problem by doing npm i jss to install the latest, but that should not be required (again I don't see it as "peer" in react-jss package.json)

[HenriBeck]

In your npm warn it says react-jss@1.0.0 which is weird

[kof]

sounds like you have a mixture of incompatible versions

[trusktr]

@kof, Ah, looks familiar: https://github.com/cssinjs/jss/issues/456

I'm not entirely sure, but I think it is an NPM issue that has to do with the fact that react-jss relies on jss-global and that jss-global relies on jss as a peer dependency.

This isn't clear from documentation at all, and not even from looking at react-jss package.json.

In my opinion, react-jss and similar libs should depend on explicit versions both plugins and `jss itself, then we'll never have this problem.

[kof]

https://github.com/cssinjs/react-jss/blob/master/package.json#L90

[trusktr]

This makes it all even more weird. For some reason, I still have to manually install jss otherwise it doesn't work.

I think it has to do with jss being peer for jss-global. Not your JSS's fault, probably NPM.

I swear on my familie's lives: if I remove jss from my package.json and have only react-jss, and re-install from scratch, I will get this error because it will not install jss (and I have another package that depends on jss, but NPM is not making a dependency fork).

I believe this is a problem with NPM (but I'm not sure exactly what the problem is).

Honestly I don't know what the best solution is (other than for me to manually install jss).

[trusktr]

I think it's an NPM bug. It should be installing the correct jss dependency for react-jss regardless if another package uses some other version of jss.