CODEWITHSUNDEEP
javascripthtmlbarbajs
user12880392
user12880392

Reputation:

Barba wrapper not found

I'm trying to do page transitions with barba.js, I used the data-barba="wrapper" and data-barba="container" exactly like in the documentary. Here's a shorten code of the html:

<body class="page" data-barba="wrapper">
<header class=nav-header>
<!-- Some navbar stuff -->
</header>
<main data-barba="container" data-barba-namespace="home">
<!-- Some main stuff -->
</main>

<!-- Some divs -->
</body>

Here's the javascript:

barba.init({
    views: [
        {
            namespace: 'home',
            beforeEnter() {
                animateSlides();
            },
            beforeLeave() {
                slideScene.destroy();
                pageScene.destroy();
                controller.destroy();
            }
        },
        {
            namespace: 'fashion'
        }
    ]
});

This is the error showing up in the console when opening the website

Uncaught Error: [@barba/core] No Barba wrapper found
    at t.e.init (core.ts:184)
    at app.js:127

Upvotes: 0

Views: 4244

Answers (2)

Dream Echo
Dream Echo

Reputation: 197

for me, it didn't work since I didn't open liveserver. I didn't know at first that it needs a server to work. This video https://youtu.be/2AG4YwicMcI?t=10 gives a good explanation

Upvotes: 0

6r1m
6r1m

Reputation: 31

I had the same problem solved it by moving the script tag inside the wrapper(body) from the head
.

<body class="page" data-barba="wrapper">
<header class=nav-header>
<!-- Some navbar stuff -->
</header>
<main data-barba="container" data-barba-namespace="home">
<!-- Some main stuff -->
</main>

<!-- Some divs -->
<!--script tag here instead of head-->
</body>

Upvotes: 3

Related Questions