1

I have just discovered Barba.js and find it very useful. It provides smooth transitions between URLs of the same website.

I have put together a Plunker that, for a reason I can find out, gives me an "Uncaught ReferenceError: Barba is not defined" error.

What am I doing wrong?

Razvan Zamfir
  • 4,209
  • 6
  • 38
  • 252
  • Just to be sure, the question is specific to Plunker, in other environments your code is working? – Teemu Jul 12 '18 at 14:05
  • 1
    it appears that this script doesn't work well in plunkr.. I see a _Uncaught DOMException: Blocked a frame with origin "https://run.plnkr.co" from accessing a cross-origin frame._ – ronapelbaum Jul 12 '18 at 14:10

2 Answers2

2

The problem is Plunker. Barba.js should work fine normally, but Plunker is using define() to do some AMD loading, and this is throwing off the Barba.js package.

Instead of assigning the exported Barba to window, the logic is using define() because it is a global in Plunker.

If you want your example to work in global, you can make a slight modification to Barba.js just for the sake of a demo, OR you can try another tool such as Codepen. To be honest, because of how Barba works, I'm not sure if any of the online tools will play well with it.

Nevertheless, if you want to make a small emendation just to get it to work, open barba.js in Plunker, you should see at the top:

 1    (function webpackUniversalModuleDefinition(root, factory) {
 2      if(typeof exports === 'object' && typeof module === 'object')
 3          module.exports = factory();
 4      else if(typeof define === 'function' && define.amd)
 5          define("Barba", [], factory);
 6      else if(typeof exports === 'object')
 7          exports["Barba"] = factory();
 8      else
 9          root["Barba"] = factory();
10     })(this, function() {

Replace lines 2-9 with the following:

 1    (function webpackUniversalModuleDefinition(root, factory) {
 2        window["Barba"] = factory();
 3    })(this, function() {

This should define Barba as a global so that your script.js can use it.

Do NOT edit your original file on your local and try this in any other context. This is just for the sake of understanding, and the demo you are trying to run.

UPDATED

It should be noted that there is no way, given what Barba.js does, to know that it will work 100% in an online IDE or code sharing tool, such as plunker.

Per other questions in comments that you've asked, if you want to use the package, then, yes, it's best to have a local working version of your website. Your website should be able to work without using Barba at all. Then, once you're ready to add the nice transitions, add Barba, and get it working.

A xamp stack should work fine to run your website on your local.

Honestly, this is where you'll have to read Barba's docs thoroughly, and if you have troubles, search the package's Github issues to see if anyone else had something similar (https://github.com/luruke/barba.js/issues?page=1&q=is%3Aissue+is%3Aopen).

Chad Moore
  • 734
  • 4
  • 15
  • Are you sure about replacing `if(typeof exports === 'object' && typeof module === 'object')` with `(function webpackUniversalModuleDefinition(root, factory) {`? – Razvan Zamfir Jul 12 '18 at 15:39
  • Yes, I did it and ran it on plunker. Inside `script.js`, `Barba` is defined. You can try it and prove it to yourself: add a `debugger;` statement just inside your wrapping function in `script.js.` Then re-run your Plunker, it should hit the debug statement, and stop execution at that point. Open the console, and type `window.Barba` or just `Barba`. It should be defined. – Chad Moore Jul 12 '18 at 16:25
  • Again, given the nature of this package, I think it is best to get this working locally on your dev machine. Nevertheless, that tweak made it possible for me to run your code without it throwing an error. – Chad Moore Jul 12 '18 at 16:26
  • I did not use my own, I just edited yours in place, though I was unable to save. Nevertheless, I was able to get `script.js` to access `window.Barba`. – Chad Moore Jul 12 '18 at 20:21
  • Great answer. Please have a look at **[this question](https://stackoverflow.com/questions/51314562/jquery-using-class-name-selectors-with-the-animate-method-does-not-work)** too. Thanks! – Razvan Zamfir Jul 12 '18 at 21:42
  • You seem to be a very experienced front-end developer. Please have a look at the question **[How can I eliminate white screen “pause” between animations?](https://stackoverflow.com/questions/51343571/jquery-eliminate-white-screen-pause-between-animations)**. Thanks! – Razvan Zamfir Jul 18 '18 at 15:59
0

I downloaded your code and ran it on my local machine and it works fine. It seems that you can't use Barba.js in Plunker. Barba.js uses PJAX to do some pretty tricky things such as loading the page via AJAX and also changing the browser's URL so it's no surprise that it wouldn't work in a code tester such as Plunker or jsFiddle.

Kodie Grantham
  • 1,963
  • 2
  • 17
  • 27
  • I have downloaded it too and, when I click the *About us* link, I get the error `Uncaught DOMException: Failed to execute 'pushState' on 'History': A history state object with URL`. I guess it is one error after another. – Razvan Zamfir Jul 12 '18 at 14:46
  • Is it a *must* for it to run on a (local) server? Shall I test it in XAMPP? – Razvan Zamfir Jul 12 '18 at 15:00
  • You're asking very broad questions that exceed the scope of the original question, updated my answer with my thoughts. – Chad Moore Jul 12 '18 at 15:20