HMR breaks on CustomElements (WebComponents)

[DaleCam]

Describe the bug

I am using the "CustomElement" feature of svelte. (My backend is a legacy asp.net MVC app)
I have setup a CustomElement called "rb-about" and the page renders the component/element correctly.
Im connecting to HMR and proxying the Backend (see vite.config below).
In the page i have included the following scripts as per vite instructions: https://vitejs.dev/guide/backend-integration.html#backend-integration and I can see in the console vite has "connected":

[vite] connecting... client.ts:22:8
[vite] connected.

I then make a change in the svelte component and save.
Expected Result
HMR updates the custom component in the browser
Actual Result
The custom component doesn't update and the console logs the following error:
DOMException: CustomElementRegistry.define: 'rb-about' has already been defined as a custom element

Reproduction

I just dont know how to spin up a repo with a disconnected/seperate backend (as my current backend is an existing asp.net mvc app).

Logs

**Console.log**
DOMException: CustomElementRegistry.define: 'rb-about' has already been defined as a custom element client.ts:33:12
    warnFailedFetch client.ts:33
    fetchUpdate client.ts:334
    fetchUpdate client.ts:321
    handleMessage client.ts:72
    handleMessage client.ts:70
    <anonymous> client.ts:44
    (Async: EventListener.handleEvent)
    <anonymous> client.ts:43
[hmr] Failed to reload /Svelte/About/About.svelte. This could be due to syntax errors or importing non-existent modules. (see errors above) client.ts:35:10
    warnFailedFetch client.ts:35
    fetchUpdate client.ts:334
    fetchUpdate client.ts:321
    handleMessage client.ts:72
    handleMessage client.ts:70
    <anonymous> client.ts:44
    (Async: EventListener.handleEvent)
    <anonymous> client.ts:43


