pikku-h pikku-h - 1 year ago 165
React JSX Question

Using Flowtype with react-css-modules decorated components

Below is a simple component for showing error messages:

// @flow
import styles from 'styles/components/Error';
import React from 'react';
import CSSModules from 'react-css-modules';

type Props = {
message: string

const Error = ({ message }: Props) => {
return (
<div styleName="error">

export default CSSModules(Error, styles);

Note that it requires
property. Now if I use this component somewhere:

<Error />;

Flowtype should warn me that
is missing required property
but it does not. If I do not wrap my
component with react-css-modules, Flowtype does work as expected.

I'm thinking that I need to declare a type for Flowtype for it to understand wrapped components but my Google-fu did not yield any results.

What I did found:

Answer Source

This has been recently discussed on GitHub. Here's the relevant issue: https://github.com/facebook/flow/issues/2536

In short, the problem is that Flow does not have any type information for the CSSModules function, so the return type is inferred as any.

In other words:

export default Error; // the type of this export is (_: P) => ?React$element<any>
export default CSSModules(Error, styles); // the type of this export is any

Long story short, you can provide your own type definition. I'll paste here the one suggested by @gcanti in the original issue:

declare module 'react-css-modules' {

  declare type CssOptions = {
    allowMultiple?: boolean,
    errorWhenNotFound?: boolean,

  declare type FunctionComponent<P> = (props: P) => ?React$Element<any>;
  declare type ClassComponent<D, P, S> = Class<React$Component<D, P, S>>;

  declare function exports<D, P, S, C: ClassComponent<D, P, S> | FunctionComponent<P>>(reactClass: C, styles: Object, cssOptions?: CssOptions): C;

Save the above in decls/react-css-modules.js or something similar and then configure your .flowconfig like:


This will preserve the type information when wrapping a component into CSSModules and allow flow to catch the intended errors.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download