My Svelte app compiles, but dies on loading. ⸘Why‽

I'm working on my first Svelte app, & it dies in the browser with:

Uncaught Error: No element `#globe` found.
    at instance (App.svelte:5:7)
    at init (Component.js:135:5)
    at new App (App.svelte:32:31)
    at createProxiedComponent (svelte-hooks.js:341:9)
    at new ProxyComponent (proxy.js:242:7)
    at new Proxy<App> (proxy.js:349:11)
    at main.ts:4:13

Uncaught Error: No element `#globe` found.
    at instance (App.svelte:5:7)
    at init (Component.js:135:5)
    at new App (App.svelte:32:31)
    at createProxiedComponent (svelte-hooks.js:341:9)
    at new ProxyComponent (proxy.js:242:7)
    at new Proxy<App> (proxy.js:349:11)
    at main.ts:4:13

I've defined a <article id="globe"> in the Svelte app where this script is running.

2 Replies

dys 🐙OP•11mo ago

I'm trying to turn Globe.gl's Submarine Cables Map into a Svelte app.

Jochem•11mo ago

I think it might be because of the <html> element. You're mounting the app in index.html already, so you shouldn't have another html and all the other things in App.svelte. You can just have <article id="globe" /> in the HTML section of the app component for your style element setting margin to 0 on body, you can use :global inside your style element in App.svelte

:global(body) {
  margin: 0;
}

:global(body) {
  margin: 0;
}

You can also use bindings rather than having to use getElementById:

<script>
let globe;
</script>
<article bind:this={globe} />
<style>
:global(body) {
  margin: 0;
}
...
</script>

<script>
let globe;
</script>
<article bind:this={globe} />
<style>
:global(body) {
  margin: 0;
}
...
</script>

Gaming

Programming

My Svelte app compiles, but dies on loading. ⸘Why‽