[Bug] Doesn't work with Vite 8

[Libertie]

Is there an existing issue for this?

• I have searched the existing issues

Have you updated Vue FilePond, FilePond, and all plugins?

• I have updated FilePond and its plugins

Describe the bug

I've been using vue-filepond in a Laravel project, but after upgrading to Laravel 13, calling vueFilePond() throws "Uncaught (in promise) TypeError: vueFilePond is not a function". Through testing, I've found that the problem is Laravel's move to Vite 8, which uses Rolldown instead of Rollup. Reverting to Vite 7 resolves the issue.

console.log(vueFilePond) shows the following with Vite 7 / Rollup:

function vue_filepond_esm_default(plugins)
​length: 0
​name: "vue_filepond_esm_default"
​<prototype>: function ()

vs the following with Vite 8 / Rolldown:

Object { setOptions: setOptions(options), default: _default(), … }
​__esModule: true
​default: function _default()
​setOptions: function setOptions(options)
​<prototype>: Object { … }

Reproduction

I believe that this bug can be viewed in any project by upgraded to Vite 8.

For a new project, create a project with npm create vue@latest. Require vue-filepond with npm install vue-filepond filepond. Upgrade to Vite 8 with npm install vite@8.

Replace the App.vue file contents with the example code from this repo:

<template>
  <div id="app">
    <file-pond
      name="test"
      ref="pond"
      label-idle="Drop files here..."
      v-bind:allow-multiple="true"
      accepted-file-types="image/jpeg, image/png"
      server="/api"
      v-bind:files="myFiles"
      v-on:init="handleFilePondInit"
    />
  </div>
</template>

<script>
// Import Vue FilePond
import vueFilePond from "vue-filepond";

// Import FilePond styles
import "filepond/dist/filepond.min.css";

// Create component
const FilePond = vueFilePond();

export default {
  name: "app",
  data: function () {
    return { myFiles: ["cat.jpeg"] };
  },
  methods: {
    handleFilePondInit: function () {
      console.log("FilePond has initialized");
    },
  },
  components: {
    FilePond,
  },
};
</script>

Run the project with npm run dev and view the results in a browser. Developer console shows "Uncaught TypeError: vueFilePond is not a function".

Environment

- Browser: Firefox 148
- Vue version: 3.5
- Node version: 22

[Libertie]

I found this explanation of the breaking changes: https://rolldown.rs/in-depth/bundling-cjs#ambiguous-default-import-from-cjs-modules. The developers include the following "Recommendations for Library Authors":

"If you are writing a new code, we strongly recommend you to publish your code as ESM syntax. With the require(ESM) feature shipped in Node.js, there's no major blocker to do so. If you still need to publish your code as CJS syntax, we strongly recommend to avoid using the default export."

As a workaround, I am using the following code:

...

// Import Vue FilePond
import vueFilePond from "vue-filepond";

// Import FilePond styles
import "filepond/dist/filepond.min.css";

// Create component
const VFP =
  typeof vueFilePond === "object" && vueFilePond !== null && vueFilePond.__esModule
    ? vueFilePond.default
    : vueFilePond;

const FilePond = VFP();

[rikschennink]

Thanks @Libertie appreciate the detailed ticket and workaround.

[rikschennink]

Finally got around to this. I've just updated the package to v8 and it should work now.