cannot export functions from custom elements in dev

[WickyNilliams]

Describe the bug

in dev, if you export a function from a svelte component that is a custom element, you receive an error in the console:

Uncaught TypeError: can't redefine non-configurable property "[function name]"

In the compiled code, the customElements.define call looks like this:

customElements.define("my-test", create_custom_element(Test, {}, [], ["[function name]", "[function name]"], true));

This does not seem to happen when building in non-dev mode.

Reproduction

Here is a basic example:

<svelte:options customElement="my-counter" />
<script>
  let count = 0;
  export function increment() {
    count += 1;
  }
</script>

<button on:click={increment}>
  count is {count}
</button>

And here is a REPL: https://svelte.dev/repl/c66893a2ff384eac854af6ec4bf10810?version=4.0.5

Please turn on customElements and dev in compiler options.

Logs

Uncaught TypeError: can't redefine non-configurable property "increment"

System Info

❯ npx envinfo --system --npmPackages svelte,rollup,webpack --binaries --browsers

  System:
    OS: macOS 13.4.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 935.45 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.15.0 - ~/Library/Caches/fnm_multishells/35024_1689330689567/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.5.0 - ~/Library/Caches/fnm_multishells/35024_1689330689567/bin/npm
  Browsers:
    Chrome: 114.0.5735.198
    Firefox: 114.0.2
    Safari: 16.5.1
  npmPackages:
    svelte: ^4.0.3 => 4.0.5

Severity

annoyance

[dummdidumm]

I can't reproduce this in the REPL. Are you using hot module reloading by any chance? That's known to cause issues with custom elements.

[WickyNilliams]

I don't think it's related to HMR, this happens on a fresh page load.

I think it's difficult to accurately reproduce in the repl, because App.svelte is rendered for you, so you can't actually use the component as a custom element via its tagname. But if you look at the generated code, you will see

customElements.define("my-counter", create_custom_element(App, {}, [], ["increment","increment"], true));

that then fails here, becuse "increment" is being defined twice:

svelte/packages/svelte/src/runtime/internal/Component.js

Lines 417 to 423 in f41ff96

	accessors.forEach((accessor) => {
	Object.defineProperty(Class.prototype, accessor, {
	get() {
	return this.$$c?.[accessor];
	}
	});
	});

[WickyNilliams]

Compare the code output in dev mode:

class App extends SvelteComponentDev {
	constructor(options) {
		super(options);
		init(this, options, instance, create_fragment, safe_not_equal, { increment: 0 });

		dispatch_dev("SvelteRegisterComponent", {
			component: this,
			tagName: "App",
			options,
			id: create_fragment.name
		});
	}

	get increment() {
		return this.$$.ctx[0];
	}

	set increment(value) {
		throw new Error("<my-counter>: Cannot set read-only property 'increment'");
	}
}

customElements.define("my-counter", create_custom_element(App, {}, [], ["increment","increment"], true));

to non-dev mode:

class App extends SvelteComponent {
	constructor(options) {
		super();
		init(this, options, instance, create_fragment, safe_not_equal, { increment: 0 });
	}

	get increment() {
		return this.$$.ctx[0];
	}
}

customElements.define("my-counter", create_custom_element(App, {}, [], ["increment"], true));

[dummdidumm]

Ah I see, thanks for the clarification!