Vuejs IE 11 error

.browserslistrc

> 1%
last 2 versions
not ie <= 10

README.md

Steps taken:

1. installed Buefy according to instructions https://buefy.github.io/documentation/start via yarn
2. Vue js app created with Vue CLI 3
3. We are using code splitting to code split deps for each page into its own chunk
4. Run yarn serve to serve locally

Error Observed

When I try to navigate to any page (any different route) other than the login page, I see the errors in the console. It appears the error that keeps it from rendering is the Syntax Error getting thrown on one of Buefy's files.

What I've tried:

1. removing all references to Buefy. This didn't really help bc we use it everywhere and I just get errors about it not finding the buefy component whenever it gets instantiated.
2. Googling error - can't seem to find anyone with same issue.

Ideas:

1. Maybe some part of Buefy is incompatible with IE11? But the components all load in IE11 if you view on their webpage... https://buefy.github.io/documentation/start

Related issues:

• IE doesn't support promises. This should be covered by the vue CLI and .browserlistrc settings for target browsers https://forum.vuejs.org/t/production-issue-vue-app-is-not-working-loading-in-internet-explorer/19854

Error Stacktrace

DOM7011: The code on this page disabled back and forward caching. For more information, see: http://go.microsoft.com/fwlink/?LinkID=291337
HTML1300: Navigation occurred.
[vue-router] Failed to resolve async component default: SyntaxError: Syntax error
[vue-router] uncaught error during route navigation:
SyntaxError: Syntax error
   {
      [functions]: ,
      __proto__: { },
      description: "Syntax error",
      message: "Syntax error",
      name: "SyntaxError",
      number: -2146827286,
      stack: "SyntaxError: Syntax error
   at ./node_modules/buefy/src/utils/helpers.js (/vendors~Dashboard~SearchForStudent~SearchStudentDetail~SectionDetail~SectionList~Settings.js:107:1)
   at __webpack_require__ (/app.js:768:12)
   at fn (/app.js:131:13)
   at eval code (eval code:2:22)
   at ./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./node_modules/buefy/src/components/loading/Loading.vue?vue&type=script&lang=js& (/vendors~Dashboard~SearchForStudent~SearchStudentDetail~SectionDetail~SectionList~Settings.js:143:1)
   at __webpack_require__ (/app.js:768:12)
   at fn (/app.js:131:13)
   at eval code (eval code:2:22)
   at ./node_modules/buefy/src/components/loading/Loading.vue?vue&type=script&lang=js&"
   }

[vuex-shared-mutations] Unable to parse shared mutation data
SyntaxError: Syntax error
   ""
   {
      [functions]: ,
      __proto__: { },
      description: "Syntax error",
      message: "Syntax error",
      name: "SyntaxError",
      number: -2146827286,
      stack: "SyntaxError: Syntax error
   at Anonymous function (eval code:55:9)"
   }

[vuex-shared-mutations] Unable to parse shared mutation data
SyntaxError: Syntax error
   ""
   {
      [functions]: ,
      __proto__: { },
      description: "Syntax error",
      message: "Syntax error",
      name: "SyntaxError",
      number: -2146827286,
      stack: "SyntaxError: Syntax error
   at Anonymous function (eval code:55:9)"
   }

main.js

import Vue from 'vue';

// https://buefy.github.io/documentation/start
import Buefy from 'buefy';
import 'buefy/dist/buefy.css';
import '@mdi/font/css/materialdesignicons.css'; // TODO - would importing via sass help build time & output size?

import App from './App';
import router from './router';
import store from './store';

Vue.use( Buefy );

Vue.config.productionTip = false;

new Vue( {
    router,
    store,
    render: ( h ) => h( App ),
} ).$mount( '#app' );

Syntax Error occurs on line 9

/***/ "./node_modules/buefy/src/utils/helpers.js":
/*!*************************************************!*\
  !*** ./node_modules/buefy/src/utils/helpers.js ***!
  \*************************************************/
