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
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With