Weird error: Uncaught TypeError: _jss.RulesContainer is not a constructor

[trusktr]

I'm getting an error with a stack trace like this:

Uncaught TypeError: _jss.RulesContainer is not a constructor
    at new GlobalContainerRule (index.js:28)
    at Array.onCreateRule (index.js:170)
    at PluginsRegistry.onCreateRule (jss.js:897)
    at createRule (jss.js:335)
    at RulesContainer.add (jss.js:151)
    at new StyleSheet (jss.js:1003)
    at Jss.createStyleSheet (jss.js:743)
    at Object.<anonymous> (main.style.ts:5)
    at Object.<anonymous> (main.style.ts:29)
    at __webpack_require__ (bootstrap ef9dd84…:52)

I have main.ts:

import './main.style'
// ...

and main.style.ts:

import jss from 'jss'

jss.createStyleSheet({
    '@global': {

        '.grabbing': {
            cursor: 'grabbing',
        },

        'div#app, div#imvu, div.mode-container': {
            width: 100,
            height: 100,
        },

        // hide the mode navbar for now.
        'div#app': {
            '& nav.global-nav.bar': {
                display: 'none',
            },

            '& div.mode-container': {
                paddingTop: 0,
            },
        },

    },
}).attach()

The environment is Webpack, and jss is aliased to ./configuredJss.ts (relative to main.ts), where configuredJss.ts contains:

import jss from '/src/sticker_creator/node_modules/jss/dist/jss'

//import cache          from 'jss-cache'
import global         from 'jss-global'
import extend         from 'jss-extend'
import nested         from 'jss-nested'
import compose        from 'jss-compose'
import camelCase      from 'jss-camel-case'
import defaultUnit    from 'jss-default-unit'
import expand         from 'jss-expand'
import vendorPrefixer from 'jss-vendor-prefixer'
import propsSort      from 'jss-props-sort'
//import isolate        from 'jss-isolate'

jss.setup({
    plugins: [
        //cache(),
        global(),
        extend(),
        nested(),
        compose(),
        camelCase(),
        defaultUnit(),
        expand(),
        vendorPrefixer(),
        propsSort(),
        //isolate(), // powerful, but needs configuration...
    ]
})

export default jss

So anything that imports jss will cause the configuration to happen behind the scenes.

Any idea what this error might be from?

[trusktr]

So, if I change

jss.createStyleSheet({
    '@global': {

        '.grabbing': {
            cursor: 'grabbing',
        },

        'div#app, div#imvu, div.mode-container': {
            width: 100,
            height: 100,
        },

        // hide the mode navbar for now.
        'div#app': {
            '& nav.global-nav.bar': {
                display: 'none',
            },

            '& div.mode-container': {
                paddingTop: 0,
            },
        },

    },
}).attach()

to

jss.createStyleSheet({
    foo: {
      color: 'red',
    },
}).attach()

then it works, no errors.

[kof]

I have tried your code in the repl, it works

[kof]

so it must be your versions or setup

[trusktr]

@kof I don't know why, but I only get the error when I use @global. So if I change it to the following I don't get any errors:

import jss from 'jss'

console.log('jss?', jss)

jss.createStyleSheet({
    //'@global': {

        '.grabbing': {
            cursor: 'grabbing',
        },

        'div#app, div#imvu, div.mode-container': {
            width: 100,
            height: 100,
        },

        // hide the mode navbar for now.
        'div#app': {
            '& nav.global-nav.bar': {
                display: 'none',
            },

            '& div.mode-container': {
                paddingTop: 0,
            },
        },

    //},
}).attach()

[kof]

again, check your versions and your setup, your styles declaration with "@global" works on the repl.

[trusktr]

Did you reproduce it in the repl with the same configuration as I have?

[kof]

I just copied your styles and they work, which means its not a bug in jss.

[kof]

please always try on the playground first before posting an issue http://cssinjs.org/repl The time you take for support is time I can't invest to actually fix bugs and features.

[kof]

for configuration check out preset-default

[trusktr]

What do I write in the repl? Would be nice if it started with an example.

[kof]

return {
    '@global': {

        '.grabbing': {
            cursor: 'grabbing',
        },

        'div#app, div#imvu, div.mode-container': {
            width: 100,
            height: 100,
        },

        // hide the mode navbar for now.
        'div#app': {
            '& nav.global-nav.bar': {
                display: 'none',
            },

            '& div.mode-container': {
                paddingTop: 0,
            },
        },

    },
}

[kof]

btw. it starts with an example actually

[trusktr]

Thanks. It seems to be blank when I get there after clicking on your link.

[trusktr]

Apparently repl doesn't work for me:

[kof]

it fails to access localStorage, why?

[kof]

whats special about your system?

[trusktr]

Apparently it is because of this: https://www.chromium.org/for-testers/bug-reporting-guidelines/uncaught-securityerror-failed-to-read-the-localstorage-property-from-window-access-is-denied-for-this-document

[trusktr]

Ah, I added an exception for cssinjs.github.io, and now it works.

[trusktr]

@kof Ah, I think I see what the problem is: the jss-global imports ContainerRule from jss, and it gets jss from var _jss = require('jss');, which webpack sees using my alias, so Webpack gives the jss-global module my configured Jss instance instead of the CommonJS export from the jss package.

jss-global is the only plugin that imports from jss, other plugins don't clash with my Webpack setting.

I can figure a solution now that I see what's happening.

[kof]

hmm, maybe jss-global should access that object differently to avoid this sort of issues.

[kof]

oh no, so you basically use a jss module namespace which is not the original jss, but your custom module???

[kof]

Thats most probably a bad idea, using a custom name or local paths is what community does in this case.

[trusktr]

oh no, so you basically use a jss module which is not the original jss, but your custom module???

Yep, I wanted to configure JSS for the whole app, and all app files were just doing

import jss from 'jss'

so the alias would make it an easy transition, and files can start using plugin features.

But I changed it so they all now do

import jss from 'app/configuredJss'

[ssimpo]

Thanks @trusktr, this thread has helped me fix one of my builds.

I had exactly the same error from a Rollup build. I was using a global jss module like you. rollup was replacing require('jss') with the global jss. However it was the build from this modules npm package (ie. not my own custom one). Basically, rollup grabs the default export if it exists and uses that (on global modules - I assume this is in the commonjs plugin). So, if you then try to use a named export that is not included in default you get an error. Hence my error:

Uncaught TypeError: _jss.RulesContainer is not a constructor

So, basically, I had to do a work-around to get rollup to use the named exports.

My logic for doing this was I have a few different build files and they all need access to jss. It made sense for them to use one global version of this, rather than bundling it with each.

I am not suggesting this is a sensible setup (I am probably going to refactor it all to avoid the hack and non-standard stuff). However, I had the same error, so, just in case someone else has a similar problem.