HMR with customElement causes error

[vaibhavshn]

Describe the bug

I am trying to create web components with the customElement setting set to true.

The component loads fine on first load, but on changing contents of the components file, it gives the following error:

Reproduction

Just create a vite svelte project with npm init vite.

Write a sample component:

<svelte:options tag="my-component" />

<script lang="ts">
</script>

<div>hello world</div>

<style>
  :host {
    font-size: 16px;
  }
</style>

Save, start the dev server, then change contents of the file and click save.
You'll see the errors in the console.

Logs

No response

System Info

  System:
    OS: macOS 12.0.1
    CPU: (8) arm64 Apple M1
    Memory: 5.24 GB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node
    Yarn: 1.22.17 - ~/.nvm/versions/node/v16.13.0/bin/yarn
    npm: 8.1.0 - ~/.nvm/versions/node/v16.13.0/bin/npm
  Browsers:
    Chrome: 95.0.4638.69
    Firefox: 94.0.1
    Safari: 15.1
  npmPackages:
    @sveltejs/vite-plugin-svelte: ^1.0.0-next.11 => 1.0.0-next.30
    svelte: ^3.37.0 => 3.44.1
    vite: ^2.6.4 => 2.6.14

Severity

annoyance

[vaibhavshn]

Also, here are the configs:

// svelte.config.js

import sveltePreprocess from 'svelte-preprocess'

export default {
  // Consult https://github.com/sveltejs/svelte-preprocess
  // for more information about preprocessors
  preprocess: sveltePreprocess(),
  compilerOptions: {
    customElement: true,
  },
};

// vite.config.js

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    svelte({
      // same issue even without the following option
      compilerOptions: {
        customElement: true,
      },
    }),
  ],
});

[bluwy]

This is likely an issue with svelte-hmr as it currently doesn't handle web components well, there's sveltejs/svelte-hmr#26 tracking this bug. Closing in favor of the linked issue.

[patricknelson]

For anyone here interested in supporting HMR for Svelte custom elements (web components), check out svelte-retag which allows you to define your Svelte components as custom elements but also supports Vite HMR (as well as light DOM slots).

Demo:

git clone https://github.com/patricknelson/svelte-v4-custom-elements.git
cd svelte-v4-custom-elements
git checkout hmr-via-svelte-retag
npm i
npm run dev

In that repo, if you checkout that branch (hmr-via-svelte-retag) and edit src/lib/ExampleElement.svelte, you'll see it in action.