Search code examples
sveltecodesandbox

Why does Svelte app on Codesandbox.io result in TypeError ... is not a constructor?

Trying to understand how writable and readable stores work in Svelte. So tried to reproduce a minimal version of the alert component described in https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores at codesandbox.io.

However, I receive an error: TypeError _Alert.Alert is not a constructor

The codesandbox code is at https://codesandbox.io/s/error-stackoverflow-tour1?file=/App.svelte

These are the contents of the relevant files:

index.js

import App from "./App.svelte";

const app = new App({
  target: document.body
});

export default app;

App.svelte

<script>
  import { Alert } from "./Alert.svelte";
</script>
<main>
  <Alert />
</main>

Alert.svelte

<script>
  import { alertStore } from "./stores.js";
  import { onDestroy } from "svelte";

  let alertContent = "";

  const unsubscribe = alertStore.subscribe(value => (alertContent = value));

  onDestroy(unsubscribe);
</script>

{#if alertContent}
<div on:click={() => alertContent = ""}>
  <p> {alertContent} </p>
</div>
{/if}

stores.js

import { writable } from "svelte/store";

export const alertStore = writable("Welcome to the to-do list app!");

Can anyone see what might be causing the error.

Solution

  • Looks like you need to carry on in the tutorial, you're still using the boilerplate subscribe/unsubscribe method which is never used in a Svelte app since auto-subscribe exists.

    The reason you're getting an error currently is this line import { Alert } from "./Alert.svelte"; in App.svelte.

    When you import a component in Svelte you don't wrap the name in brackets. This should be import Alert from "./Alert.svelte"; and then you use it like this <Alert /> in your markup.