Roots Discourse

Javascript compile unexpected identifier IE11

Hi All

I have been wracking my brain with a bit of an issue I am having at the moment trying to get javascript to work correctly on IE11

I have this bit of code for a direction reveal which works in all other major browsers.

const directionRevealSwing = DirectionReveal({
      selector: '.direction-reveal',              // Container element selector.
      itemSelector: '.direction-reveal__card',    // Item element selector.
      animationName: 'swing',                     // Animation CSS class.
      enableTouch: true,                          // Adds touch event to show content on first click then follow link on the second click.
      touchThreshold: 250,                        // Touch length must be less than this to trigger reveal which prevents the event triggering if user is scrolling.
    });

When I run yarn build:production and it compiles I get an error in IE11 Expected identifier main_xxx.js
The code turns into something like this

e.a=function({selector:t=".direction-reveal",itemSelector:e=".direction-reveal__card",animationName:n="swing",enableTouch:o=!0,touchThreshold:r=250}={})

This is happening in multiple areas not just the direction reveal and I am not understanding why it has compiled to selector:t= any further information why this may be happening and if I can change this simply would be well appreciated.

hey,

there is not enough context in your message (sage version, maybe a link to live demo etc.) but this might be connected with compatibility mode in IE11.

What you can try is to drop the meta tag into your <head> to enforce compatibility mode
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

This is unfortunately just a guess and it would be good if you provide more information here. This may also be connected with browsers supported by your particular build.

I have added that to the head in the past but it didn’t seem to change anything. This is a project I inherited and still don’t know much about sage but I believe it is version 9.0.9

I just saw that CustomEvent is not compatible in IE and that I may need a polyfill. Im not sure if there is a custom event so I may need to check that path.

yeah I just added the custom-event-polyfill to the routes file with the only custom event I could find, this didn’t change anything for me as far as I could tell.

You can find the staging site at staging.pharmacistadvice.com.au.