Modules are written as CommonJS modules in flow lib: material-ui_v1.x.x

[DuskLoop]

For example the module def for Card are written as

declare module 'material-ui/Card' {
  declare module.exports: {
    CardActions: $Exports<'material-ui/Card/CardActions'>,
    CardContent: $Exports<'material-ui/Card/CardContent'>,
    CardHeader: $Exports<'material-ui/Card/CardHeader'>,
    CardMedia: $Exports<'material-ui/Card/CardMedia'>,
    default: $Exports<'material-ui/Card/Card'>,
  };
}

Which creates problems if i try to import the Card component like this:

import Card, {
  CardHeader,
  CardContent,
  CardActions,
} from 'material-ui/Card';

When using the Card Component i get error:

Cannot create `Card` element because object type [1] is not a React component.
References:
[1]
: flow-typed\npm\material-ui_v1.x.x.js:223

Shouldn't modules in the libdef be defined as ES modules like this:

declare module 'material-ui/Card' {
  declare export default $Exports<'material-ui/Card/Card'>
  declare export var CardActions: $Exports<'material-ui/Card/CardActions'>;
  declare export var CardContent: $Exports<'material-ui/Card/CardContent'>;
  declare export var CardHeader: $Exports<'material-ui/Card/CardHeader'>;
  declare export var CardMedia: $Exports<'material-ui/Card/CardMedia'>;
}

Or am I doing something wrong?

[AndrewSouthpaw]

It shouldn't make a difference, from what I've seen... have you tried changing the libdef locally to see if it fixes the problem?

[Benjamin-Dobell]

I ran into this also.

It's an old issue, but I think the problem is specifically attempting to use CommonJS syntax to define a default export in addition to other exports:

facebook/flow#1806

I tested this theory by doing three things:

1. Attempt to use the current Card definition.

   Failure - As described by @DuskLoop.

2. Modify Card's definition to utilise module syntax (as suggested), then try again:

   Success

3. To test the hypothesis that default is specifically to blame, I went ahead and attempted to use a component defined with CommonJS syntax that does not have a default export, namely CardMedia.

   Success

So it would seem we don't necessarily need ES6 syntax across the board, just when a default export is used in addition to named exports.

[AndrewSouthpaw]

@Benjamin-Dobell would you be willing to write that up with a couple concise examples for our README? I'm sure other people would find this very helpful.

[bugzpodder]

I fixed this in my PR #2009
I think I missed one import or two but it should be mostly workable.