How to use sortable with typescript?

[ghost]

I'm unable to import sortable into my typescript project.

I installed sortablejs as following:

npm install --save-dev sortablejs
npm install --save-dev @types/sortablejs

Then I tried to import it:

import Sortable from "sortablejs";

but it shows an error message:

... has no default export

then I tried:

import * as Sortable from "sortablejs"

and it shows another error:

module sortablejs resolves to a non-module entity and cannot be imported using this construct.

I also cannot use require, because in our company we are not allowed to use it, because it will hinder stuff like tree shaking etc.:

import Sortable = require('sortablejs')

So, how do I supposed to use this library with typescript?

[PasinduDineth]

Have the same problem..waiting for a response...

[jgoldhammer]

Same here! How can I use it with Typescript?

[octlabs]

https://github.com/SortableJS/angular-sortablejs is Typescript. Maybe helps?

[martingold]

I've sent PR to be able to use import, but as suggested in the PR, the compiler option fixes it.

[DerekTBrown]

This should work:

import Sortable = require('sortablejs');

[jakenuts]

Sadly this might be a bit late..

import Sortable from "sortablejs"; 

var sortable = new Sortable(container, options);

[BasieP]

problem is still there...

anyone can help out?

it's 2020 and sortable still overwrites the default export instead of exporting like a module should..

Problems right now are:

import Sortable from "sortablejs"

results in: TS1259: Module '".../@types/sortablejs/index"' can only be default-imported using the 'esModuleInterop' flag

import * as Sortable from "sortablejs"

Sortable.create(element);

results in: Sortable.create is not a function

import * as Sortable from "sortablejs"

new Sortable(element);

results in: Sortable is not a constructor

import * as Sortable from "sortablejs"

new Sortable.Sortable(element);

results in: TS2339: Property 'Sortable' does not exist on type 'typeof Sortable'. (although my chrome debugger tells me it does exist)

import { Sortable } from "sortablejs";

results in: TS2617: 'Sortable' can only be imported by using 'import Sortable = require("../../node_modules/@types/sortablejs")' or by turning on the 'esModuleInterop' flag and using a default import. but i don't want to use requirejs... 👎

but sure, lets give it a try:

import Sortable = require("sortablejs");
Sortable.create(element);

Sortable.create is not a function

oke.. so much for typescript support. It simply doesn't work.

[CodenameCookie]

Any updates to this issue please? Can we use sortable with Typescript?

[waynevanson]

Did you turn on the esModuleainterop flag in tsconfig.json?

[alexosm]

I had the same problem.

The solution for me was to add "allowSyntheticDefaultImports": true in compilerOptions in tsconfig.json. Than just import sortable in ts-file: import Sortable from 'sortablejs';

[ZhukV]

as an example:

(function (sortable) {
    new sortable.Sortable(element, {});
})(require('sortablejs'));

[UndercoverNL]

Old issue but seems to still be a problem since I run in to it my self too.

npm i --save-dev @types/sortablejs should fix this.

[bassem-mf]

1. Install Sortable.js and its type definitions from DefinitelyTyped npm i sortablejs --save npm i @types/sortablejs --save-dev

2. Add the esModuleInterop flag to the "tsconfig.json" file

{
    "compilerOptions": {
        "esModuleInterop": true
    }
}

4. Import Sortable in your TypeScript file import Sortable from "sortablejs";

5. Use Sortable new Sortable(document.getElementById('test'), {});