Barba: DOMParser error on SSR

[chtushar]

I was trying to integrate barbajs with Next.js using @barba/core and @barba/router and I'm getting an error

ReferenceError: DOMParser is not defined

I'm not able to eliminate this error, please help.

[xavierfoucrier]

Hi @chtushar,

Next.js is a React-based framework, so you don't need to use/integrate your app with Barba as this kind of framework already have router features inside: https://nextjs.org/docs/routing/introduction.

:thinking:

[plaidy]

I think I understand where @chtushar is coming from here. I'm not sure what @chtushar's context is here but I will explain mine.

Prior to using any front-end frameworks I used to use Barba.js to have more granular controls of transitions when navigating to a new page. Essentially, you wrap the portion of markup you to change between each page in a html element with the property of data-barba="container" and Barba.js will handle the heavy lifting of pre-fetching the next page and updating the portion of markup. The reason I really liked Barba.js is because it gives you access to both the current page's and next pages's mark in the DOM at the same time, this meant that you could transition on an in-out basis rather the out-in. This is illustrated in the lifecycle diagram.

An example of an in-out could be where the content of the next page slides in and up over the current page's content. Barba also allows you to define namespaces to define the transitions on a per route basis.

It seems there is talk in #88 and the many issues referenced in that thread to implement this kind of capability. That said, there is no definitive advice on how to implement this, its seems all attempts have particular drawbacks.

[thierrymichel]

As dom.ts export a "singleton", an error is throwed (server-side, I guess) because of new DOMParser() (which does not exist on Node side).
To make it work, it will need some refactoring (like creating DOMParser on-the-fly when first transition occurs, e.g.).

[jcolpal]

Is it the case that barba does not play nice with reactive data in general because it will "remove the current page content from the DOM when transition is done" or are there best practices in place for using barba with reactive data?

[xavierfoucrier]

Hi @jcolpal,

Barba works well with reactive data.

It "remove the current page content from the DOM" only when doing a transition.
The library offers Views and Hooks mechanisms to manage script execution before/after a transition or on specific pages.

Anyway, if you are using a front-end framework like React, Vue or Next, you should take a look at the framework documentation and use everything the framework is bringing you, like page transitions, routes, etc. instead of trying to implement another library over a complex framework layout.

I agree with @plaidy on "all attempts have particular drawbacks".