Svelte + EsBuild + Deno - Uncaught TypeError: Cannot read properties of undefined (reading '$$')

Question

I am using Deno and I am getting this error in the browser: Uncaught TypeError: Cannot read properties of undefined (reading '$$')

This is bunder.ts:

import * as esbuild from 'https://deno.land/x/[email protected]/mod.js'
import sveltePlugin from 'npm:esbuild-svelte';
import { typescript } from "./build/esbuild-svelte.ts"; // I rebuilt svelte-process-esbuild in ts because it wasn't originally written in ts
// if you want this code to duplicate, I can get it to you np

const result = await esbuild.build({
    entryPoints: [
        'client/entries/admin.ts',
        'client/entries/main.ts'
    ],
    bundle: true,
    outdir: 'dist',
    mainFields: ["svelte", "browser", "module", "main"],
    conditions: ["svelte", "browser"],
    watch: {
        onRebuild(error: Error, result: any) {
            if (error) console.error('watch build failed:', error);
            else console.log('watch build succeeded:', result);
        }
    },
    // Deno did not recognise sveltePlugin as a function, but running the code works
    plugins: [(sveltePlugin as unknown as Function)({
        preprocess: [
            typescript()
        ]
    })],
    logLevel: "info"
});

App.svelte:

<script lang="ts">
    export let name: String;
</script>

<main>Hello, {name}</main>

./client/entries/main.ts:

import App from '../views/App.svelte';

const app = new App({
    target: document.body,
    props: {
        name: 'World'
    }
});

https://github.com/sveltejs/svelte/issues/6584 States it has to do with my svelte version but I am running npm:esbuild-svelte, which versions don't line up with the svelte versions so I'm not sure how to fix this. What am I doing wrong?

Answer 1

Well after a few days of working on something else, it dawned on me that the tag was in the header and at that point, the document.body wouldn't exist. I added an enclosing 'DOMContentLoaded' listener and now it works.