Cannot import barba.js in sveltekit

Question

This is my +layout.svelte file:

<script>
  import "../app.css";
  import barba from "@barba/core";
  barba.init();
</script>

<svelte:body data-barba="wrapper" />

<section
  class="bg-black  text-white"
  data-barba="container"
  data-barba-namespace="home"
>
  <slot />
</section>

The code results in a 500 internal error:

TypeError: Cannot read properties of undefined (reading 'default')
    at +layout.svelte:4:2

Demo : Bug Demo

score 3 · Accepted Answer · answered Feb 26 '23 at 06:39

Try adding barba.init({}); inside onMount.

<script>
import barba from "@barba/core";
import { onMount } from 'svelte';
onMount(() => {
    barba.init({
     // options
    })
})
</script>

<!-- Doesn't seem to work with svelte:body -->
<!-- It will report about wrapper -->

<main data-barba="wrapper">
    <section data-barba="container" data-barba-namespace="home">
        <slot />
    </section>
</main>

I made some modifications to your demo sandbox

Cannot import barba.js in sveltekit

1 Answers1