Draggable is undefined with normal import syntax in TypeScript

[cainlevy]

(first reported in #246)

Error

ES6 import syntax fails when TypeScript is configured with "module": "commonjs":

import Draggable from 'react-draggable'

The error message is visible at runtime, when React says:

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

This error can be confirmed with console.log(Draggable), which prints undefined.

Workaround

Use the commonjs import syntax:

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

Version

react-draggable@2.2.6

[jerryeechan]

Remove the 'default' at the end of line 59 and 60 in react-draggable.js

from

module.exports = __webpack_require__(1).default;
module.exports.DraggableCore = __webpack_require__(17).default;

to

module.exports = __webpack_require__(1);
module.exports.DraggableCore = __webpack_require__(17);

then import works

[timothyallan]

That works, unless you're using Typescript or until you update your npm_modules 😬

[STRML]

Fixed in afd7721

[timothyallan]

afd7721 fixes the import in the main file, but not the typings. In order to use it like:
import * as Draggable from 'react-draggable';
with TypeScript, you can rename/delete the index.d.ts file in the typings folder, which is a bit counter productive, but works. I'm not completely sure on the changes needed to the .ts file, so if there are any TS gurus who want to chime in, I'm all ears.