Not possible to create a web component from more than one .svelte file

[thojanssens]

I have a DatePicker component, composed of different .svelte files.

I added <svelte:options tag="date-picker"/> only in the main DatePicker.svelte component, but when running npm run build, I got the error message:

(!) Plugin svelte: No custom element 'tag' option was specified. To automatically register a custom element, specify a name with a hyphen in it, e.g. <svelte:options tag="my-thing"/>. To hide this warning, use
<svelte:options tag={null}/>

Then I tried adding that option in every .svelte component; the message disappeared, but when viewing the component in the browser, I had the error message:

Failed to execute 'define' on 'CustomElementRegistry': the name "date-picker" has already been used with this registry

This is the rollup file:

import svelte from 'rollup-plugin-svelte';
import resolve from '@rollup/plugin-node-resolve';
import pkg from './package.json';

const name = pkg.name
	.replace(/^(@\S+\/)?(svelte-)?(\S+)/, '$3')
	.replace(/^\w/, m => m.toUpperCase())
	.replace(/-\w/g, m => m[1].toUpperCase());

export default {
	input: 'src/index.js',
	output: [
		{ file: pkg.module, 'format': 'es' },
		{ file: pkg.main, 'format': 'umd', name }
	],
	plugins: [
		svelte({
			customElement: true
		}),
		resolve()
	]
};

[tanhauhau]

Could you provide a repro, including DatePicker.svelte and other svelte files?

[thojanssens]

We have set up a temporary repo:
https://github.com/mathieuprog/tmp

Clone and then:
npm install
npm run build

Then open the index.html file.

So currently we either have two errors. If we add the option only on the main component:

(!) Plugin svelte: No custom element 'tag' option was specified. To automatically register a custom element, specify a name with a hyphen in it, e.g. <svelte:options tag="my-thing"/>. To hide this warning, use
<svelte:options tag={null}/>

If we set on all components:

Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "my-component" has already been used with this registry

Then we also tried to add an option in every components with different values, but anyway we run into other issues.

[Conduitry]

Sounds like probably a duplicate of #3520 / #3594 / maybe others.

[jawish]

@thojanssens I solved this using Rollup config and file extensions. Here's a demo: https://jawish.github.io/svelte-customelement-rollup/