Vite: TypeError: external_commonjs_sortablejs_commonjs2_sortablejs_amd_sortablejs_root_Sortable_default.a is not a constructor

[iancallahan]

This may be related to #738 on Vue.Draggable.

Using the latest version of Vite (2.3), I get

runtime-core.esm-bundler.js:38 [Vue warn]: Unhandled error during execution of mounted hook 
  at <Draggable modelValue= Array(4) onUpdate:modelValue=fn item-key="id"  ... > 
  at <Discipline Organizer msg="Hello Vue 3 + Vite" > 
  at <App>
warn @ runtime-core.esm-bundler.js:38
vuedraggable.js:136 Uncaught TypeError: external_commonjs_sortablejs_commonjs2_sortablejs_amd_sortablejs_root_Sortable_default.a is not a constructor
    at Proxy.mounted (vuedraggable.js:136)
    at callWithErrorHandling (runtime-core.esm-bundler.js:154)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:163)
    at Array.hook.__weh.hook.__weh (runtime-core.esm-bundler.js:1953)
    at flushPostFlushCbs (runtime-core.esm-bundler.js:355)
    at render2 (runtime-core.esm-bundler.js:4885)
    at mount (runtime-core.esm-bundler.js:3077)
    at Object.app.mount (runtime-dom.esm-bundler.js:1259)
    at main.js:4

I have a project from a couple of months ago built using Vite where draggable components work fine. I was unable to successfully downgrade this project and get it to work, even with wiping and reinstall node_modules.

Reproduction Link

I've created a sample repo that reproduces the problem.

It is a barebones Vite project. If you clone it and npm install, npm run dev will reproduce the error in browser.

Actual Solution

Everything works when I use Vue CLI with Webpack instead of Vite.

[jeff-fe]

I had the same problem. I can only solve it temporarily import draggable from '../../../node_modules/vuedraggable/src/vuedraggable'

[NWYLZW]

I had the same problem. I can only solve it temporarily import draggable from '../../../node_modules/vuedraggable/src/vuedraggable'

This solves my problem, but it's not good

[rijkvanzanten]

I believe this is caused by the fact that the main export of vuedraggable is a UMD build:

https://github.com/SortableJS/vue.draggable.next/blob/f66e77aadf8c656d91e542f9888232bc9194a81c/package.json#L6

Which is incompatible with esbuild: https://github.com/evanw/esbuild/issues/507, which in turn is used by Vite: https://github.com/vitejs/vite/blob/main/packages/vite/src/node/plugins/esbuild.ts

Seeing that the team behind Vue is the same as Vite's, I'd say it'll be fairly common to build your Vue apps using Vite, meaning that you're effectively locked out of using Vuedraggable through it's default exported packages.

Could we get an ESM build of vuedraggable? With Node 10 being deprecated and ESM becoming the norm, I'd even argue we should make it the default export in package.json's main.

(While we're on the subject, I noticed that the dist bundles still include a bunch of Internet Explorer glue code. With Vue 3 itself dropping support for Internet Explorer altogether I think makes most sense to drop support for it in this wrapper package as well.

For now, adding --modern to the build step: should do the trick. Edit: that's only available when targeting app. Apparently webpack within vue-cli isn't able to bundle to esm yet

@David-Desmaisons would you take a PR to move this repo from vue-cli to vite? Vite can bundle libraries too, and does to to esm and umd, so it shouldn't cause any breaking changes

[rijkvanzanten]

@jeff-fe / @NWYLZW you don't have to specify the path to node_modules:

import draggable from 'vuedraggable/src/vuedraggable'

should work too 👍🏻

[jeff-fe]

@jeff-fe / @NWYLZW you don't have to specify the path to node_modules:

import draggable from 'vuedraggable/src/vuedraggable'

should work too 👍🏻

Thank you very much 👍

[wei-beautimode]

but how about typescript project, it can not detect package type.

[larescze]

but how about typescript project, it can not detect package type.

Declare the module in the shims-vue.d.ts.

declare module 'vuedraggable/src/vuedraggable'

[mseele]

please see my bug for this issue in the vite repo: https://github.com/vitejs/vite/issues/3356

[yangzheng93]

@jeff-fe / @NWYLZW you don't have to specify the path to node_modules:

import draggable from 'vuedraggable/src/vuedraggable'

should work too 👍🏻

Thank you very much 👍

[taoweiquan520]

@jeff-fe / @NWYLZW you don't have to specify the path to node_modules:

import draggable from 'vuedraggable/src/vuedraggable'

should work too 👍🏻

Thanks, i use vite and never know why it's not work.now it's done

[mseele]

This problem is solved with vite 2.3.7 (https://github.com/vitejs/vite/issues/3356)