Usage of b-dropdown or b-nav-item-dropdown throws TypeError: Invalid calling object in IE11
See original GitHub issueDescribe the bug
I am setting up a menu navigation bar that contains a dropdown, and it requires support of IE11. When rendering in IE11, it is throwing a [Vue warn]: Error in v-on handler: "TypeError: Invalid calling object"
when clicking on the top-level dropdown item in the menu. This does not occur in Chrome.
I have all the polyfills installed (core-js, regenerator-runtime) and imported in my index.js. I am using Webpack.
Steps to reproduce the bug
- Use BootstrapVue in a new Vue component
- Ensure
core-js
andregenerator-runtime/runtime
are imported - For a simple reproduction, grab the example dropdown nav markup from the docs (https://bootstrap-vue.org/docs/components/nav#comp-ref-b-nav-item-dropdown)
// in main entry point
import 'core-js'
import 'regenerator-runtime/runtime'
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
new Vue({
el: '#app'
}
// in menu component
<template>
<div>
<b-nav pills>
<b-nav-item active>Active</b-nav-item>
<b-nav-item>Link</b-nav-item>
<b-nav-item-dropdown
id="my-nav-dropdown"
text="Dropdown"
toggle-class="nav-link-custom"
right
>
<b-dropdown-item>One</b-dropdown-item>
<b-dropdown-item>Two</b-dropdown-item>
<b-dropdown-divider></b-dropdown-divider>
<b-dropdown-item>Three</b-dropdown-item>
</b-nav-item-dropdown>
</b-nav>
</div>
</template>
Expected behavior
The dropdown is fully interactive and navigable in IE11 without any console errors.
Versions
Libraries:
- BootstrapVue: 2.1.0
- Bootstrap: 4.4.1
- Vue: 2.6.10
- Webpack: 4.40.2
Environment:
- Device: Windows
- OS: Windows 10
- Browser: IE 11
- Version: 11.476.18362.0 (Update version 11.0.160)
Issue Analytics
- State:
- Created 4 years ago
- Comments:9 (2 by maintainers)
Top Results From Across the Web
"Invalid calling object" error in IE11 · Issue #142 - GitHub
Calls to isFunction cause an error on IE11 since the last version. When lodash functions were transferred to utilities.js, this line was ...
Read more >IE throws ERROR TypeError: Invalid calling object. Works fine ...
The IE (irrespective of version) throws ERROR TypeError: Invalid calling object when tried to hit the api. On inspection found that the ...
Read more >TypeError invalid calling object using IE 11 : r/angular - Reddit
Hi everyone, I'm getting the error "invalid calling object" when i use IE on a function that makes an Http request, I'm using...
Read more >IE throws an "Invalid Calling Object" Exception for certain ...
TypeError : Invalid calling object. This only happens on Internet Explorer, primarily IE 11, but I've seen it on versions as old as...
Read more >"Error loading dependencies" in IE and older Chrome (51)
TypeError : Invalid calling object ... error first because it works fine in chrome and second because the console doesn't throw any errors....
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
I assume you are using babel 7. For some reason, babel 7 stops transpiling imported module. That’s probably the reason why
I have run into this exact problem; did you every resolve the issue?