Issues with TypeScript

[crsanti]

Hi, I'm working with TypeScript and installed react-draggable.
As it is said in the doc touse the <Draggable /> component I need to import as default:

The default export is <Draggable>. At the .DraggableCore property is <DraggableCore>. Here's how to use it:

// ES6
import Draggable from 'react-draggable'; // The default

But when I try to import it:

// myComponent.tsx
import Draggable from 'react-draggable';

I get the Module "react-draggable" has no default export. error. Doing:

import * as Draggable from 'react-draggable';

brings me the <Draggable /> component but in TypeScript syntaxis * as also brings all definitions and typings so I can't use it as a component (error: JSX element type 'Draggable' does not have any construct or call signatures.)

I only can use it is:

const Draggable: any = require('react-draggable');

but it's weird since this package already gives typings.

I'm using typescript 2.3.2 and awesome-typescript-loader 3.1.3. Anyone has encountered this issue?
PD: Big thanks to give typings. This is an awesome package!

[STRML]

Please be sure you're on the latest version - there is a default export.

[crsanti]

Installing it with npm i -S react-draggable gives me version 2.2.5. Viewing node_modules/react-draggable/index.d.ts file I don't see any export default 😞

[STRML]

My mistake, the newest definition wasn't in a release yet. I just released 2.2.6, please try it again and see if it fixes your issue.

[crsanti]

Thank you very much, typings issue is gone now :) ! I'll try to figure out now why doing now

import Draggable from 'react-draggable';

gives me undefined. I'lll close this issue for now. Thank's for all :)

[etienne-dldc]

Hi, I have the same problem,

I get undefined too when I import Draggable from 'react-draggable';
and when I import * as Draggable from 'react-draggable'; I get JSX element type 'Draggable' does not have any construct or call signatures..

I'm using react-draggable@2.2.6 and typescript@2.2.2

[crsanti]

@etienne-dldc The problem was I was using "module": "commonjs" instead of "module": "es6" in my tsconfig.json. After that, it's solved :)

[schlesingermatthias]

@crsanti What if I need to use commonjs for other libraries I use?

[beshanoe]

@crsanti typescript doc says that the default value for "module" options is target === "ES6" ? "ES6" : "CommonJS". So why should I set it to "module": "es6" in order to make it work?

[crsanti]

Sorry, it was a mistake on my config, I got it working with "module": "es6"

[timothyallan]

I'm getting this undefined error as well now. It's not an option for me to change my entire module import type from commonjs to es6 as I have many other things depending on it. Are there any other options? This library looks great!

Typescript 2.3.4 and react draggable 2.2.6

[jtorhoff]

There's definitely a problem. If I use "module": "es6" in tsconfig, then I have to create my own typings:

declare module "react-draggable" {
    export default class Draggable extends React.Component<any, any> {

    }
}

And then importing as import Draggable from "react-draggable"; works fine.
If I use "module": "commonjs", then importing also works but the app crashes in the browser with:

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

[Spiralis]

Same problem here as well. Can use the any construct as suggested, but - yes then typings are gone. I could not get it working as suggested in the #226 case neither.

using package.json: "react-draggable": "^2.2.6",

Any suggestions?

[STRML]

If you guys can figure out what the correct exports should be I'm happy to cut a major and change it.

…

On Jul 28, 2017 12:11 PM, "Ronny Hanssen" ***@***.***> wrote: Same problem here as well. Can use the any construct as suggested, but - yes then typings are gone. I could not get it working as suggested in the #226 <#226> case neither. using package.json: "react-draggable": "^2.2.6", Any suggestions? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#246 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABJFPxSBxZ4IEMLWx8VN7LenwUAz_RtAks5sShZOgaJpZM4NMr4d> .

[crsanti]

Since webpack exposes the library for UMD as:

module.exports = factory(/* some dependencies */);

Watching another umd libs like moment.js typings:

exports = moment;

So I think (I'm not 100% sure) that the only way that TypeScript can consume react-draggable for "module": "commonjs" is using:

import * as Draggable from 'react-draggable'; // not undefined

For "module": "es6" it can be consumed with import as syntax and the ES6 default import:

import Draggable from 'react-draggable';
import * as Draggable from 'react-draggable'; // both are not undefined

But right now using the above syntax will produce typings issues so.. I'll keep researching about this to get the correct typings.

[Spiralis]

@crsanti

So I think (I'm not 100% sure) that the only way that TypeScript can consume react-draggable for "module": "commonjs" is using:

import * as Draggable from 'draggable'; // not undefined

You mean react-draggable, right? For the record, that does not work for me (even with react-draggable). On usage of <Draggable... I get
[ts] JSX element type 'Draggable' does not have any construct or call signatures.
in the editor and
ERROR in [at-loader] (...) TS2604: JSX element type 'Draggable' does not have any construct or call signatures.
in the application.

Anyway.
@STRML: There have been discussions in the typescript community that one should avoid the default export option. The reason being first of all that you get no intellisense to help you name the variable. If you instead use a named export then when placing the marker inside the import statement's curly-braces you will get intellisense (for the editors that support intellisense).

It seems to me (at a glance) that the named exports from react-draggable are actually working, oddly enough.

BTW: I am using typescript@2.3.2 and awesome-typescript-loader@3.1.3, with "module": "commonjs" in tsconfig.json.

[sla89]

Same issue here with "awesome-typescript-loader": "3.2.2", "typescript": "2.4.2" and "module": "commonjs" using "react-draggable": "^3.0.3":

import * as Draggable from 'react-draggable';
...
render() {
  <Draggable>
    ...
  </Draggable>
}

results in TS2604: JSX element type 'Draggable' does not have any construct or call signatures.

I dont know why this issue is closed.