Default export is not working with typescript

[testerez]

Summary:

Using typescript, if I import with import ReactModal from 'react-modal'; then ReactModal is undefined. It usually means that the module has no default export.
import * as ReactModal from 'react-modal'; works but does not satisfy the definitions from @types/react-modal@2.2.1

Steps to reproduce:

test.ts

import ReactModal from 'react-modal';
console.log(ReactModal);

ts-node test.ts

Expected behavior:

Should log a component but logs undefined

[diasbruno]

@testerez we have recently release a patch to fix the imports. Can you check if this happens on latest version?

[testerez]

Tested with version 2.3.2 which seems to be the latests.

[diasbruno]

Is it still failing?

[diasbruno]

.babelrc#L4 This was recently added. It shouldn't cause any conflict, but you can try to remove it and see if it helps...

[MikeMolIS]

I have the same problem. I tried:

.babelrc#L4 This was recently added. It shouldn't cause any conflict, but you can try to remove it and see if it helps...

It dit not help.
I am using typescript with the versions:
"react": "15.4.2",
"types/react": "15.0.38",
"react-modal": "2.3.2",
"types/react-modal": "2.2.1",

my code looks like this:
import ReactModal from 'react-modal';

<ReactModal isOpen={true} contentLabel='Hello world'> <p>Hello World</p> </ReactModal>

The error I get is:

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of CardInputContainer.

When I use: import * as ReactModal from 'react-modal';
I get the compile error:

Error TS2604: JSX element type 'ReactModal' does not have any construct or call signatures.

I hope you can help me with this.

EDIT: It works when I use the same versions:
"react-modal": "2.2.1",
"types/react-modal": "2.2.1",

[diasbruno]

@MikeMolIS Perhaps, the types/react-modal needs to keep sync with new releases (?). I understand how the type provider works, but I'm not familiar with this repo. Can you post the links to this repo?

[testerez]

Here it is: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react-modal/index.d.ts
But the definitions does not change anything to the output. They just help giving warnings if the typing is incorrect. Be aware that babel does some magic with the imports:
import foo from 'foo' means that you import the default export of 'foo'. If foo has no default export foo should be undefined. But Babel add some glue so if foo has no default export you will get *. Typescript is more strict and does not do that. It could explain why import ReactModal from 'react-modal'; works with babel but not with typescript.

[Psvensso]

The confusing babel output.

exports.default = _Modal2.default;
module.exports = exports['default'];

Not using defaults just makes the world a happier place,
without a default people can still just rename the var if needed using:
import {ReactModal as RModal} from "react-modal" so the default syntax doesn't add anything.
(Well you can skip two { } i guess).

So the most comfy fix would be to skip the default.
Then it would work for everyone.

Background:
exporting 'exports.default' rather than 'exports' #706

[bogas04]

Any update on the same ?

Due to usage of babel-plugin-add-module-exports, code spit out is incompatible with webpack 2.2. One way to fix this is defined in this gist.

[diasbruno]

@bogas04 Sounds great. This is still open, they have changed on their side (DefinitelyTyped), but if we can provide the correct way, it would be nicer. Can you PR this?