Jss: Flow Errors

Created on 1 Feb 2017  ·  30Comments  ·  Source: cssinjs/jss

Getting this with flow:

image

in types.js.flow

enhancement important
Source
picture natew

Most helpful comment

Same problem.

Flow doesn't include node_modules/jss/flow-typed automatically.

If i include this into .flowconfig, all works fine:

[libs]
node_modules/jss/flow-typed

@kof

Your local declaration of CSSStyleRule is workaround. May be make pr into https://github.com/facebook/flow/blob/master/lib/cssom.js ? Or write some installation notes in readme for it?

picture zerkalica on 2 Feb 2017
👍4 👎1

All 30 comments

More full errors:

packages/gloss/node_modules/jss/lib/RulesContainer.js.flow:96
 96:     if (rule.className && rule.name) this.classes[rule.name] = rule.className
                  ^^^^^^^^^ property `className`. Property not found in
 96:     if (rule.className && rule.name) this.classes[rule.name] = rule.className
             ^^^^ Rule

packages/gloss/node_modules/jss/lib/backends/DomRenderer.js.flow:10
 10: function getStyle(rule: HTMLElement|CSSStyleRule, prop: string): string {
                                         ^^^^^^^^^^^^ identifier `CSSStyleRule`. Could not resolve name

packages/gloss/node_modules/jss/lib/plugins/RegularRule.js.flow:26
 26:   renderable: ?CSSStyleRule
                    ^^^^^^^^^^^^ identifier `CSSStyleRule`. Could not resolve name

packages/gloss/node_modules/jss/lib/types.js.flow:37
 37:   renderable: ?CSSStyleRule;
                    ^^^^^^^^^^^^ identifier `CSSStyleRule`. Could not resolve name

image

natew picture natew on 1 Feb 2017

CSSStyleRule is declared here. Why can't flow find it? It should be actually part of flow cssom

kof picture kof on 1 Feb 2017

Not following, so is this local error or are you saying flow needs to update to fix?

natew picture natew on 1 Feb 2017

Both, right now it should work because I have a type for CSSStyleRule.

kof picture kof on 1 Feb 2017

Same problem.

Flow doesn't include node_modules/jss/flow-typed automatically.

If i include this into .flowconfig, all works fine:

[libs]
node_modules/jss/flow-typed

@kof

Your local declaration of CSSStyleRule is workaround. May be make pr into https://github.com/facebook/flow/blob/master/lib/cssom.js ? Or write some installation notes in readme for it?

zerkalica picture zerkalica on 2 Feb 2017
👍4 👎1

I was planing to make it into cssom … but if you got time I am happy if someone else does it!

kof picture kof on 2 Feb 2017

https://github.com/facebook/flow/issues/2943

kof picture kof on 2 Feb 2017

flow is an awesome project to contribute to!

kof picture kof on 2 Feb 2017

so @natew are u interested to bring those defs to flow?

kof picture kof on 11 Feb 2017

cc @lttb

kof picture kof on 18 Jun 2017

I had a similar error, which has now disappeared. Maybe a new version of Flow fixed it?

verekia picture verekia on 30 Jun 2017
👍1

thats possible

kof picture kof on 30 Jun 2017

@natew I am closing this one, please reopen if the issue is still there.

kof picture kof on 13 Jul 2017

Hello! I'm running into these errors still.

Versions:

[email protected]
[email protected]

Console output:

Error: node_modules/jss/lib/renderers/DomRenderer.js.flow:15
 15: function getStyle(rule: HTMLElement|CSSStyleRule, prop: string): string {
                                         ^^^^^^^^^^^^ identifier `CSSStyleRule`. Could not resolve name

Error: node_modules/jss/lib/renderers/DomRenderer.js.flow:51
 51: function getSelector(rule: CSSOMRule): string {
                                ^^^^^^^^^ identifier `CSSOMRule`. Could not resolve name

Error: node_modules/jss/lib/renderers/DomRenderer.js.flow:128
128:       return node
                  ^^^^ Node. This type is incompatible with
123: function findCommentNode(text: string): Comment|null {
                                             ^^^^^^^^^^^^ union: Comment | null
  Member 1:
  123: function findCommentNode(text: string): Comment|null {
                                               ^^^^^^^ Comment
  Error:
  128:       return node
                    ^^^^ Node. This type is incompatible with
  123: function findCommentNode(text: string): Comment|null {
                                               ^^^^^^^ Comment
  Member 2:
  123: function findCommentNode(text: string): Comment|null {
                                                       ^^^^ null
  Error:
  128:       return node
                    ^^^^ Node. This type is incompatible with
  123: function findCommentNode(text: string): Comment|null {
                                                       ^^^^ null

Error: node_modules/jss/lib/rules/ConditionalRule.js.flow:19
 19:   renderable: ?CSSStyleRule
                    ^^^^^^^^^^^^ identifier `CSSStyleRule`. Could not resolve name

Error: node_modules/jss/lib/rules/FontFaceRule.js.flow:16
 16:   renderable: ?CSSStyleRule
                    ^^^^^^^^^^^^ identifier `CSSStyleRule`. Could not resolve name

Error: node_modules/jss/lib/rules/KeyframesRule.js.flow:19
 19:   renderable: ?CSSStyleRule
                    ^^^^^^^^^^^^ identifier `CSSStyleRule`. Could not resolve name

Error: node_modules/jss/lib/rules/SimpleRule.js.flow:15
 15:   renderable: ?CSSStyleRule
                    ^^^^^^^^^^^^ identifier `CSSStyleRule`. Could not resolve name

Error: node_modules/jss/lib/rules/StyleRule.js.flow:19
 19:   renderable: ?CSSStyleRule
                    ^^^^^^^^^^^^ identifier `CSSStyleRule`. Could not resolve name

Error: node_modules/jss/lib/rules/ViewportRule.js.flow:16
 16:   renderable: ?CSSStyleRule
                    ^^^^^^^^^^^^ identifier `CSSStyleRule`. Could not resolve name

Error: node_modules/jss/lib/types.js.flow:26
 26:   setStyle(rule: HTMLElement|CSSStyleRule, prop: string, value: string): boolean;
                                  ^^^^^^^^^^^^ identifier `CSSStyleRule`. Could not resolve name

Adding these lines to my .flowconfig fixes the issue, but it seems like they could be fixed at the root rather:

[ignore]
<PROJECT_ROOT>/node_modules/jss/lib/renderers/DomRenderer.js.flow
<PROJECT_ROOT>/node_modules/jss/lib/rules/ConditionalRule.js.flow
<PROJECT_ROOT>/node_modules/jss/lib/rules/FontFaceRule.js.flow
<PROJECT_ROOT>/node_modules/jss/lib/rules/KeyframesRule.js.flow
<PROJECT_ROOT>/node_modules/jss/lib/rules/StyleRule.js.flow
<PROJECT_ROOT>/node_modules/jss/lib/rules/ViewportRule.js.flow
<PROJECT_ROOT>/node_modules/jss/lib/rules/SimpleRule.js.flow
<PROJECT_ROOT>/node_modules/jss/lib/types.js.flow
zachwolf picture zachwolf on 7 Sep 2017

Just to chime in I am also getting errors. Using latest create-react-app with styled-components. I am assuming it is styled-components that has jss as a dependency but I am not sure (I am not using it directly).

flow-bin v 0.54.1

Error: node_modules/jss/lib/rules/ConditionalRule.js.flow:19
 19:   renderable: ?CSSStyleRule
                    ^^^^^^^^^^^^ identifier `CSSStyleRule`. Could not resolve name

Error: node_modules/jss/lib/rules/FontFaceRule.js.flow:16
 16:   renderable: ?CSSStyleRule
                    ^^^^^^^^^^^^ identifier `CSSStyleRule`. Could not resolve name

Error: node_modules/jss/lib/rules/KeyframesRule.js.flow:19
 19:   renderable: ?CSSStyleRule
                    ^^^^^^^^^^^^ identifier `CSSStyleRule`. Could not resolve name

Error: node_modules/jss/lib/rules/SimpleRule.js.flow:15
 15:   renderable: ?CSSStyleRule
                    ^^^^^^^^^^^^ identifier `CSSStyleRule`. Could not resolve name

Error: node_modules/jss/lib/rules/StyleRule.js.flow:19
 19:   renderable: ?CSSStyleRule
                    ^^^^^^^^^^^^ identifier `CSSStyleRule`. Could not resolve name

Error: node_modules/jss/lib/rules/StyleRule.js.flow:38
       v-------------------------------------
 38:   set selector(selector: string): void {
 39:     const {sheet} = this.options
 40: 
...:
 69:   }
       ^ Potentially unsafe get/set usage. Getters and setters with side effects are potentially unsafe and disabled by default. You may opt-in to using them anyway by putting `unsafe.enable_getters_and_setters=true` into the [options] section of your .flowconfig.

Error: node_modules/jss/lib/rules/StyleRule.js.flow:74
       v-----------------------
 74:   get selector(): string {
 75:     if (this.renderable) {
 76:       return this.renderer.getSelector(this.renderable)
...:
 80:   }
       ^ Potentially unsafe get/set usage. Getters and setters with side effects are potentially unsafe and disabled by default. You may opt-in to using them anyway by putting `unsafe.enable_getters_and_setters=true` into the [options] section of your .flowconfig.

Error: node_modules/jss/lib/rules/ViewportRule.js.flow:16
 16:   renderable: ?CSSStyleRule
                    ^^^^^^^^^^^^ identifier `CSSStyleRule`. Could not resolve name

Error: node_modules/jss/lib/types.js.flow:26
 26:   setStyle(rule: HTMLElement|CSSStyleRule, prop: string, value: string): boolean;
                                  ^^^^^^^^^^^^ identifier `CSSStyleRule`. Could not resolve name
garytokyo picture garytokyo on 12 Sep 2017
👍1

I get a slightly different set of errors from @zachwolf and @garytokyo 

Error: node_modules/jss/lib/renderers/DomRenderer.js.flow:128
128:       return node
                  ^^^^ Node. This type is incompatible with the expected return type of
123: function findCommentNode(text: string): Comment|null {
                                             ^^^^^^^^^^^^ union: Comment | null
  Member 1:
  123: function findCommentNode(text: string): Comment|null {
                                               ^^^^^^^ Comment
  Error:
  128:       return node
                    ^^^^ Node. This type is incompatible with
  123: function findCommentNode(text: string): Comment|null {
                                               ^^^^^^^ Comment
  Member 2:
  123: function findCommentNode(text: string): Comment|null {
                                                       ^^^^ null
  Error:
  128:       return node
                    ^^^^ Node. This type is incompatible with
  123: function findCommentNode(text: string): Comment|null {
                                                       ^^^^ null

Error: node_modules/jss/lib/utils/findRenderer.js.flow:15
 15:   return useVirtual ? VirtualRenderer : DomRenderer
                                             ^^^^^^^^^^^ DomRenderer. This type is incompatible with the expected return type of
 12: export default function findRenderer(options: JssOptions = {}): Class<Renderer> {
                                                                           ^^^^^^^^ Renderer
  Property `constructor` is incompatible:
           v--------------------------------
    205:   constructor(sheet?: StyleSheet) {
    206:     // There is no sheet when the renderer is used from a standalone StyleRule.
    207:     if (sheet) sheets.add(sheet)
    ...:
    216:   }
           ^ function. This type is incompatible with. See: node_modules/jss/lib/renderers/DomRenderer.js.flow:205
     25:   constructor(sheet?: StyleSheet): Renderer;
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ function type. See: node_modules/jss/lib/types.js.flow:25
      This parameter is incompatible:
        205:   constructor(sheet?: StyleSheet) {
                                              ^ undefined. This type is incompatible with. See: node_modules/jss/lib/renderers/DomRenderer.js.flow:205
         25:   constructor(sheet?: StyleSheet): Renderer;
                                                ^^^^^^^^ Renderer. See: node_modules/jss/lib/types.js.flow:25
          Property `attach` is incompatible:
             25:   constructor(sheet?: StyleSheet): Renderer;
                                                    ^^^^^^^^ property `attach` of Renderer. Property not found in possibly undefined value. See: node_modules/jss/lib/types.js.flow:25
            205:   constructor(sheet?: StyleSheet) {
                                                  ^ undefined. See: node_modules/jss/lib/renderers/DomRenderer.js.flow:205

jss: 8.1.0
flow: 0.57.3

Newly created app via the create-react-app starter kit. I worked around the CSSStyleRule errors by adding the following to my .flowconfig

[libs]
node_modules/jss/flow-typed
davefinster picture davefinster on 22 Oct 2017

yes, it has been fixed in jss 9

kof picture kof on 22 Oct 2017

@kof - Just upgraded to jss 9 and I'm still getting the same errors - namely a bunch of

#these are mitigated by adding node_modules/jss/flow-typed into [libs] in .flowconfig
Error: node_modules/material-ui/node_modules/jss/lib/renderers/DomRenderer.js.flow:15
 15: function getStyle(rule: HTMLElement|CSSStyleRule, prop: string): string {
                                         ^^^^^^^^^^^^ identifier `CSSStyleRule`. Could not resolve name

Error: node_modules/material-ui/node_modules/jss/lib/renderers/DomRenderer.js.flow:128
128:       return node
                  ^^^^ Node. This type is incompatible with the expected return type of
123: function findCommentNode(text: string): Comment|null {
                                             ^^^^^^^^^^^^ union: Comment | null
  Member 1:
  123: function findCommentNode(text: string): Comment|null {
                                               ^^^^^^^ Comment
  Error:
  128:       return node
                    ^^^^ Node. This type is incompatible with
  123: function findCommentNode(text: string): Comment|null {
                                               ^^^^^^^ Comment
  Member 2:
  123: function findCommentNode(text: string): Comment|null {
                                                       ^^^^ null
  Error:
  128:       return node
                    ^^^^ Node. This type is incompatible with
  123: function findCommentNode(text: string): Comment|null {
                                                       ^^^^ null

Error: node_modules/material-ui/node_modules/jss/lib/utils/findRenderer.js.flow:15
 15:   return useVirtual ? VirtualRenderer : DomRenderer
                           ^^^^^^^^^^^^^^^ VirtualRenderer. This type is incompatible with the expected return type of
 12: export default function findRenderer(options: JssOptions = {}): Class<Renderer> {
                                                                           ^^^^^^^^ Renderer
  Property `constructor` is incompatible:
      7: export default class VirtualRenderer {
                              ^^^^^^^^^^^^^^^ default constructor. This type is incompatible with. See: node_modules/material-ui/node_modules/jss/lib/renderers/VirtualRenderer.js.flow:7
     25:   constructor(sheet?: StyleSheet): Renderer;
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ function type. See: node_modules/material-ui/node_modules/jss/lib/types.js.flow:25
      This parameter is incompatible:
          7: export default class VirtualRenderer {
                                  ^^^^^^^^^^^^^^^ undefined. This type is incompatible with. See: node_modules/material-ui/node_modules/jss/lib/renderers/VirtualRenderer.js.flow:7
         25:   constructor(sheet?: StyleSheet): Renderer;
                                                ^^^^^^^^ Renderer. See: node_modules/material-ui/node_modules/jss/lib/types.js.flow:25
          Property `attach` is incompatible:
             25:   constructor(sheet?: StyleSheet): Renderer;
                                                    ^^^^^^^^ property `attach` of Renderer. Property not found in possibly undefined value. See: node_modules/material-ui/node_modules/jss/lib/types.js.flow:25
              7: export default class VirtualRenderer {
                                      ^^^^^^^^^^^^^^^ undefined. See: node_modules/material-ui/node_modules/jss/lib/renderers/VirtualRenderer.js.flow:7
davefinster picture davefinster on 22 Oct 2017

I just checked, can't reproduce, please verify if you are REALLY using JSS 9 in that case by looking into directory.

kof picture kof on 22 Oct 2017

material-ui is not using JSS 9 yet.

kof picture kof on 22 Oct 2017
👍3

Apologies - turns out I was looking at the package.json/node_modules for one project while running flow status against another. No issues encountered. Thanks!

davefinster picture davefinster on 22 Oct 2017

Same error with last version of JSS and Flow:

Error: node_modules/jss/lib/renderers/DomRenderer.js.flow:28
 28: function getStyle(cssRule: HTMLElement | CSSStyleRule, prop: string): string {
                                              ^^^^^^^^^^^^ CSSStyleRule. Could not resolve name

Error: node_modules/jss/lib/renderers/DomRenderer.js.flow:78
 78:   return (cssRule: CSSOMRule): string => {
                        ^^^^^^^^^ CSSOMRule. Could not resolve name

Error: node_modules/jss/lib/rules/ConditionalRule.js.flow:25
 25:   renderable: ?CSSStyleRule
                    ^^^^^^^^^^^^ CSSStyleRule. Could not resolve name

Error: node_modules/jss/lib/rules/FontFaceRule.js.flow:16
 16:   renderable: ?CSSStyleRule
                    ^^^^^^^^^^^^ CSSStyleRule. Could not resolve name

Error: node_modules/jss/lib/rules/KeyframesRule.js.flow:19
 19:   renderable: ?CSSStyleRule
                    ^^^^^^^^^^^^ CSSStyleRule. Could not resolve name

Error: node_modules/jss/lib/rules/SimpleRule.js.flow:15
 15:   renderable: ?CSSStyleRule
                    ^^^^^^^^^^^^ CSSStyleRule. Could not resolve name

Error: node_modules/jss/lib/rules/StyleRule.js.flow:27
 27:   renderable: ?CSSStyleRule
                    ^^^^^^^^^^^^ CSSStyleRule. Could not resolve name

Error: node_modules/jss/lib/rules/ViewportRule.js.flow:16
 16:   renderable: ?CSSStyleRule
                    ^^^^^^^^^^^^ CSSStyleRule. Could not resolve name

Error: node_modules/jss/lib/types.js.flow:37
 37:     cssRule: HTMLElement | CSSStyleRule,
                                ^^^^^^^^^^^^ CSSStyleRule. Could not resolve name
ohardy picture ohardy on 29 Jan 2018

it can't find CSSStyleRule in https://github.com/cssinjs/jss/blob/master/flow-typed

kof picture kof on 29 Jan 2018

If I include jss/flow-typed in .flowconfig, I got:

node_modules/jss/flow-typed/cssom.js:9
  9:   static STYLE_RULE: 1;
       ^^^^^^ Unexpected static modifier
ohardy picture ohardy on 29 Jan 2018

@ohardy could you provide the flow version please?

lttb picture lttb on 29 Jan 2018

Flow, a static type checker for JavaScript, version 0.64.0

ohardy picture ohardy on 29 Jan 2018

@ohardy I have the same issue, it is because the newest version of flow does not support the static modifier anymore apparently. If im not mistaken, this is since [email protected]

wouter-willems picture wouter-willems on 14 Mar 2018

Same issue for me, new repo, using material ui, importing JSS to create the options for JssProvider

import { create } from 'jss';
import { MuiThemeProvider, createMuiTheme, jssPreset, createGenerateClassName } from 'material-ui/styles';

const jss = create(jssPreset());

Added node_modules/jss/flow-typed to my flow config and then I get the same error as @ohardy 

Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ node_modules/jss/flow-typed/cssom.js:9:3

Unexpected static modifier

      6│   +CSSStyleSheet: ?CSSStyleSheet;
      7│   cssText: DOMString;
      8│
      9│   static STYLE_RULE: 1;
     10│   static CHARSET_RULE: 2; // deprecated
     11│   static IMPORT_RULE: 3;
     12│   static MEDIA_RULE: 4;

versions:
package.json "jss": "^9.8.0", "material-ui": "next", "flow-bin": "^0.66.0",

alexFaunt picture alexFaunt on 19 Mar 2018

Upgraded JSS to flow v0.68.0, JSS v.9.8.1 is published.

kof picture kof on 19 Mar 2018

👍 confirmed working for me cheers

alexFaunt picture alexFaunt on 19 Mar 2018
Was this page helpful?
0 / 5 - 0 ratings

Related issues

trusktr picture trusktr  ·  6Comments
mg901 picture mg901  ·  3Comments
kof picture kof  ·  4Comments
oliviertassinari picture oliviertassinari  ·  4Comments
brianmhunt picture brianmhunt  ·  5Comments