Bootstrap-vue does not work with IE11 due to deepFreeze
See original GitHub issueDescribe the bug
Basically, IE11 throws an error: “Symbol is undefined”, on the src/utils/object.js
file with deepFreeze
, which is the transpiled version of for (let prop of props)
:
export const deepFreeze = obj => {
// Retrieve the property names defined on object
const props = getOwnPropertyNames(obj)
// Freeze properties before freezing self
for (let prop of props) {
let value = obj[prop]
obj[prop] = value && isObject(value) ? deepFreeze(value) : value
}
return freeze(obj)
}
The transpiled code in boostrap-vue.esm.js
is
var deepFreeze = function deepFreeze(obj) {
// Retrieve the property names defined on object
var props = getOwnPropertyNames(obj); // Freeze properties before freezing self
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;
try {
for (var _iterator = props[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
var prop = _step.value;
var value = obj[prop];
obj[prop] = value && isObject(value) ? deepFreeze(value) : value;
}
} catch (err) {
_didIteratorError = true;
_iteratorError = err;
} finally {
try {
if (!_iteratorNormalCompletion && _iterator.return != null) {
_iterator.return();
}
} finally {
if (_didIteratorError) {
throw _iteratorError; /* this is where the error is */
}
}
}
return freeze(obj);
};
This is new to the rc23 version.
Steps to reproduce the bug
- Use bootstrap-vue
- Use internet explorer
Expected behavior
The error should not happen.
Versions
Libraries:
- BootstrapVue: 2.0.0-rc23
- Bootstrap: 4.3.1
- Vue: 2.6.10
Environment:
- Device: PC
- OS: Windows 10
- Browser: Internet Explorer
- Version: 11 (obviously 😄)
Issue Analytics
- State:
- Created 4 years ago
- Comments:5 (3 by maintainers)
Top Results From Across the Web
Bootstrap-vue does not work with IE11 due to deepFreeze
Basically, IE11 throws an error: "Symbol is undefined", on the src/utils/object.js file with deepFreeze , which is the transpiled version of for (let...
Read more >Is your Vue app not working in IE 11? Here's how to fix it.
The main reason why your Vue app is breaking in IE11 is because the browser does not support modern JavaScript syntax.
Read more >bootstrap-vue - UNPKG
The CDN for bootstrap-vue. ... 'function') throw TypeError(it + ' is not a function!');\n return it;\n};\n","// optional / simple context binding\nvar ...
Read more >IE11 + Bootstrap vue Issue focusable elements have multiple ...
Do you have any addons/extensions that may be causing any issues or conflicts? I do not see the issue on IE11 (docs site...
Read more >IE 11 and Bootstrap-vue starter template not rendering - Reddit
And paste that into an HTML doc, and then open up in IE11- it doesn't work. None of the bootstrap-vue content is recognised,...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Yeah i got it to work with a polyfill 👏, though
@babel/polyfill
was deprecated, i usedcore-js
instead, by importing it:import "core-js";
(typescript) orrequire('core-js')
(javascript)While #3526 solved the IE11 issue with
deepFreeze
, I’m still having the same issue with theBNavItemDropdown
component when I click on it.I couldn’t find why this happens as IE11 doesn’t provide much information…
I also noticed there is no issue with the
BDropdown
component.Finally the
BNavItemDropdown
component was working fine in IE11 without the Symbol polyfill when I was usingbootstrap-vue@2.0.0-rc.19
. Seems like it stopped working withrc.20
.That’s all the information I could get, hope this helps.