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
Leave feedback about this