SortableJS/Sortable

[bug] Cannot import additional plugins when used with Svelte

Xyaria opened this issue · 2 comments

Describe the bug

I've successfully used this library without additional plugins.
But as soon as I import or mount the Swap plugin, I get errors:


Mounting with

import Sortable, { Swap } from 'sortablejs';
Sortable.mount(new Swap());

gives the following error:

[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 {Swap} = pkg;  

Needless to say, the proposed solution does not work.


Mounting with

import Sortable from 'sortablejs';
Sortable.mount(new Sortable.Swap());

gives the following error in VSCode:

TypeError: __vite_ssr_import_1__.default.Swap is not a constructor

And I get a 500 - Internal Error from the console.


Importing with

import Sortable from "sortablejs/modular/sortable.core.esm";

gives the following error in console:

Unexpected token 'export'

/path/to/app/node_modules/sortablejs/modular/sortable.core.esm.js:3349
export default Sortable;
^^^^^^

and the following error in VSCode:

Could not find a declaration file for module 'sortablejs/modular/sortable.core.esm'. '/path/to/app/node_modules/sortablejs/modular/sortable.core.esm.js' implicitly has an 'any' type.
If the 'sortablejs' package actually exposes this module, consider sending a pull request to amend 'https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/sortablejs'

Trying to enable swap: true on my Sortable without the import doesn't trigger the swap behaviour.
The weirdest thing is, when building the app from scratch, I do get the correct behaviour without any error with the first mentioned method, but this breaks as soon as I add another component. Removing entirely the component does not remove the errors.

To Reproduce
Steps to reproduce the behavior:

  1. Create a basic svelte skeleton app with npm create svelte@latest
  2. Import Sortable with npm install storablejs
  3. Add basic Sortable code in +page.svelte
  4. Use any method mentioned above to add Swap
  5. Add a component
  6. Run the developpement environment with npm run dev
  7. Error appear in console and/or on screen

You can also grab the code sandbox given below.

Expected behavior
Swap correctly imported and my list behaving correctly

Information
Versions:
sortablejs = ^1.15.2
@types/sortablejs = ^1.15.2

Additional context
As mentioned, I encounter this issue in a Svelte app using Sveltekit and Vite.
@sveltejs/kit = ^2.0.0
@sveltejs/vite-plugin-svelte: ^3.0.0
vite = ^5.0.3

I am also using TypeScript.
typescript = ^5.0.0

Reproduction
codesandbox: Code Sandbox

*Note
I just realise importing the complete bundle via CDN in the app.html works, so I can perfectly use the entire library now. Hope this can help someone.