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?