Description
Describe the bug
Maybe related: #7968
I am using svelte to build web components that I can use in server rendered frameworks, Django in this case.
When I import the web component, I get the error:
Component.js:130 Uncaught TypeError: Cannot read properties of undefined (reading '$$')
at q (Component.js:130:44)
at new ht (App.svelte:10:50)
at main.js:4:13
By exploring the included javascript which thankfully has the source map, I discover it fails at the entry point:
target: document.getElementById('app')Workaround:
In my 'vanilla html' I added the id="app to the body tag, which solves the issue:
<body class="h-full bg-gray-50" id="app">Not sure if this is intended or an issue? in any case I wasn't able to find any instructions, so I thought I would post in case others have the same problem.
Fortunately in my case having that id in the body tag is no bother, just took a little while to trouble shoot.
Reproduction
package.json
{
"name": "web-component-foundry",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"devDependencies": {
"@sveltejs/vite-plugin-svelte": "^3.0.1",
"svelte": "^4.2.8",
"vite": "^5.0.8"
},
"dependencies": {
"svelte-preprocess": "^5.1.3"
}
}vite.config.js
import { defineConfig } from "vite";
import { svelte } from "@sveltejs/vite-plugin-svelte";
import sveltePreprocess from "svelte-preprocess";
export default defineConfig({
plugins: [
svelte({
preprocess: sveltePreprocess({}),
exclude: /\.component\.svelte$/,
emitCss: false,
}),
svelte({
preprocess: sveltePreprocess(),
include: /\.component\.svelte$/,
compilerOptions: {
customElement: true,
},
emitCss: false,
}),
],
build: {
sourcemap: true,
target: "modules",
lib: {
entry: "src/main.js",
name: "<<name>>",
fileName: "components",
},
},
});./lib/StreamSelectPlay.component.svelte
<svelte:options customElement="fireops-radio-stream-player" />
<script lang="js">
export let name = '';
</script>
<div>
<h1 class="text-amber-500">Hi from: {name}</h1>
</div>Generating a web component (Makefile):
npm run build && cp dist/components.* ../web-admin/web-assets/js/Which invokes:
vite build
Logs
No response
System Info
System:
OS: macOS 14.2
CPU: (8) arm64 Apple M2
Memory: 52.31 MB / 8.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
npm: 10.2.5 - ~/.nvm/versions/node/v20.10.0/bin/npm
Browsers:
Chrome: 120.0.6099.109
Safari: 17.2
npmPackages:
svelte: ^4.2.8 => 4.2.8Severity
annoyance