Not compatible with rollup-plugin-svelte version 7

[ile]

Describe the bug

When using rollup-plugin-svelte version 7, the FilePond element isn't instantiated correctly. I get this when loading the app in a browser:

index.mjs:1849 Uncaught TypeError: Illegal constructor
    at new SvelteElement (index.mjs:1849)
    at new App (App.svelte:33)
    at main.js:3
    at main.js:5

To Reproduce

The only changes:

• in package.json: "rollup-plugin-svelte": "^7.0.0"
• in rollup.config.js:

svelte({
    // enable run-time checks when not in production
    // we'll extract any component CSS out into
    // a separate file - better for performance
    compilerOptions: {
        // enable run-time checks when not in production
        dev: !production,
        css: true,
        customElement: true
    },
    // for importing filepond css from nodemodules
    preprocess: sveltePreprocess({ postcss: true }),
}),

It seems to me that Component.svelte isn't even loaded (in filepond-svelte).

Repository: https://github.com/ilkkah/filepond-example

[rikschennink]

Just tested with v7 and works correctly.

It might have to do with setting customElement to true

Will close because can't reproduce.

[ile]

True, the customElement breaks it.

Could something be done to that? I still need the customElement, it's useful (will contain only its own CSS for example). If svelte-filepond would work with customElement, that would be good too.

[rikschennink]

That won't work, the FilePond core is not written as a custom element. So CSS selectors will probably not find the right elements. There's also challenges with shadow DOM and event handling that is currently not compatible.