**Vite Server Logs **
 vite:resolve 3.15ms /Svelte/About/about.ts -> C:/Code/Proto.Web/Svelte/About/about.ts +0ms
  vite:resolve 1.50ms C:\Code\Theocratic\Regionbuild\Deckhand\Deckhand.Web\node_modules\vite\dist\client\client.mjs -> C:/Code/Proto.Web/node_modules/vite/dist/client/client.mjs +22ms
  vite:resolve 2.55ms /@vite/client -> C:/Code/Proto.Web/node_modules/vite/dist/client/client.mjs +1ms
  vite:load 11.46ms [fs] /Svelte/About/about.ts +0ms
  vite:load 6.26ms [fs] /@vite/client +5ms
  vite:resolve 1.12ms C:\Code\Theocratic\Regionbuild\Deckhand\Deckhand.Web\node_modules\vite\dist\client\env.mjs -> C:/Code/Proto.Web/node_modules/vite/dist/client/env.mjs +22ms
  vite:resolve 16.12ms @vite/env -> C:/Code/Proto.Web/node_modules/vite/dist/client/env.mjs +15ms
  vite:resolve 2.56ms /node_modules/vite/dist/client/env.mjs -> C:/Code/Proto.Web/node_modules/vite/dist/client/env.mjs +4ms
  vite:import-analysis 30.53ms [1 imports rewritten] node_modules\vite\dist\client\client.mjs +0ms
  vite:transform 34.23ms /@vite/client +0ms
  vite:time 52.55ms /@vite/client +0ms
  vite:load 3.24ms [fs] /node_modules/vite/dist/client/env.mjs +49ms
  vite:import-analysis 0.07ms [no imports] node_modules\vite\dist\client\env.mjs +15ms
  vite:transform 1.12ms /node_modules/vite/dist/client/env.mjs +14ms
  vite:resolve 2.13ms ./About.svelte -> C:/Code/Proto.Web/Svelte/About/About.svelte +73ms
  vite:resolve 1.29ms /Svelte/About/About.svelte -> C:/Code/Proto.Web/Svelte/About/About.svelte +2ms
  vite:import-analysis 7.42ms [1 imports rewritten] Svelte\About\about.ts +57ms
  vite:transform 111.93ms /Svelte/About/about.ts +58ms
  vite:time 150.70ms /Svelte/About/about.ts +71ms
  vite:load 4.60ms [fs] /Svelte/About/About.svelte +70ms
  vite:vite-plugin-svelte setting cssHash s-qyUo3b8CrxCy for /Svelte/About/About.svelte +7s
  vite:vite-plugin-svelte transform returns compiled js for C:/Code/Proto.Web/Svelte/About/About.svelte +682ms
  vite:resolve 0.07ms svelte/internal -> C:/Code/Proto.Web/node_modules/.vite/svelte_internal.js?v=718e596e +714ms
  vite:resolve 0.89ms /node_modules/.vite/svelte_internal.js?v=718e596e -> C:/Code/Proto.Web/node_modules/.vite/svelte_internal.js?v=718e596e +2ms
  vite:resolve 0.67ms /node_modules/svelte-hmr/runtime/hot-api-esm.js -> C:/Code/Proto.Web/node_modules/svelte-hmr/runtime/hot-api-esm.js +1ms
  vite:resolve 0.65ms /node_modules/svelte-hmr/runtime/proxy-adapter-dom.js -> C:/Code/Proto.Web/node_modules/svelte-hmr/runtime/proxy-adapter-dom.js +2ms
  vite:hmr [self-accepts] Svelte\About\About.svelte +0ms
  vite:import-analysis 8.23ms [3 imports rewritten] Svelte\About\About.svelte +719ms
  vite:transform 692.94ms /Svelte/About/About.svelte +719ms
  vite:cache [304] /node_modules/vite/dist/client/env.mjs +0ms
  vite:time 1.91ms /node_modules/vite/dist/client/env.mjs +727ms
  vite:time 2.19ms /Svelte/About/About.svelte +3ms
  vite:load 7.10ms [fs] /node_modules/svelte-hmr/runtime/hot-api-esm.js +722ms
  vite:resolve 0.70ms ../runtime/index.js -> C:/Code/Proto.Web/node_modules/svelte-hmr/runtime/index.js +17ms
  vite:resolve 0.75ms /node_modules/svelte-hmr/runtime/index.js -> C:/Code/Proto.Web/node_modules/svelte-hmr/runtime/index.js +2ms
  vite:import-analysis 3.78ms [1 imports rewritten] node_modules\svelte-hmr\runtime\hot-api-esm.js +17ms
  vite:transform 4.29ms /node_modules/svelte-hmr/runtime/hot-api-esm.js +17ms
  vite:load 14.94ms [fs] /node_modules/.vite/svelte_internal.js?v=718e596e +7ms
  vite:resolve 0.75ms ./chunk-PIC67VNU.js -> C:/Code/Proto.Web/node_modules/.vite/chunk-PIC67VNU.js +8ms
  vite:resolve 0.85ms /node_modules/.vite/chunk-PIC67VNU.js?v=718e596e -> C:/Code/Proto.Web/node_modules/.vite/chunk-PIC67VNU.js?v=718e596e +1ms
  vite:import-analysis 4.33ms [1 imports rewritten] node_modules\.vite\svelte_internal.js?v=718e596e +10ms
  vite:transform 4.97ms /node_modules/.vite/svelte_internal.js?v=718e596e +9ms
  vite:load 23.95ms [fs] /node_modules/svelte-hmr/runtime/proxy-adapter-dom.js +9ms
  vite:resolve 0.75ms ./overlay.js -> C:/Code/Proto.Web/node_modules/svelte-hmr/runtime/overlay.js +8ms
  vite:resolve 0.89ms /node_modules/svelte-hmr/runtime/overlay.js -> C:/Code/Proto.Web/node_modules/svelte-hmr/runtime/overlay.js +1ms
  vite:import-analysis 6.29ms [2 imports rewritten] node_modules\svelte-hmr\runtime\proxy-adapter-dom.js +10ms
  vite:transform 8.25ms /node_modules/svelte-hmr/runtime/proxy-adapter-dom.js +12ms
  vite:cache [memory] /node_modules/.vite/svelte_internal.js?v=718e596e +0ms
  vite:cache [304] /node_modules/.vite/svelte_internal.js?v=718e596e +37ms
  vite:time 1.72ms /node_modules/.vite/svelte_internal.js?v=718e596e +34ms
  vite:cache [304] /node_modules/svelte-hmr/runtime/hot-api-esm.js +2ms
  vite:time 1.48ms /node_modules/svelte-hmr/runtime/hot-api-esm.js +2ms
  vite:cache [304] /node_modules/svelte-hmr/runtime/proxy-adapter-dom.js +3ms
  vite:time 1.60ms /node_modules/svelte-hmr/runtime/proxy-adapter-dom.js +4ms
  vite:load 35.57ms [fs] /node_modules/svelte-hmr/runtime/index.js +26ms
  vite:resolve 0.85ms ./hot-api.js -> C:/Code/Proto.Web/node_modules/svelte-hmr/runtime/hot-api.js +24ms
  vite:resolve 1.02ms /node_modules/svelte-hmr/runtime/hot-api.js -> C:/Code/Proto.Web/node_modules/svelte-hmr/runtime/hot-api.js +1ms
  vite:import-analysis 4.02ms [1 imports rewritten] node_modules\svelte-hmr\runtime\index.js +24ms
  vite:transform 4.47ms /node_modules/svelte-hmr/runtime/index.js +22ms
  vite:cache [304] /node_modules/svelte-hmr/runtime/index.js +16ms
  vite:time 1.63ms /node_modules/svelte-hmr/runtime/index.js +15ms
  vite:load 26.42ms [fs] /node_modules/svelte-hmr/runtime/overlay.js +14ms
  vite:import-analysis 0.06ms [no imports] node_modules\svelte-hmr\runtime\overlay.js +11ms
  vite:transform 0.73ms /node_modules/svelte-hmr/runtime/overlay.js +11ms
  vite:load 44.42ms [fs] /node_modules/.vite/chunk-PIC67VNU.js?v=718e596e +4ms
  vite:import-analysis 0.65ms [no imports] node_modules\.vite\chunk-PIC67VNU.js?v=718e596e +7ms
  vite:transform 1.16ms /node_modules/.vite/chunk-PIC67VNU.js?v=718e596e +7ms
  vite:time 15.72ms /node_modules/.vite/chunk-PIC67VNU.js?v=718e596e +13ms
  vite:cache [304] /node_modules/svelte-hmr/runtime/overlay.js +16ms
  vite:time 2.33ms /node_modules/svelte-hmr/runtime/overlay.js +4ms
  vite:load 24.12ms [fs] /node_modules/svelte-hmr/runtime/hot-api.js +14ms
  vite:resolve 1.01ms ./proxy.js -> C:/Code/Proto.Web/node_modules/svelte-hmr/runtime/proxy.js +31ms
  vite:resolve 1.20ms /node_modules/svelte-hmr/runtime/proxy.js -> C:/Code/Proto.Web/node_modules/svelte-hmr/runtime/proxy.js +2ms
  vite:import-analysis 5.07ms [1 imports rewritten] node_modules\svelte-hmr\runtime\hot-api.js +15ms
  vite:transform 5.51ms /node_modules/svelte-hmr/runtime/hot-api.js +15ms
  vite:time 9.08ms /node_modules/svelte-hmr/runtime/hot-api.js +10ms
  vite:load 2.87ms [fs] /node_modules/svelte-hmr/runtime/proxy.js +12ms
  vite:resolve 0.93ms ./svelte-hooks.js -> C:/Code/Proto.Web/node_modules/svelte-hmr/runtime/svelte-hooks.js +10ms
  vite:resolve 0.77ms /node_modules/svelte-hmr/runtime/svelte-hooks.js -> C:/Code/Proto.Web/node_modules/svelte-hmr/runtime/svelte-hooks.js +2ms
  vite:import-analysis 4.57ms [1 imports rewritten] node_modules\svelte-hmr\runtime\proxy.js +11ms
  vite:transform 5.01ms /node_modules/svelte-hmr/runtime/proxy.js +12ms
  vite:cache [304] /node_modules/svelte-hmr/runtime/proxy.js +26ms
  vite:time 1.16ms /node_modules/svelte-hmr/runtime/proxy.js +15ms
  vite:load 3.83ms [fs] /node_modules/svelte-hmr/runtime/svelte-hooks.js +12ms
  vite:import-analysis 2.60ms [1 imports rewritten] node_modules\svelte-hmr\runtime\svelte-hooks.js +11ms
  vite:transform 3.13ms /node_modules/svelte-hmr/runtime/svelte-hooks.js +11ms
  vite:cache [memory] /node_modules/.vite/svelte_internal.js?v=718e596e +77ms
  vite:cache [304] /node_modules/svelte-hmr/runtime/svelte-hooks.js +11ms
  vite:time 1.29ms /node_modules/svelte-hmr/runtime/svelte-hooks.js +11ms
  vite:resolve 0.82ms /node_modules/.vite/svelte_internal.js -> C:/Code/Proto.Web/node_modules/.vite/svelte_internal.js +181ms
  vite:time 2.86ms /node_modules/.vite/svelte_internal.js.map +166ms
  vite:hmr [file change] Svelte/About/About.svelte +25s
  vite:vite-plugin-svelte setting cssHash s-qyUo3b8CrxCy for /Svelte/About/About.svelte +25s
  vite:vite-plugin-svelte handleHotUpdate js changed +36ms
  vite:vite-plugin-svelte handleHotUpdate for C:/Code/Proto.Web/Svelte/About/About.svelte result: C:/Code/Proto.Web/Svelte/About/About.svelte +0ms