/*! exports provided: getValueByPath, indexOf, isMobile, removeElement, escapeRegExpChars */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"getValueByPath\", function() { return getValueByPath; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"indexOf\", function() { return indexOf; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"isMobile\", function() { return isMobile; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"removeElement\", function() { return removeElement; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"escapeRegExpChars\", function() { return escapeRegExpChars; });\n/**\r\n * Get value of an object property/path even if it's nested\r\n */\r\nfunction getValueByPath(obj, path) {\r\n    const value = path.split('.').reduce((o, i) => o[i], obj)\r\n    return value\r\n}\r\n\r\n/**\r\n * Extension of indexOf method by equality function if specified\r\n */\r\nfunction indexOf(array, obj, fn) {\r\n    if (!array) return -1\r\n\r\n    if (!fn || typeof fn !== 'function') return array.indexOf(obj)\r\n\r\n    for (let i = 0; i < array.length; i++) {\r\n        if (fn(array[i], obj)) {\r\n            return i\r\n        }\r\n    }\r\n\r\n    return -1\r\n}\r\n\r\n/**\r\n * Mobile detection\r\n * https://www.abeautifulsite.net/detecting-mobile-devices-with-javascript\r\n */\r\nconst isMobile = {\r\n    Android: function () {\r\n        return (\r\n            typeof window !== 'undefined' &&\r\n            window.navigator.userAgent.match(/Android/i)\r\n        )\r\n    },\r\n    BlackBerry: function () {\r\n        return (\r\n            typeof window !== 'undefined' &&\r\n            window.navigator.userAgent.match(/BlackBerry/i)\r\n        )\r\n    },\r\n    iOS: function () {\r\n        return (\r\n            typeof window !== 'undefined' &&\r\n            window.navigator.userAgent.match(/iPhone|iPad|iPod/i)\r\n        )\r\n    },\r\n    Opera: function () {\r\n        return (\r\n            typeof window !== 'undefined' &&\r\n            window.navigator.userAgent.match(/Opera Mini/i)\r\n        )\r\n    },\r\n    Windows: function () {\r\n        return (\r\n            typeof window !== 'undefined' &&\r\n            window.navigator.userAgent.match(/IEMobile/i)\r\n        )\r\n    },\r\n    any: function () {\r\n        return (\r\n            isMobile.Android() ||\r\n            isMobile.BlackBerry() ||\r\n            isMobile.iOS() ||\r\n            isMobile.Opera() ||\r\n            isMobile.Windows()\r\n        )\r\n    }\r\n}\r\n\r\nfunction removeElement(el) {\r\n    if (typeof el.remove !== 'undefined') {\r\n        el.remove()\r\n    } else {\r\n        el.parentNode.removeChild(el)\r\n    }\r\n}\r\n\r\n/**\r\n * Escape regex characters\r\n * http://stackoverflow.com/a/6969486\r\n */\r\nfunction escapeRegExpChars(value) {\r\n    if (!value) return value\r\n\r\n    // eslint-disable-next-line\r\n    return value.replace(/[\\-\\[\\]\\/\\{\\}\\(\\)\\*\\+\\?\\.\\\\\\^\\$\\|]/g, '\\\\$&')\r\n}\r\n//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9ub2RlX21vZHVsZXMvYnVlZnkvc3JjL3V0aWxzL2hlbHBlcnMuanMuanMiLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9ub2RlX21vZHVsZXMvYnVlZnkvc3JjL3V0aWxzL2hlbHBlcnMuanM/MGNkOCJdLCJzb3VyY2VzQ29udGVudCI6WyIvKipcclxuICogR2V0IHZhbHVlIG9mIGFuIG9iamVjdCBwcm9wZXJ0eS9wYXRoIGV2ZW4gaWYgaXQncyBuZXN0ZWRcclxuICovXHJcbmV4cG9ydCBmdW5jdGlvbiBnZXRWYWx1ZUJ5UGF0aChvYmosIHBhdGgpIHtcclxuICAgIGNvbnN0IHZhbHVlID0gcGF0aC5zcGxpdCgnLicpLnJlZHVjZSgobywgaSkgPT4gb1tpXSwgb2JqKVxyXG4gICAgcmV0dXJuIHZhbHVlXHJcbn1cclxuXHJcbi8qKlxyXG4gKiBFeHRlbnNpb24gb2YgaW5kZXhPZiBtZXRob2QgYnkgZXF1YWxpdHkgZnVuY3Rpb24gaWYgc3BlY2lmaWVkXHJcbiAqL1xyXG5leHBvcnQgZnVuY3Rpb24gaW5kZXhPZihhcnJheSwgb2JqLCBmbikge1xyXG4gICAgaWYgKCFhcnJheSkgcmV0dXJuIC0xXHJcblxyXG4gICAgaWYgKCFmbiB8fCB0eXBlb2YgZm4gIT09ICdmdW5jdGlvbicpIHJldHVybiBhcnJheS5pbmRleE9mKG9iailcclxuXHJcbiAgICBmb3IgKGxldCBpID0gMDsgaSA8IGFycmF5Lmxlbmd0aDsgaSsrKSB7XHJcbiAgICAgICAgaWYgKGZuKGFycmF5W2ldLCBvYmopKSB7XHJcbiAgICAgICAgICAgIHJldHVybiBpXHJcbiAgICAgICAgfVxyXG4gICAgfVxyXG5cclxuICAgIHJldHVybiAtMVxyXG59XHJcblxyXG4vKipcclxuICogTW9iaWxlIGRldGVjdGlvblxyXG4gKiBodHRwczovL3d3dy5hYmVhdXRpZnVsc2l0ZS5uZXQvZGV0ZWN0aW5nLW1vYmlsZS1kZXZpY2VzLXdpdGgtamF2YXNjcmlwdFxyXG4gKi9cclxuZXhwb3J0IGNvbnN0IGlzTW9iaWxlID0ge1xyXG4gICAgQW5kcm9pZDogZnVuY3Rpb24gKCkge1xyXG4gICAgICAgIHJldHVybiAoXHJcbiAgICAgICAgICAgIHR5cGVvZiB3aW5kb3cgIT09ICd1bmRlZmluZWQnICYmXHJcbiAgICAgICAgICAgIHdpbmRvdy5uYXZpZ2F0b3IudXNlckFnZW50Lm1hdGNoKC9BbmRyb2lkL2kpXHJcbiAgICAgICAgKVxyXG4gICAgfSxcclxuICAgIEJsYWNrQmVycnk6IGZ1bmN0aW9uICgpIHtcclxuICAgICAgICByZXR1cm4gKFxyXG4gICAgICAgICAgICB0eXBlb2Ygd2luZG93ICE9PSAndW5kZWZpbmVkJyAmJlxyXG4gICAgICAgICAgICB3aW5kb3cubmF2aWdhdG9yLnVzZXJBZ2VudC5tYXRjaCgvQmxhY2tCZXJyeS9pKVxyXG4gICAgICAgIClcclxuICAgIH0sXHJcbiAgICBpT1M6IGZ1bmN0aW9uICgpIHtcclxuICAgICAgICByZXR1cm4gKFxyXG4gICAgICAgICAgICB0eXBlb2Ygd2luZG93ICE9PSAndW5kZWZpbmVkJyAmJlxyXG4gICAgICAgICAgICB3aW5kb3cubmF2aWdhdG9yLnVzZXJBZ2VudC5tYXRjaCgvaVBob25lfGlQYWR8aVBvZC9pKVxyXG4gICAgICAgIClcclxuICAgIH0sXHJcbiAgICBPcGVyYTogZnVuY3Rpb24gKCkge1xyXG4gICAgICAgIHJldHVybiAoXHJcbiAgICAgICAgICAgIHR5cGVvZiB3aW5kb3cgIT09ICd1bmRlZmluZWQnICYmXHJcbiAgICAgICAgICAgIHdpbmRvdy5uYXZpZ2F0b3IudXNlckFnZW50Lm1hdGNoKC9PcGVyYSBNaW5pL2kpXHJcbiAgICAgICAgKVxyXG4gICAgfSxcclxuICAgIFdpbmRvd3M6IGZ1bmN0aW9uICgpIHtcclxuICAgICAgICByZXR1cm4gKFxyXG4gICAgICAgICAgICB0eXBlb2Ygd2luZG93ICE9PSAndW5kZWZpbmVkJyAmJlxyXG4gICAgICAgICAgICB3aW5kb3cubmF2aWdhdG9yLnVzZXJBZ2VudC5tYXRjaCgvSUVNb2JpbGUvaSlcclxuICAgICAgICApXHJcbiAgICB9LFxyXG4gICAgYW55OiBmdW5jdGlvbiAoKSB7XHJcbiAgICAgICAgcmV0dXJuIChcclxuICAgICAgICAgICAgaXNNb2JpbGUuQW5kcm9pZCgpIHx8XHJcbiAgICAgICAgICAgIGlzTW9iaWxlLkJsYWNrQmVycnkoKSB8fFxyXG4gICAgICAgICAgICBpc01vYmlsZS5pT1MoKSB8fFxyXG4gICAgICAgICAgICBpc01vYmlsZS5PcGVyYSgpIHx8XHJcbiAgICAgICAgICAgIGlzTW9iaWxlLldpbmRvd3MoKVxyXG4gICAgICAgIClcclxuICAgIH1cclxufVxyXG5cclxuZXhwb3J0IGZ1bmN0aW9uIHJlbW92ZUVsZW1lbnQoZWwpIHtcclxuICAgIGlmICh0eXBlb2YgZWwucmVtb3ZlICE9PSAndW5kZWZpbmVkJykge1xyXG4gICAgICAgIGVsLnJlbW92ZSgpXHJcbiAgICB9IGVsc2Uge1xyXG4gICAgICAgIGVsLnBhcmVudE5vZGUucmVtb3ZlQ2hpbGQoZWwpXHJcbiAgICB9XHJcbn1cclxuXHJcbi8qKlxyXG4gKiBFc2NhcGUgcmVnZXggY2hhcmFjdGVyc1xyXG4gKiBodHRwOi8vc3RhY2tvdmVyZmxvdy5jb20vYS82OTY5NDg2XHJcbiAqL1xyXG5leHBvcnQgZnVuY3Rpb24gZXNjYXBlUmVnRXhwQ2hhcnModmFsdWUpIHtcclxuICAgIGlmICghdmFsdWUpIHJldHVybiB2YWx1ZVxyXG5cclxuICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZVxyXG4gICAgcmV0dXJuIHZhbHVlLnJlcGxhY2UoL1tcXC1cXFtcXF1cXC9cXHtcXH1cXChcXClcXCpcXCtcXD9cXC5cXFxcXFxeXFwkXFx8XS9nLCAnXFxcXCQmJylcclxufVxyXG4iXSwibWFwcGluZ3MiOiJBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7Iiwic291cmNlUm9vdCI6IiJ9\n//# sourceURL=webpack-internal:///./node_modules/buefy/src/utils/helpers.js\n");
/* 
^ ERROR happens on line 9
*/

@akuehnis - so I actually figured out what was causing the error in my case! Its kind of funny actually. It turned out the error was that I was using @import to import the buefy dependencies and then using them like or whatever in the code. The problem is that I was @import'ing files from /src that were not run through babel or anything, so they had es6 code in them that IE choked on. Since buefy is registered globally you don't have to @import the components to use them - you can just straight up use them in your template code after telling Vue to Vue.use(Buefy) once. SO after you've done that use and it should all work in IE.

Were you having this error with Buefy also? If so I'm surprised downgrading vue CLI would do anything to help...

@josh7weaver, I am not using Buefy, no. The problem came up just days ago when I installed a new package and did not go away when I uninstalled it. I then realized that vue-cli-service got updated. The downgrade solved it for now, however I am sure it will come up again.
Thank you for the tip regarding @import, I will check if I can find something similar in my code.