question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Usage of b-dropdown or b-nav-item-dropdown throws TypeError: Invalid calling object in IE11

See original GitHub issue

Describe 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.

image

Steps to reproduce the bug

  1. Use BootstrapVue in a new Vue component
  2. Ensure core-js and regenerator-runtime/runtime are imported
  3. 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:closed
  • Created 4 years ago
  • Comments:9 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
AlexLu202commented, Dec 29, 2019

I assume you are using babel 7. For some reason, babel 7 stops transpiling imported module. That’s probably the reason why

0reactions
jgsestrichcommented, May 4, 2020

FWIW, this error is also being thrown when a b-modal pops up a few minutes later after a session timeout.

I have run into this exact problem; did you every resolve the issue?

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found