I try to compile a Svelte component into a web component.
- added the option
<svelte:options tag="date-picker" immutable={true}/>
- added
customElement: true
in rollup toplugins: [ svelte()
- run
npm run build
But I keep having the 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. . To hide this warning, use
What am I doing wrong?
My index.js
file:
export { default as default } from './DatePicker.svelte';
DatePicker.svelte
file:
<svelte:options tag="date-picker" immutable={true}/>
<script>
/* code */
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()
]
};
It seems that if your project consists of a single component, the message doesn't appear. See issue here: