mdb not running properly in IE 11.379.17763.0


Topic: mdb not running properly in IE 11.379.17763.0

zafer inkaya asked 6 years ago

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");


Mikołaj Smoleński staff answered 6 years ago

Hello,

I've just tested demo App on Explorer and it's working fine. What are steps You made to install the App?

Best regards


zafer inkaya commented 6 years ago

Thanks for your answer.

I read some related issues in stackoverflow about similar problems and found an advice for beautify, and applied a similar method for my problem an it worked. I added the following code block in my vue.config.js file in the root directory

module.exports = { transpileDependencies: [/node_modules[/\\]mdbvue[/\\]/] }

Does this give you an idea about what may have gone wrong?

I made it work, but I want it to be the right solution, not a coincidental one.

Thanks


Mikołaj Smoleński staff commented 6 years ago

Hi there,

The problem is that waves.js is using ES6 standard which is not compatibile with Your IE. That's why You need to transpile MDB to the ES5 standard. It's a good solution.

Best regards


zafer inkaya commented 6 years ago

Thanks. It would be nice if you can add it somewhere in your documentation. It is hard to find such solutions even if they seem simple at the end :)


Mikołaj Smoleński staff commented 6 years ago

Thanks for all Your remarks!


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 5.1.1
  • Device: Thinpad x1
  • Browser: ie 11
  • OS: windows 10
  • Provided sample code: No
  • Provided link: No