Barba: IE Support issues - v2 beta

[josias-r]

The problem

Lacking IE support. "matches" and "fetch" polyfill required.

Description

While playing around with the v2 beta, I checked out IE support, where I got two errors regarding missing polyfills. After adding those, I didn't get any error in the console anymore, but the transition would hang right after the "leave before" hook (I made console logs for every hook to debug).

Details

First error I encountered (matches method):

• Object doesn't support property or method 'matches'.
  Polyfill:

  if (!Element.prototype.matches) {
    Element.prototype.matches = Element.prototype.msMatchesSelector;
  }

Second error (fetch):

• Unhandled promise rejection ReferenceError: 'Headers' is undefined
  Polyfill:
  https://github.com/github/fetch

Expected behaviour

Polyfills should be included and after adding them, the transition should work fluently.

Actual behaviour

Transition hangs at "leave before".

Steps to reproduce issue [ Good To Have ]

Open this example page (localhost) and check the IE console (Polyfills linked at the bottom of the HTML files):
ieissue.zip

---

Relevant Links

• https://stackoverflow.com/questions/46715190/error-in-ie-11-browser-exception-object-doesnt-support-property-or-method-m
• https://github.com/github/fetch

Environment

• Barba version that exhibits the issue:
  v2.1.1 beta
• Build used:
  
  
  
  • [ ] module (esm/)
  
  
  • [x] browser (dist/)
  
  
  • [ ] main (lib/)
  
  
• Browser OS/version used:
  IE 11

[thierrymichel]

Hi @josias-r,

Thanks for the report!
I will work on this issue this week-end.
Probably rolling back to a good old school xhr.
I will also fix the matches problem… :+1:

[josias-r]

@thierrymichel It seems like the polyfills have been added, since I'm not getting any errors with the newest unpkg versions. But the transition will still not complete on IE (I'm not getting any console logs for any hook except all 3 appear hooks).

I need to press a link twice on IE and the second time will load the page without transition.

[thierrymichel]

Ok. Sorry for that.
I will check directly into IE... 😱

[thierrymichel]

@josias-r made a full check with my test repo on IE…

I've updated the "browser support/polyfill" section (Array.prototype.find was missing, also using default is easier).
Aside that, everything (transitions, views) is running fine.
Do you use some barba.js plugin ?

[josias-r]

@thierrymichel Alright, I found the culprit. In addition to the console logs, I had a couple lines of code, to fetch and change the body classes / nav:

const html = d.next.html;
const parser = new DOMParser();
const newDoc = parser.parseFromString(html, "text/html");
const bodyClasses = newDoc.body.classList;
const oldNav = document.querySelector('nav');
const newNav = newDoc.querySelector('nav');
document.body.classList = bodyClasses;

document.querySelector('header').removeChild(oldNav);
document.querySelector('header').appendChild(newNav);

This works fine in any new Browser, any Idea what's wrong with the code for IE, or a way to write the code better? I'm guessing either the DOMParser doesn't work in IE or somehow IE was waiting for a pomise.

[thierrymichel]

I had a strange issue with DOMParser on iOS. So I switched to simple document.createElement + innerHTML.
https://github.com/barbajs/barba/commit/8afe945e82de37b5f56760feb3a15f11dd3dd7e5

[josias-r]

Thank you for the advice, I will try it out 🙏