Skip to content

Vite + Vue Build Issue - Rolldown build breaks with Vuedraggable imported, works with Rollup #289

Open
@ParaBolt

Description

@ParaBolt

Describe the bug

Default import of vuedraggable is incompatible with Vite + Rolldown. This used to work with Vite + Rollup previously.

Everything works fine on the dev server. However once app is built, the bundling process doesn't work as expected. After running the build we get a JS error probably due to improper imports.

Uncaught TypeError: F is not a function gets thrown and the application breaks.

Suggestion :-

  • If the import is incompatible, the bundler should throw a warning or fail the build with an error if possible.

Notes :-

  • import Draggable from 'vuedraggable' breaks Rolldown build
  • Works properly on a local dev server and with Rollup build.
  • Might be a compat issue, switching the import to import Draggable from 'vuedraggable/src/vuedraggable' works as it ignores the dist files provided by draggable and asks Rolldown to bundle everything itself.
  • Draggable provides CommonJS and UMD Dist files.

Reproduction

https://github.com/ParaBolt/Rolldown-Draggable-Test

Steps to reproduce

  • Create a new Vue app using npm create vue@latest
  • Choose Rolldown build option
  • Import VueDraggable in any component. Note you need the next branch for Vue 3.
  • Create a build and preview it locally npx vite build, npx vite preview

System Info

System:
    OS: Windows 11 10.0.26100
    CPU: (12) x64 AMD Ryzen 5 7530U with Radeon Graphics
    Memory: 3.95 GB / 14.83 GB
  Binaries:
    Node: 22.11.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.22 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 11.3.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (131.0.2903.99)
    Internet Explorer: 11.0.26100.1882
  npmPackages:
    @vitejs/plugin-vue: ^6.0.0 => 6.0.0
    rolldown-vite:  7.0.1

Used Package Manager

npm

Logs

No response

Validations

Metadata

Metadata

Assignees

No one assigned

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions