styled-components: Flow errors being returned in 1.4.3

Version

1.4.3

Description

Previously hedron has been using styled-components 1.1.3, but after updating to 1.4.3, flow has started giving me an error when running flow inside my repos directory.

node_modules/styled-components/dangerfile.js:3
  3: import { danger, warn, fail, message } from 'danger'
                                                 ^^^^^^^^ danger. Required module not found

node_modules/styled-components/lib/models/StyleSheet.js.flow:18
 18:   get injected(): boolean {
       ^ 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.


Found 2 errors

I’m not extremely well versed in flow, so I’m not 100% sure it’s not a problem in my configuration of flow. But since it has previously been working fine, I’m thinking it must be related to styled-components. The second error looks like I can resolve it with the suggested .flowconfig change, but I’m not sure about the first one.

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 9
Comments: 19 (10 by maintainers)

Links to this issue

jestjs - What's the right way to write Jest tests verified with Flow? - Stack Overflow

Most upvoted comments

@0x80 You should remove everything styled-components related from your [libs] section… so it should look like this:

[libs]
flow-typed

ryyppy on Apr 10, 2017

Don’t know if this is related, but I’m getting a whole slew of Flow errors, and I used flow-typed install to grab the libdefs.

node_modules/styled-components/flow-typed/npm/express_v4.x.x.js:5
  5: import type { Server } from 'http';
                   ^^^^^^ Named import from module `http`. This module has no named export called `Server`.

node_modules/styled-components/lib/models/InlineStyle.js.flow:3
  3: import { StyleSheet } from 'react-native'
                                ^^^^^^^^^^^^^^ react-native. Required module not found

node_modules/styled-components/lib/native/index.js.flow:4
  4: import reactNative from 'react-native'
                             ^^^^^^^^^^^^^^ react-native. Required module not found

node_modules/styled-components/lib/utils/autoprefix.js.flow:2
  2: import camelizeStyleName from 'fbjs/lib/camelizeStyleName'
                                   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ fbjs/lib/camelizeStyleName. Required module not found

node_modules/styled-components/lib/utils/autoprefix.js.flow:3
  3: import hyphenateStyleName from 'fbjs/lib/hyphenateStyleName'
                                    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ fbjs/lib/hyphenateStyleName. Required module not found

node_modules/styled-components/lib/utils/flatten.js.flow:2
  2: import hyphenate from 'fbjs/lib/hyphenateStyleName'
                           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ fbjs/lib/hyphenateStyleName. Required module not found

node_modules/styled-components/src/constructors/test/injectGlobal.test.js:3
  3: import expect from 'expect'
                        ^^^^^^^^ expect. Required module not found

node_modules/styled-components/src/constructors/test/injectGlobal.test.js:15
 15: describe('injectGlobal', () => {
     ^^^^^^^^ identifier `describe`. Could not resolve name

node_modules/styled-components/src/constructors/test/injectGlobal.test.js:16
 16:   beforeEach(() => {
       ^^^^^^^^^^ identifier `beforeEach`. Could not resolve name

node_modules/styled-components/src/constructors/test/injectGlobal.test.js:20
 20:   it(`should inject rules into the head`, () => {
       ^^ identifier `it`. Could not resolve name

node_modules/styled-components/src/constructors/test/keyframes.test.js:2
  2: import expect from 'expect'
                        ^^^^^^^^ expect. Required module not found

node_modules/styled-components/src/constructors/test/keyframes.test.js:14
 14: describe('keyframes', () => {
     ^^^^^^^^ identifier `describe`. Could not resolve name

node_modules/styled-components/src/constructors/test/keyframes.test.js:15
 15:   beforeEach(() => {
       ^^^^^^^^^^ identifier `beforeEach`. Could not resolve name

node_modules/styled-components/src/constructors/test/keyframes.test.js:20
 20:   it('should return its name', () => {
       ^^ identifier `it`. Could not resolve name

node_modules/styled-components/src/constructors/test/styled.test.js:2
  2: import expect from 'expect'
                        ^^^^^^^^ expect. Required module not found

node_modules/styled-components/src/constructors/test/styled.test.js:6
  6: describe('styled', () => {
     ^^^^^^^^ identifier `describe`. Could not resolve name

node_modules/styled-components/src/constructors/test/styled.test.js:7
  7:   it('should have all valid HTML5 elements defined as properties', () => {
       ^^ identifier `it`. Could not resolve name

node_modules/styled-components/src/models/InlineStyle.js:3
  3: import { StyleSheet } from 'react-native'
                                ^^^^^^^^^^^^^^ react-native. Required module not found

node_modules/styled-components/src/models/test/ThemeProvider.test.js:5
  5: import expect from 'expect'
                        ^^^^^^^^ expect. Required module not found

node_modules/styled-components/src/models/test/ThemeProvider.test.js:9
  9: describe('ThemeProvider', () => {
     ^^^^^^^^ identifier `describe`. Could not resolve name

node_modules/styled-components/src/models/test/ThemeProvider.test.js:10
 10:   it('should not throw an error when no children are passed', () => {
       ^^ identifier `it`. Could not resolve name

node_modules/styled-components/src/native/index.js:4
  4: import reactNative from 'react-native'
                             ^^^^^^^^^^^^^^ react-native. Required module not found

node_modules/styled-components/src/test/basic.test.js:3
  3: import expect from 'expect'
                        ^^^^^^^^ expect. Required module not found

node_modules/styled-components/src/test/basic.test.js:5
  5: import jsdom from 'mocha-jsdom'
                       ^^^^^^^^^^^^^ mocha-jsdom. Required module not found

node_modules/styled-components/src/test/basic.test.js:12
 12: describe('basic', () => {
     ^^^^^^^^ identifier `describe`. Could not resolve name

node_modules/styled-components/src/test/basic.test.js:16
 16:   beforeEach(() => {
       ^^^^^^^^^^ identifier `beforeEach`. Could not resolve name

node_modules/styled-components/src/test/basic.test.js:20
 20:   it('should not throw an error when called', () => {
       ^^ identifier `it`. Could not resolve name

node_modules/styled-components/src/test/css.test.js:9
  9: describe('css features', () => {
     ^^^^^^^^ identifier `describe`. Could not resolve name

node_modules/styled-components/src/test/css.test.js:10
 10:   beforeEach(() => {
       ^^^^^^^^^^ identifier `beforeEach`. Could not resolve name

node_modules/styled-components/src/test/css.test.js:14
 14:   it('should add vendor prefixes in the right order', () => {
       ^^ identifier `it`. Could not resolve name

node_modules/styled-components/src/test/extending.test.js:4
  4: import expect from 'expect'
                        ^^^^^^^^ expect. Required module not found

node_modules/styled-components/src/test/extending.test.js:11
 11: describe('extending', () => {
     ^^^^^^^^ identifier `describe`. Could not resolve name

node_modules/styled-components/src/test/extending.test.js:15
 15:   beforeEach(() => {
       ^^^^^^^^^^ identifier `beforeEach`. Could not resolve name

node_modules/styled-components/src/test/extending.test.js:19
 19:   it('should generate a single class with no styles', () => {
       ^^ identifier `it`. Could not resolve name

node_modules/styled-components/src/test/props.test.js:9
  9: describe('props', () => {
     ^^^^^^^^ identifier `describe`. Could not resolve name

node_modules/styled-components/src/test/props.test.js:10
 10:   beforeEach(() => {
       ^^^^^^^^^^ identifier `beforeEach`. Could not resolve name

node_modules/styled-components/src/test/props.test.js:14
 14:   it('should execute interpolations and fall back', () => {
       ^^ identifier `it`. Could not resolve name

node_modules/styled-components/src/test/styles.test.js:9
  9: describe('with styles', () => {
     ^^^^^^^^ identifier `describe`. Could not resolve name

node_modules/styled-components/src/test/styles.test.js:13
 13:   beforeEach(() => {
       ^^^^^^^^^^ identifier `beforeEach`. Could not resolve name

node_modules/styled-components/src/test/styles.test.js:17
 17:   it('should append a style', () => {
       ^^ identifier `it`. Could not resolve name

node_modules/styled-components/src/test/theme.test.js:2
  2: import expect from 'expect'
                        ^^^^^^^^ expect. Required module not found

node_modules/styled-components/src/test/theme.test.js:3
  3: import jsdom from 'mocha-jsdom'
                       ^^^^^^^^^^^^^ mocha-jsdom. Required module not found

node_modules/styled-components/src/test/theme.test.js:13
 13: describe('theming', () => {
     ^^^^^^^^ identifier `describe`. Could not resolve name

node_modules/styled-components/src/test/theme.test.js:14
 14:   beforeEach(() => {
       ^^^^^^^^^^ identifier `beforeEach`. Could not resolve name

node_modules/styled-components/src/test/theme.test.js:18
 18:   it('should inject props.theme into a styled component', () => {
       ^^ identifier `it`. Could not resolve name

node_modules/styled-components/src/test/theme.test.js:214
214:   beforeEach(() => {
       ^^^^^^^^^^ identifier `beforeEach`. Could not resolve name

node_modules/styled-components/src/test/theme.test.js:218
218:   it('should properly render with the same theme from default props on re-render', () => {
       ^^ identifier `it`. Could not resolve name

node_modules/styled-components/src/test/utils.js:6
  6: import expect from 'expect'
                        ^^^^^^^^ expect. Required module not found

node_modules/styled-components/src/utils/autoprefix.js:2
  2: import camelizeStyleName from 'fbjs/lib/camelizeStyleName'
                                   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ fbjs/lib/camelizeStyleName. Required module not found

node_modules/styled-components/src/utils/autoprefix.js:3
  3: import hyphenateStyleName from 'fbjs/lib/hyphenateStyleName'
                                    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ fbjs/lib/hyphenateStyleName. Required module not found


... 18 more errors (only 50 out of 68 errors displayed)
To see all errors, re-run Flow with --show-all-errors
error Command failed with exit code 2.

ffxsam on May 16, 2017

Ah, okay… well, I still couldn’t find any API on the docs, so it’s hard to tell what public API it should expose (@mxstbr ?) …

For now, you can fix this by adding this to your styled-components libdef:

declare module 'styled-components/lib/models/StyleSheet' {
 declare module.exports: Object;
}

Not the cleanest solution, but hey: a good foundation for a contribution? 😄

ryyppy on Apr 10, 2017

@0x80 @hph See updated docs in #656 as it has not been merged yet.

relekang on Apr 10, 2017

The second error is strange, because it is in the config 😕

https://github.com/styled-components/styled-components/blob/master/.flowconfig#L18

Edit: Oh, if you rely on the flow types, you don’t inherit the config.

xcoderzach on Feb 9, 2017