CrownFramework / svelte-error-boundary

Error Boundaries for Svelte
MIT License
75 stars 5 forks source link

TypeError: ErrorBoundary is not a constructor #5

Open dimitrilahaye opened 3 years ago

dimitrilahaye commented 3 years ago

Hello, I'm using Svelte 3 and have this error while testing App component:

TypeError: ErrorBoundary is not a constructor

Here my App Component:

<script>
  import ErrorBoundary from 'svelte-error-boundary'
  import TailwindCSS from './style/TailwindCSS.svelte';
  import * as Sentry from "@sentry/browser";
  import {Integrations} from "@sentry/tracing";
  import BrokenComponent from "./BrokenComponent.svelte";

  export let name;
  let handleError = (e) => {
    Sentry.captureException(e);
  }

  Sentry.init({
    dsn: process.env.SENTRYURL,
    integrations: [new Integrations.BrowserTracing()],
    tracesSampleRate: process.env.SENTRYTRACES,
  });
</script>

<TailwindCSS />
<ErrorBoundary {handleError}>
  <BrokenComponent/>
  <main>
    <h1 class="text-3xl font-bold">Hello {name}!</h1>
    <p>
      Visit the
      <a href="https://svelte.dev/tutorial">Svelte tutorial</a>
      or the <a href="https://tailwindcss.com/docs">Tailwind CSS docs</a>
      to learn how to build apps!
    </p>
  </main>
</ErrorBoundary>

<style>
  main {
    @apply p-4;
  }
  h1,
  p {
    @apply text-gray-600;
  }
  a {
    @apply text-blue-600 underline;
  }
</style>

Then my BrockenComponent:

<script>
    let a;
    let b = a.c;
</script>

Do you have an idea of what happens?

khromov commented 2 years ago

@dimitrilahaye A bit late to the party but I think you are importing the package svelte-error-boundary as opposed to @crownframework/svelte-error-boundary. They are different packages despite the same name, so check the docs for the relevant package!