5:03:05 pm [vite] hmr update /Svelte/About/About.svelte
  vite:load 0.78ms [fs] /Svelte/About/About.svelte +25s
  vite:vite-plugin-svelte setting cssHash s-qyUo3b8CrxCy for /Svelte/About/About.svelte +25ms
  vite:vite-plugin-svelte transform returns compiled js for C:/Code/Proto.Web/Svelte/About/About.svelte +22ms
  vite:hmr [self-accepts] Svelte\About\About.svelte +89ms
  vite:import-analysis 6.62ms [3 imports rewritten] Svelte\About\About.svelte +25s
  vite:transform 29.45ms /Svelte/About/About.svelte +25s
  vite:cache [memory] /node_modules/.vite/svelte_internal.js?v=718e596e +25s
  vite:cache [memory] /node_modules/svelte-hmr/runtime/hot-api-esm.js +1ms
  vite:cache [memory] /node_modules/svelte-hmr/runtime/proxy-adapter-dom.js +0ms
  vite:time 37.40ms /Svelte/About/About.svelte?import +25s

System Info

** package.json **
{
  "version": "1.0.0",
  "name": "proto.web",
  "private": true,
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "debug": "vite dev --debug",
    "build": "vite build",
    "preview": "vite preview",
    "check": "svelte-check --tsconfig ./tsconfig.json"
  },
  "devDependencies": {
    "@sveltejs/vite-plugin-svelte": "^1.0.0-next.30",
    "@tsconfig/svelte": "^2.0.1",
    "@types/angular": "^1.7.0",
    "sass": "^1.49.7",
    "svelte": "^3.44.0",
    "svelte-check": "^2.2.7",
    "svelte-preprocess": "^4.9.8",
    "tslib": "^2.3.1",
    "typescript": "^4.4.4",
    "vite": "^2.7.13"
  }
}

