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.

Error in v-on handler: "TypeError: Function expected"

See original GitHub issue

Describe the bug

I have problem with b-form-select in IE 11. In Chrome or Firefox it works fine. On selecting some value from select I get error in console:

[Vue warn]: Error in v-on handler: “TypeError: Function expected”

found in
---> <BFormSelect>
            <App> at src/App.vue
                 <Root>

Steps to reproduce the bug

Test code is:

<template>
    <div id="app">
        <b-form-select v-model="selected" :options="options"></b-form-select>
        <b-form-select v-model="selected" :options="options" size="sm" class="mt-3"></b-form-select>
        <div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                selected: null,
                options: [
                    { value: null, text: 'Please select an option' },
                    { value: 'a', text: 'This is First option' },
                    { value: 'b', text: 'Selected Option' },
                    { value: { C: '3PO' }, text: 'This is an option with object value' },
                    { value: 'd', text: 'This one is disabled', disabled: true }
                ]
            }
        }
    }
</script>

Open page in IE.
Select some value from first select
Check exception in console

Expected behavior

Exception should not be thrown, both selects should have the same value and selected value should be shown.

Versions

Libraries:

BootstrapVue: 2.0.0-rc.28
Bootstrap: 4.3.1
Vue: 2.6.10

Environment:

Device: PC
OS: Windows 7
Browser: Internet Explorer 11
Version: 11.0.9600.19431

Additional context

I tried to install:

npm install core-js regenerator-runtime intersection-observer

and add to the top of main.js file:

import 'core-js'
import 'regenerator-runtime/runtime'
import 'intersection-observer' // Optional

It didn’t help.

Issue Analytics

State:
Created 4 years ago
Comments:7 (3 by maintainers)

Top GitHub Comments

2reactions

kjurocommented, Aug 22, 2019

I added to the <head> in index.html: <script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?features=Array.from"></script> It seems to work now. Thanks.

0reactions

tmorehousecommented, Oct 9, 2019

Also note babel polyfill is now no longer maintained. core-js polyfill is probably a better bet.

core-js does polyfill Array.prototype.from: https://github.com/zloirock/core-js/tree/master/packages/core-js

Just make sure core-js is imported before anything else is imported. If using Nuxt.js, core-js is automatically added (usually)

If using a javascript minifier that performs dead code elimination (DCE), be cautious that it might clear out the polyfills. core-js is not marked as side effect free, so most bundlers/minifiers should keep all the code and not perform DCE.