Reloading JS scripts on page (transition) change when using Barba JS

I’m trying to implement barba.js on a HubSpot site.

Consider the following two pages:

  1. Resources
  2. Customers

With my current barba.js implementation, this is the current flow I’m experiencing:

  1. I access the resources page (not by transitioning to it, by directly accessing it via /resources).
  2. At this point, all my js is working (slick-sliders, scroll functions etc)
  3. I then use the nave to try and access the customers page. The page loads, but all of the js specific to modules for that page are not working.

In short, js for pages that I transition to do not work.

To resolve this, what I’m trying to do is to reload all scripts within the container beforeEnter().

See below:

$(function() {

  function delay(n){
    n = n || 2000;
    return new Promise((done) => {
      setTimeout(() => {
        done();
      }, n);
    });
  }

  barba.init({
    sync: true,
    prefetchIgnore: true,
    debug: true,
    transitions: [{

      async leave(data){
        const done = this.async();
        await delay(200);
        done();
      },

      async beforeEnter({ next, container }) {

        $(container).find('script').each(function (i, script) {
          var $script = $(script);
          $.ajax({
            url: $script.attr('src'),
            cache: true,
            dataType: 'script',
            success: function () {
              $script.trigger('load');
            }
          });
        });
      },

      async enter(data){
        let scrollX = 0
        let scrollY = 0

        barba.hooks.leave(() => {
          scrollX = barba.history.current.scroll.x;
          scrollY = barba.history.current.scroll.y;
        });

        window.scrollTo(scrollX, scrollY);
      },

      async once(data){
        console.log("done");
      },

    }]
  });

});

However, my current beforeEnter() still yields the same results. Any way around this?