** Svelte Config **
import sveltePreprocess from 'svelte-preprocess'

export default {
  preprocess: sveltePreprocess()
}

** Vite Config **
export default defineConfig({
  plugins: [
    svelte({
      compilerOptions: {
        customElement: true,
      }
    })
  ],
  build:{
    // generate manifest.json in outDir
    manifest: true,
    rollupOptions: {
      // overwrite default .html entry
      input: ['Svelte/app.ts','Svelte/About/about.ts']
    },
    outDir: 'Scripts/svelte/dist'
  },
  server: {
    proxy:{
      '*' : {
        target: 'https://localhost:44300',
        changeOrigin: true
      }
    },
    hmr: {
      protocol: 'ws'
    }
  }
})

Severity

annoyance

[dominikg]

Hi,

web-components are registered once and you have to reload the browser page to load a newer version, you can't redefine them later, so HMR for the web-components themselves isn't possible.

You can however use a feature of vite-plugin-svelte to selectively compile .svelte files a web-components

svelte.config.js

function isWebComponentSvelte(code) {
    const svelteOptionsIdx = code.indexOf('<svelte:options ')
    if(svelteOptionsIdx < 0) {
        return false
    }
    const tagOptionIdx = code.indexOf('tag=', svelteOptionsIdx)
    const svelteOptionsEndIdx = code.indexOf('>',svelteOptionsIdx);
    return tagOptionIdx > svelteOptionsIdx && tagOptionIdx < svelteOptionsEndIdx
}
export default {
    vitePlugin: {
        experimental: {
            dynamicCompileOptions({code}) {
                if(isWebComponentSvelte(code)) {
                    return {
                        customElement: true
                    }
                }
            }
        }
    }
}

-- edited the above code block to vite-plugin-svelte 1.0 config

That way, only .svelte files that contain <svelte:options tag="some-thing"> get compiled as webcomponents and you can enjoy HMR for the others. You can also use a filename scheme if you prefer, see docs for dynamicCompileOptions.

You should also make sure you only import svelte web components once eg import WebComponent.svelte in main.js .

[DaleCam]

Thank you so much @dominikg! Very appreciated :)

[Masstronaut]

@dominikg I'm trying to do something similar in svelte 4. Made the change from tag= to customElement=, and it seems to be picking up the right elements. I've found 2 issues:

1. The components aren't standalone, they depend on other JS bundles from my sveltekit project to work
2. They don't seem to be preprocessed, ie tailwind styles aren't inlined into the JS bundle

Any idea how to sort these out? I can open a different issue if that's more appropriate.

[dominikg]

please use https://svelte.dev/chat help channels to ask these questions. for bugs new issues with minimal reproduction.
preprocessing does not inline styles to js, you have to change compilerOptions.css to injected. it won't add tailwind css to the injected css though so you're going to have to figure out how to add a ref to the stylesheet tgat has them.