0

I'm using Vue.js for a project, unsurprisingly there are issues in IE11. I narrowed down the issue, and it seems it's a problem with a plugin/component I'm using named "lottie-vuejs".

In IE11 I get an error: SCRIPT1009: Expected '}'

When I click on the error to see where it's coming from I can see a method in the compiled app.js file:

loadJsonData: async function loadJsonData(path) {
      return await axios__WEBPACK_IMPORTED_MODULE_1___default.a.get("/" + path).then(function (response) {
        return response.data;
      });
    }

I have tried a promise-polyfill with no luck, and Internet Explorer 11 only renders my website if I remove the import for lottie-vuejs from app.js.

Is there a way I can prevent this from being imported if the browser is detected to be Internet Explorer 11?

I have tried wrapping the import in an IF statement and evaluating it to be false (as a test), but I got an error in my terminal when compiling:

What I tried in app.js:

if(1 + 1 == 3){
    import LottieAnimation from 'lottie-vuejs' // import lottie-vuejs
    Vue.use(LottieAnimation); // add lottie-animation to your global scope
}

With the error:

'import' and 'export' may only appear at the top level

I'm using Vue.JS and Laravel if it helps with the solution.

ImranR
  • 516
  • 2
  • 13
  • 30
  • This package wasn't built properly. I'd suggest to try to downgrade it or use something less buggy. https://github.com/gladwinbobby/lottie-vue-js-wrapper seems to be fine. – Estus Flask Feb 07 '20 at 19:05
  • ok thanks, I will try using the one you mentioned instead - do you know if this works in IE11? – ImranR Feb 08 '20 at 10:30
  • I cannot guarantee that but I'd expect that. The problem with lottie-vuejs is that it wasn't transpiled, so it's ES2017 code that won't work in any dated browser, this isn't common for third-party packages. – Estus Flask Feb 08 '20 at 11:19
  • @EstusFlask, unfortunately, that one doesn't work either with the exact same error message. Is there no way I can just prevent this from loading in IE11 from app.js? – ImranR Feb 09 '20 at 18:37
  • You can totally make it work in IE. This depends a lot on your setup. Is it vue-cli project? You need to make sure all modules are compiled. See https://cli.vuejs.org/config/#transpiledependencies . You need to list this module there. Also make sure that Babel was configured to compile to ES5 and not higher. – Estus Flask Feb 09 '20 at 19:16
  • Ok thanks for your help, I managed to find another package that seems older but more stable. So far it works on IE11 when the package is imported in app.js, so now it will just be a matter of repurposing my code..fingers crossed! – ImranR Feb 09 '20 at 21:30
  • Thanks for sharing the solution for the issue. I suggest you post your solution as an answer for this thread and try to mark your own answer as an accepted answer for this question after 48 hrs when it is available to mark. It can help other community members in the future in similar kinds of issues. Thanks for your understanding – Deepak-MSFT Feb 10 '20 at 04:00

1 Answers1

0

As a workaround for my issue, I used a different package that is older and more stable: https://www.npmjs.com/package/vue-lottie-ssr

The package I was using wasn't built properly. This now works in IE11 as expected minus the expected styling issues.

ImranR
  • 516
  • 2
  • 13
  • 30