import { Sortable } from 'sortablejs'

[lwei-jlu]

Problem:

hi,when i use sortablejs and @types/stotablejs in my app, i cannot use import { Sortable } from 'sortablejs' its cause to error, and cannot use import * as Sortable from 'sortablejs', its cause to tip: sortable is not a construcor i think maybe is for default export, and i cannot want to use allowSyntheticDefaultImports : true, so how can i export sortablejs?

JSBin/JSFiddle demonstrating the problem:

---

Before you create an issue, check it:

1. Try master-branch, perhaps the problem has been solved;
2. Use the search, maybe we already have an answer;
3. If not found, create an example on jsbin.com (draft) and describe the problem.

Bindings:

• Angular
  • 2.0+: https://github.com/SortableJS/angular-sortablejs/issues
  • legacy: https://github.com/SortableJS/angular-legacy-sortablejs/issues
• React
  • ES2015+: https://github.com/SortableJS/react-sortablejs/issues
  • mixin: https://github.com/SortableJS/react-mixin-sortablejs/issues
• Polymer: https://github.com/SortableJS/polymer-sortablejs/issues
• Knockout: https://github.com/SortableJS/knockout-sortablejs/issues
• Meteor: https://github.com/SortableJS/meteor-sortablejs/issues

[owen-m1]

I think those typings are out of date

[lwei-jlu]

I think those typings are out of date

emm and i fond a new package react-sortablejs and its error too and i feel @types/stotablejs is doesnt work

[waynevanson]

@lwei-jlu

The types do work and I keep them as up to date as possible.

For your specific case of imports, the named export is currently not there and the default is. You should the default in the meantime. I will address this in my next pull to @types/sortablejs.

Update sortablejs and @types/sortablejs to the latest and you'll get type definitions.

[waynevanson]

@lwei-jlu I've tried to get the current types working with this, but it seems I cannot get it to work as the namespace and the class share the same name. They're export from the index.d.ts via assignment for module compatibility reasons (export = Sortable instead of export default Sortable).

What reason is there for not allowing allowSyntheticDefaultImports to be set to true?

[Akuukis]

I have the same problem.

FYI Typescript advises to use esModuleInterop:

Note: The new behavior is added under a flag to avoid unwarranted breaks to existing code bases. We highly recommend applying it both to new and existing projects.

Although I can bring esModuleInterop to my project without problems and will do so, I believe that not everyone could. Also wasted quite a lot of time digging around what do with it.

Proposed solution

Mention in README along the lines of "Typescript users, your codebase must be compatible --esModuleInterop as you will must use it to use this library", and reference to Typescript docs that it is the right way forward.

[waynevanson]

@Akuukis This makes sense. Feel free to add a PR.