Barba.js (v2.9.7) reloads current page instead of next one

Question

I am trying to use Barba.js for the first time. I basically want just one transition for every page (transition div displaying data.next.namespace slides in and out). The only exception is a preloading screen occurring only once on first page load.

The once hook works, but I have problems with the default transition. When I click on a link, the console in the DevTools shows me no error but the page loaded is always the current one. I used the global barba.hooks.enter to console.log the next data.next.namespace and it works for a fraction of a second, before immediately reloading the current page. (code below)

I don't know what's wrong with my code and would appreciate a lot your valuable help.

Thanks in advance!

barba.init({
  transitions: [
    {
      name: "once-home",
      to: {
        namespace: "home",
      },
      once() {
       //Do something cool
      },
    },
    {
      name: "default",
      enter(data) {
        const transitionElem = document.querySelector(".transition ");
        const transitionTitle = document.querySelector(".transition_title ");
        transitionTitle.innerHTML = data.next.namespace;
        const tl = gsap.timeline({
          onComplete: () => {
            transitionTitle.innerHTML = "";
          },
        });

        tl
          .set(transitionElem, {
            clearProps: "all",
          })
          .set(transitionTitle, {
            x: 100,
          })
          .to(transitionElem, {
            duration: 1.5,
            x: "0",
            ease: "power4.inOut",
            onComplete: () => {
              data.current.container.style.display = "none";
            },
          })
          .to(
            transitionTitle,
            0.5,
            {
              x: 0,
              opacity: 1,
              ease: "power4.inOut",
            },
            0.1
          )
          .from(next.container, {
            duration: 0.1,
            opacity: 0,
            ease: "power2.inOut",
          })
          .to(
            transitionElem,
            {
              duration: 0.7,
              x: "100%",
              ease: "power4.inOut",
            },
            1
          )
          .to(
            transitionTitle,
            0.7,
            {
              x: -100,
              opacity: 0,
              ease: "power4.inOut",
            },
            0.8
          );
      },
    },
  ],
});

Answer 1

I realized I had the hooks defined in a completely wrong way.

Changing from enter(data){} to enter({ current, next }) and data.next.namespace to next.container.dataset.barbaNamespace solved the problem for me.