My Svelte button component is disappearing and not placed in the correct place when implementing into my page

I am making a project with SvelteKit and I made a button component in the lib folder. I imported it into my main +page.svelte file and referenced it under my title. The content of the whole page then loads for a split second and disappears. This is the code of the page:

<script>
    import Button from '$lib/Button.svelte'
   
    const handleClick = () =>
    {
        console.log("Clicked")
    }
</script>

<head>
    <title>E-client</title>
</head>
<body>
    <div class="title">

        <h1 >Welcome to Email Cient!</h1>
        <hr/>
        <h3>Log in to access email</h3>
        <Button on:click={handleClick}>Log In</Button>
    </div>
</body>

Button.svelte:

<button on:click>
    <slot/>
</button>

I tried nesting the button in a different div, but that didn’t give any different results. I have tried to set a variable like buttonLoaded, and only rendering the button when the variable is true using {#if} statement. This allowed the whole page to load except for the actual button, and the button was not visible in the dev tools. I am kind of new to Sveltekit so I am not sure what else to do or try.

There is an error that appears:

Uncaught (in promise) TypeError: Illegal invocation

    in +layout.svelte
    in root.svelte

But I have searched around and haven’t found a solution.

Here is my +layout.svelte code:

<script>
    import '../styles/global.css';
</script>

<header>
    <div class="navBar">
        <nav>
            <ul class="navLinks">
                <li><a href="/">Home</a></li>
                <li class="lgButton"><a href="/login">Log in</a></li>
            </ul>
        </nav>
    </div>
</header>
<main>
    <slot />
</main>

Package.json:

{
    "name": "email-frontend",
    "version": "0.0.1",
    "type": "module",
    "scripts": {
        "dev": "vite dev",
        "build": "vite build",
        "preview": "vite preview"
    },
    "devDependencies": {
        "@sveltejs/adapter-auto": "^3.0.0",
        "@sveltejs/kit": "^2.0.0",
        "@sveltejs/vite-plugin-svelte": "^4.0.0",
        "svelte": "^5.0.0",
        "vite": "^5.0.3"
    }
}

You need to sign in to view this answers

Related Post