flow-typed: Styled-components default export is unknown type

Why default export of the styled-components package is unknown.

Example code:

// @flow

import * as React from 'react';
import styled from 'styled-components';

const A = styled.a`
  color: red;
`;

const B: React.ComponentType<{ children: React.Node }> = ({ children }) => (
  <a>{children}</a>
);

const C = styled(B)`
  color: blue;
`;

styled is typed as unknown, maybe this is because of weird $call property in module.exports. This refers to https://github.com/facebook/flow/issues/2966.

https://github.com/flowtype/flow-typed/blob/master/definitions/npm/styled-components_v3.x.x/flow_v0.57.x-/styled-components_v3.x.x.js#L347

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Comments: 15 (7 by maintainers)

Most upvoted comments

I think I hit the same issue when updating Flow to 0.75.0. I now get:

Cannot call styled because a callable signature is missing in object type [1].

    flow-typed/npm/styled-components_v3.x.x.js
 [1] 494│   declare export default {
     495│     $call: $npm$styledComponents$Call<ComponentListKeys>,
     496│     styled: $npm$styledComponents$Call<ComponentListKeys>,
     497│     css: TaggedTemplateLiteral<Array<Interpolation>>,
     498│     ...$npm$styledComponents$StyledComponentsComponentList,
     499│     ...$npm$styledComponents$StyledComponentsNativeComponentList,
     500│   }

@shrynx can you please share the hotfix so I can test it?

@shrynx tried to killall flow, restarting flow server, nothing changed.

{
  "flow-bin": "^0.73.0",
  "styled-components": "^3.3.0"
}

@dashed It’s not a type error, it’s a coverage warning. My editor is using flow to get file flow coverage.

flow coverage src/index.js
Covered: 85.71% (12 of 14 expressions)

flow type-at-pos src/index.js 4 10
(unknown)
/Users/zalishchuk/Desktop/projects/styled-components/src/index.js:4:8,4:13
import styled from 'styled-components';
/* ------^ 4 10 position */