5

I try to compile a Svelte component into a web component.

  1. added the option <svelte:options tag="date-picker" immutable={true}/>
  2. added customElement: true in rollup to plugins: [ svelte()
  3. 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:

https://github.com/sil-vio/svelte-web-components/issues/2

0

3 Answers 3

1

Importantly, the correct place to add the compilerOptions is in svelte.config.js and not in vite.config.js. I have a book that has it wrong and I could not get rid of the error until I realised it was the wrong file named in the book. Here is my svelte config, and upon saving this file the linter stopped complaining.

import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'

export default {
  // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
  // for more information about preprocessors
  preprocess: vitePreprocess(),
  compilerOptions: {
    customElement: true,
  },
}
0

You have to add tag: null additionally to your rollup-plugins-svelte section.

...
         { file: pkg.main, 'format': 'umd', name }
        ],
        plugins: [
            svelte({
                customElement: true,
                tag: null
            }),
            resolve()
        ]
    };

If you are looking for a working example: https://github.com/ivosdc/svelte-generic-crud-table/blob/master/rollup.config.js

1
  • 1
    This is a legit solution to set null by default 👍. Minor nit, for newer versions of svelte set this option in svelte.config.js roughly like this: const config = { compilerOptions: { tag: null } }
    – ZuzEL
    Commented Mar 19, 2023 at 1:53
0

You need to nest the customElement option one step deeper, like this

  plugins: [
    svelte({
      compilerOptions: {
        customElement: true,

You can see this in the rollup-plugin-svelte docs: https://github.com/sveltejs/rollup-plugin-svelte#usage

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.