Svelte 4 compatibility

[ktecho]

After upgrading to Svelte 4, Typescript 5, Vite 5, I'm getting this error:

SyntaxError: [vite] Named export 'Swap' not found. The requested module 'sortablejs' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'sortablejs';
const {MultiDrag, Swap} = pkg;

    at analyzeImportedModDifference (file:///home/ktecho/PhpstormProjects/xxx/web/frontoffice/node_modules/vite/dist/node/chunks/dep-R0I0XnyH.js:50598:19)
    at nodeImport (file:///home/ktecho/PhpstormProjects/xxx/web/frontoffice/node_modules/vite/dist/node/chunks/dep-R0I0XnyH.js:50549:9)
    at async ssrImport (file:///home/ktecho/PhpstormProjects/xxx/web/frontoffice/node_modules/vite/dist/node/chunks/dep-R0I0XnyH.js:50444:24)
    at async eval (/home/ktecho/PhpstormProjects/xxx/web/frontoffice/node_modules/@jhubbardsf/svelte-sortablejs/SortableList.svelte:5:31)
    at async instantiateModule (file:///home/ktecho/PhpstormProjects/xxx/web/frontoffice/node_modules/vite/dist/node/chunks/dep-R0I0XnyH.js:50506:9)

So I guess some small changes are needed in the way that sortablejs is used?

[ktecho]

If I change this in file SortableList.svelte:

import Sortable, { MultiDrag, Swap } from 'sortablejs';

to this:

import Sortable from 'sortablejs';
const {MultiDrag, Swap} = Sortable;

It works perfectly.

[SikandarJODD]

i get this error in browser :

[ktecho]

@jhubbardsf Can you confirm if the project is unmaintained?

[SikandarJODD]

yes i think so

[harshit-git]

@ktecho found any fix?

[ktecho]

@ktecho found any fix?

When I build the app, it works as it is. But in my development environment, I have to make the change from comment 2.

Either @jhubbardsf releases a new version with this change, or you have to do it by hand. Someone could also fork the project, do the change and release a new version.