How can I prevent an import in App.js if browser is Internet Explorer 11

Question

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.

Answer 1

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.