joshwcomeau / react-flip-move

Effortless animation between DOM changes (eg. list reordering) using the FLIP technique.
http://joshwcomeau.github.io/react-flip-move/examples
MIT License
4.09k stars 258 forks source link

Typescript definition seams to have a wrong export #218

Open thupi opened 6 years ago

thupi commented 6 years ago

Hi,

Typescript errors got me importing the component like import * as FlipMove from 'react-flip-move'; :-)

However, when compiled this seams to cause react to crash because the render methods can't handle object's but expects a function or class instead. This issue is gone when i import the component like import FlipMove from 'react-flip-move' but that won't pass the typeschecking :-)

I was able to fix this by using export defualt FlipMove instead of export = FlipMove in the definition :-)

joshwcomeau commented 6 years ago

Ah, sorry about that!

Sounds like a quick fix, but I've never used Typescript, so I'd be unable to verify that the fix works... I suppose that if there are unintended consequences or something, they can always be patched separately; as it's just a type definition and not runtime code I'm not super concerned about it.

If you or anyone can create a quick PR I'll be sure to get it landed/shipped; I'm currently juggling too many things and don't wanna commit to doing this myself, only to forget about it.

joshwcomeau commented 6 years ago

actually... lemme just do it now, since it really is a 2-second thing

thupi commented 6 years ago

@joshwcomeau Hi,

No problem at all. I was able to solve the issue in a matter of minutes :)

I would not consider myself as a Typescript expert but at least i can try to take a look at the fix :-)

joshwcomeau commented 6 years ago

Believe this was fixed in 3.0.1 :)

spcfran commented 6 years ago

Hi guys,

Not sure this is completely fixed yet - It compiles and ultimately works in the browser, but typescript shows an error:

image

Any other flavour of import other than import * as FlipMove from gives a different typescript error and it doesn't even work on the browser.

I'm using react 16.2.0, react-flip-move 3.0.1 and typescript 2.7

joshwcomeau commented 6 years ago

Ah, sorry to hear that! Reopening the issue.

Afraid I've never used Typescript, so I'm not the best person to try and troubleshoot :/ As a possible workaround, is it possible to ignore the typescript typings for specific third-party modules, so that it doesn't show up as an error in your project? With Flow, for example, it just assumes unrecognized imports are any, which means you lose the benefit of type safety for those modules, but it doesn't affect your project otherwise.

pinyin commented 6 years ago

Same error here. export = FlipMove works for me. Would adding both export default FlipMove and export = FlipMove to the d.ts be considered as an acceptable solution?

Tsourdox commented 6 years ago

Having the same issues with 3.0.0 and 3.0.1 (sticking to 2.x for now)

arichter83 commented 6 years ago

I have the same issue with 3.0.1 - with import * as FlipMove from ... it is working on the webserver but the IDE is showing the missing constructor error.

arichter83 commented 6 years ago

Still the same, but while starting the server. "JSX element type 'FlipMove' does not have any construct or call signatures."

jakub-zawislak commented 4 years ago

I had the same issue as @spcfran and @arichter83 (JSX element type...) but I have installed this package in the parent directory by mistake. It works after proper installation. I haven't done any other fixes mentioned here. I'm using react-flip-move 3.0.4 and typescript 3.6.3