[Bug] Named export 'setOptions' not found. // Nuxt 3

[simonmaass]

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 am using nuxt 3 with the following import:

import VueFilePond, { setOptions } from 'vue-filepond'

When accessing the page client side everything works but when reloading the page with ssr i get the following error:

import { setOptions } from 'vue-filepond';
         ^^^^^^^^^^
SyntaxError: Named export 'setOptions' not found. The requested module 'vue-filepond' 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 'vue-filepond';
const { setOptions } = pkg;

Reproduction

When running "yarn dev" the error does not occur.. but when running yarn build and yarn start in SSR i get the error

Environment

- Device: Lenovo Thinkpad
- OS: Windows 10
- Browser: Version 118.0.5993.72 (Offizieller Build) (64-Bit)
- Vue version: 3.3.4
- Nuxt version: 3.7

[simonmaass]

I was able to get this working in nuxt SSR mode via this https://github.com/cyco130/vite-plugin-cjs-interop

[soylomass]

I was able to get this working in nuxt SSR mode via this https://github.com/cyco130/vite-plugin-cjs-interop

Thanks, this worked.

After installing it, you have to add this block to nuxt.config.ts:

vite: {
  plugins: [
    cjsInterop({
      // List of CJS dependencies that require interop
      dependencies: ["vue-filepond"],
    }),
  ],
},

[simonmaass]

you are also able to get it to work without the plugin with this setting:

build: {
    transpile: ['vue-filepond']
  },