title: Scripts are not loading after the page transition in Barba.jS
body: <p>So I have one index file that has few js files are included like Gsap &amp; Barba JS. But I have one inner page that includes some extra js files such as locomotive.js &amp; OWLcarousel.js and please note that these two Js files (locomotive.js &amp; OWLcarousel.js) are not included on index page as they are not required. The issue is the inner page opens after completing the index page transition but without loading these two JS files (locomotive.js &amp; OWLcarousel.js). As a result both locomotive scrolling &amp; OWL carousel are not working. However, If I'll refresh the inner page once then these two Js files (locomotive.js &amp; OWLcarousel.js) are loading and everything works fine. So how to load JS files in Barba.Js for inner pages?</p>
  <p>Update:
  I have created a minimal demo and you can see that inner page is not loading the JS and CSS of Locomotive and also OWL carousel if click on heading text on homepage and navigate to inner. But if refresh the page then both locomotive &amp; owl carousel are working fine in inner page. How to fix this? I have added the suggested change to the JS file (<a href="https://bootstrap-awesome.com/barba-test1f/js/main-test.js" rel="nofollow noreferrer">https://bootstrap-awesome.com/barba-test1f/js/main-test.js</a>) Demo Link: <a href="https://bootstrap-awesome.com/barba-test1f/index-test.html" rel="nofollow noreferrer">https://bootstrap-awesome.com/barba-test1f/index-test.html</a></p>
  <p>So I tried to load the additional JS files in the same below format but nothing happens. Can anyone guide me with this please?</p>
  <pre><code>barba.init({
    views: [{
          namespace: 'home',
          beforeEnter({ next }) {
  
          // load your script
          let script = document.createElement('script');
          script.src = '&lt;script src=&quot;https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.min.js&quot;&gt;&lt;/script&gt;'; 
  script.src = '&lt;script src=&quot;js/owl/owl.carousel.js&quot;&gt;&lt;/script&gt;';
          next.container.appendChild(script);
          }, 
      }],
  </code></pre>
  <p><a href="https://i.stack.imgur.com/6WPhN.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6WPhN.jpg" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/XA91a.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XA91a.jpg" alt="Error in the Network console" /></a></p>
  <p><strong>UPDATE</strong>
  @wouch</p>
  <p>The below is what I have tried but still not working. Also, how to load Locomotive external CSS?</p>
  <p>JS: bootstrap-awesome.com/barba-test1f/js/main-test.js</p>
  <p>Demo : <a href="https://bootstrap-awesome.com/barba-test1f/index-test.html" rel="nofollow noreferrer">https://bootstrap-awesome.com/barba-test1f/index-test.html</a></p>
  <pre><code>views: [{
      namespace: 'home',
      beforeEnter({ next }) {
        // Script URLs to load
        let pageScriptSrcs = [
          'https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.min.js',
          'js/custom-scroll.js',
          'js/owl/owl.carousel.js',
          'js/owl/owl-custom.js'
        ]
        
        pageScriptSrcs.forEach(scriptSrc =&gt; {
          let script = '&lt;script src=&quot;' + scriptSrc + '&quot;&gt;&lt;\/script&gt;';
          console.log(script);
          next.container.appendChild(script);
        })
      }
      },
      {
      namespace: 'projdetailpage',
      beforeEnter({ next }) {
        // Script URLs to load
        let pageScriptSrcs = [
          'https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.min.js',
          'js/custom-scroll.js',
          'js/owl/owl.carousel.js',
          'js/owl/owl-custom.js'
        ]
        
        pageScriptSrcs.forEach(scriptSrc =&gt; {
          let script = '&lt;script src=&quot;' + scriptSrc + '&quot;&gt;&lt;\/script&gt;';
          console.log(script);
          next.container.appendChild(script);
        })
      }
  
    }],
  </code></pre>