Uncaught (in promise) TypeError: Illegal constructor at new SvelteElement (index.mjs:1381)

Question

Uncaught promise when registering a custom element using the latest sapper, svelte, nodeJS, and rollup stack using the following statements.

REPL example: https://svelte.dev/repl/489ee8acd10848b0bb1feb2535bd6cc5?version=3.16.5 created locally

<svelte:options tag="parlax-background" />
    & rollup.config.js
    export default {
    client: {
    input: config.client.input(),
    output: config.client.output(),
    plugins: [
    replace({...})
    svelte({
    dev: !production,
    customElement: true,
    // and tried also with customElement: { tag: "my-element"}
    hydratable: true,
    emitCss: true

I want to mention that I had tested on a fresh project

Logs

[Client Side]
    => Uncaught (in promise) TypeError: Illegal constructor
    at new SvelteElement (index.mjs:1381)
    [Server Side]
    => The 'tag' option is used when generating a custom element. Did you forget the 'customElement: true' compile option?
    44: <svelte:options tag="my-element" />

1. When I registering [ **customElement: true ] in the config i get**

2. If I do not register my element in the config I do not get any error, but neither my element is registered :(

Ref: https://github.com/sveltejs/svelte/issues/4132

Essie

Answer 1

As described in the referenced GitHub issue, once you configure the Svelte compiler with customElements: true, you're expected to provide an element tag for all your components (using <svelte:options tag="my-component"/>.

In your REPL's example, this would mean updating App.svelte with e.g. <svelte:options tag="my-app"/>

When you now run the app, you should not see the error in the console anymore, but a working app.

Incognito

What about third party libraries? – Futuristic

Fixed it, I am building a web components library and did not have the options tag in my App, only in the individual components. Thanks. – Smallage