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!
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- 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