[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:
- Create a basic svelte skeleton app with
npm create svelte@latest
- Import Sortable with
npm install storablejs
- Add basic Sortable code in
+page.svelte
- Use any method mentioned above to add Swap
- Add a component
- Run the developpement environment with
npm run dev
- 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.