Expected behavior

My program runs smoothly in Chrome, Edge and Safari. I would expect it to run smoothly in IE 11 too.

I am using vue-cli version 3.5.5 with babel configuration, so I am expecting vue-cli to handle all the babel polyfill configuration. I tried to check what is on the internet, but I see many different solutions based on used versions and configuration. I need your help on this.

Actual behavior

I tried to run the application both in dev and prod environment. At first, there is no display. I hit F12 to see what's wrong, but I see no console message or anything. When I hit F5 and restore the page, then I see that the navigation has occured. Still, no display on the browser. And I get an error message in the F12 console which says:

SCRIPT1003: Expected ':' app.js (13573,1)

When I check the app.js in the debugger tab, I see that the error happens in

./node_modules/mdbvue/src/mixins/waves.js

Resources (screenshots, code snippets etc.)

Below is the code I pasted from line 13573

eval("webpack_require.r(webpack_exports);\n/* harmony import */ var _Waves_css__WEBPACK_IMPORTED_MODULE_0__ = webpack_require(/*! ./Waves.css */ \"./node_modules/mdbvue/src/mixins/Waves.css\");\n/* harmony import */ var _Waves_css__WEBPACK_IMPORTED_MODULE_0_default = /*#__PURE*/webpack_require.n(_Waves_css__WEBPACK_IMPORTED_MODULE_0__);\n\r\n\r\n/* harmony default export */ webpack_exports[\"default\"] = ({\r\n props: {\r\n waves: {\r\n type: Boolean,\r\n default: true\r\n },\r\n darkWaves: {\r\n type: Boolean,\r\n default: false\r\n }\r\n },\r\n methods: {\r\n wave(e) {\r\n if (this.waves) {\r\n this.target = e.target.classList.contains('ripple-parent') ? e.currentTarget : e.target.parentElement;\r\n this.getOffsets(e);\r\n this.waveData = { 'top' : e.pageY - this.offsetTop, 'left': e.pageX - this.offsetLeft, 'height': this.$el.offsetHeight, 'width': this.$el.offsetWidth };\r\n // for fixed elements\r\n if (this.wavesFixed) {\r\n this.waveData.top = e.clientY - this.offsetTop;\r\n }\r\n this.createRipple();\r\n this.rippleAnimate();\r\n this.rippleRemove(this.target, this.rippleElement);\r\n }\r\n },\r\n getOffsets(e) {\r\n if (this.target.offsetParent) {\r\n this.offsetLeft = this.target.offsetLeft;\r\n this.offsetTop = this.target.offsetTop;\r\n this.parentOffset = this.target.offsetParent;\r\n while (this.parentOffset) {\r\n this.offsetLeft += this.parentOffset.offsetLeft;\r\n this.offsetTop += this.parentOffset.offsetTop;\r\n this.parentOffset = this.parentOffset.offsetParent;\r\n }\r\n }\r\n },\r\n createRipple() {\r\n this.rippleElement = document.createElement('div');\r\n this.rippleElement.classList.add('ripple');\r\n this.rippleElement.style.top = this.waveData.top - (this.waveData.width / 2) + 'px';\r\n this.rippleElement.style.left = this.waveData.left - (this.waveData.width / 2) + 'px';\r\n this.rippleElement.style.height = this.waveData.width + 'px';\r\n this.rippleElement.style.width = this.waveData.width + 'px';\r\n if (this.darkWaves) {\r\n this.rippleElement.style.background = \"rgba(0, 0, 0, 0.2)\";\r\n }\r\n this.target.appendChild(this.rippleElement);\r\n },\r\n rippleAnimate() {\r\n this.rippleElement.classList.add('is-reppling');\r\n },\r\n rippleRemove(target, rippleElement) {\r\n this.remove = setTimeout(() => {\r\n target.removeChild(rippleElement);\r\n }, 600);\r\n }\r\n }\r\n});\r\n//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9ub2RlX21vZHVsZXMvbWRidnVlL3NyYy9taXhpbnMvd2F2ZXMuanMuanMiLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9ub2RlX21vZHVsZXMvbWRidnVlL3NyYy9taXhpbnMvd2F2ZXMuanM/NjcwZSJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgJy4vV2F2ZXMuY3NzJztcclxuXHJcbmV4cG9ydCBkZWZhdWx0IHtcclxuICBwcm9wczoge1xyXG4gICAgd2F2ZXM6IHtcclxuICAgICAgdHlwZTogQm9vbGVhbixcclxuICAgICAgZGVmYXVsdDogdHJ1ZVxyXG4gICAgfSxcclxuICAgIGRhcmtXYXZlczoge1xyXG4gICAgICB0eXBlOiBCb29sZWFuLFxyXG4gICAgICBkZWZhdWx0OiBmYWxzZVxyXG4gICAgfVxyXG4gIH0sXHJcbiAgbWV0aG9kczoge1xyXG4gICAgd2F2ZShlKSB7XHJcbiAgICAgIGlmICh0aGlzLndhdmVzKSB7XHJcbiAgICAgICAgdGhpcy50YXJnZXQgPSBlLnRhcmdldC5jbGFzc0xpc3QuY29udGFpbnMoJ3JpcHBsZS1wYXJlbnQnKSA/IGUuY3VycmVudFRhcmdldCA6IGUudGFyZ2V0LnBhcmVudEVsZW1lbnQ7XHJcbiAgICAgICAgdGhpcy5nZXRPZmZzZXRzKGUpO1xyXG4gICAgICAgIHRoaXMud2F2ZURhdGEgPSB7ICd0b3AnIDogZS5wYWdlWSAtIHRoaXMub2Zmc2V0VG9wLCAnbGVmdCc6IGUucGFnZVggLSB0aGlzLm9mZnNldExlZnQsICdoZWlnaHQnOiB0aGlzLiRlbC5vZmZzZXRIZWlnaHQsICd3aWR0aCc6IHRoaXMuJGVsLm9mZnNldFdpZHRoIH07XHJcbiAgICAgICAgLy8gZm9yIGZpeGVkIGVsZW1lbnRzXHJcbiAgICAgICAgaWYgKHRoaXMud2F2ZXNGaXhlZCkge1xyXG4gICAgICAgICAgdGhpcy53YXZlRGF0YS50b3AgPSBlLmNsaWVudFkgLSB0aGlzLm9mZnNldFRvcDtcclxuICAgICAgICB9XHJcbiAgICAgICAgdGhpcy5jcmVhdGVSaXBwbGUoKTtcclxuICAgICAgICB0aGlzLnJpcHBsZUFuaW1hdGUoKTtcclxuICAgICAgICB0aGlzLnJpcHBsZVJlbW92ZSh0aGlzLnRhcmdldCwgdGhpcy5yaXBwbGVFbGVtZW50KTtcclxuICAgICAgfVxyXG4gICAgfSxcclxuICAgIGdldE9mZnNldHMoZSkge1xyXG4gICAgICBpZiAodGhpcy50YXJnZXQub2Zmc2V0UGFyZW50KSB7XHJcbiAgICAgICAgdGhpcy5vZmZzZXRMZWZ0ID0gdGhpcy50YXJnZXQub2Zmc2V0TGVmdDtcclxuICAgICAgICB0aGlzLm9mZnNldFRvcCA9IHRoaXMudGFyZ2V0Lm9mZnNldFRvcDtcclxuICAgICAgICB0aGlzLnBhcmVudE9mZnNldCA9IHRoaXMudGFyZ2V0Lm9mZnNldFBhcmVudDtcclxuICAgICAgICB3aGlsZSAodGhpcy5wYXJlbnRPZmZzZXQpIHtcclxuICAgICAgICAgIHRoaXMub2Zmc2V0TGVmdCArPSB0aGlzLnBhcmVudE9mZnNldC5vZmZzZXRMZWZ0O1xyXG4gICAgICAgICAgdGhpcy5vZmZzZXRUb3AgKz0gdGhpcy5wYXJlbnRPZmZzZXQub2Zmc2V0VG9wO1xyXG4gICAgICAgICAgdGhpcy5wYXJlbnRPZmZzZXQgPSB0aGlzLnBhcmVudE9mZnNldC5vZmZzZXRQYXJlbnQ7XHJcbiAgICAgICAgfVxyXG4gICAgICB9XHJcbiAgICB9LFxyXG4gICAgY3JlYXRlUmlwcGxlKCkge1xyXG4gICAgICB0aGlzLnJpcHBsZUVsZW1lbnQgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdkaXYnKTtcclxuICAgICAgdGhpcy5yaXBwbGVFbGVtZW50LmNsYXNzTGlzdC5hZGQoJ3JpcHBsZScpO1xyXG4gICAgICB0aGlzLnJpcHBsZUVsZW1lbnQuc3R5bGUudG9wID0gdGhpcy53YXZlRGF0YS50b3AgLSAodGhpcy53YXZlRGF0YS53aWR0aCAvIDIpICsgJ3B4JztcclxuICAgICAgdGhpcy5yaXBwbGVFbGVtZW50LnN0eWxlLmxlZnQgPSB0aGlzLndhdmVEYXRhLmxlZnQgLSAodGhpcy53YXZlRGF0YS53aWR0aCAvIDIpICsgJ3B4JztcclxuICAgICAgdGhpcy5yaXBwbGVFbGVtZW50LnN0eWxlLmhlaWdodCA9IHRoaXMud2F2ZURhdGEud2lkdGggKyAncHgnO1xyXG4gICAgICB0aGlzLnJpcHBsZUVsZW1lbnQuc3R5bGUud2lkdGggPSB0aGlzLndhdmVEYXRhLndpZHRoICsgJ3B4JztcclxuICAgICAgaWYgKHRoaXMuZGFya1dhdmVzKSB7XHJcbiAgICAgICAgdGhpcy5yaXBwbGVFbGVtZW50LnN0eWxlLmJhY2tncm91bmQgPSBcInJnYmEoMCwgMCwgMCwgMC4yKVwiO1xyXG4gICAgICB9XHJcbiAgICAgIHRoaXMudGFyZ2V0LmFwcGVuZENoaWxkKHRoaXMucmlwcGxlRWxlbWVudCk7XHJcbiAgICB9LFxyXG4gICAgcmlwcGxlQW5pbWF0ZSgpIHtcclxuICAgICAgdGhpcy5yaXBwbGVFbGVtZW50LmNsYXNzTGlzdC5hZGQoJ2lzLXJlcHBsaW5nJyk7XHJcbiAgICB9LFxyXG4gICAgcmlwcGxlUmVtb3ZlKHRhcmdldCwgcmlwcGxlRWxlbWVudCkge1xyXG4gICAgICB0aGlzLnJlbW92ZSA9IHNldFRpbWVvdXQoKCkgPT4ge1xyXG4gICAgICAgIHRhcmdldC5yZW1vdmVDaGlsZChyaXBwbGVFbGVtZW50KTtcclxuICAgICAgfSwgNjAwKTtcclxuICAgIH1cclxuICB9XHJcbn07XHJcbiJdLCJtYXBwaW5ncyI6IkFBQUE7QUFBQTtBQUFBO0FBQUE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTsiLCJzb3VyY2VSb290IjoiIn0=\n//# sourceURL=webpack-internal:///./node_modules/mdbvue/src/mixins/waves.js\n");