b-form-checkbox assign is not a function

[JavascriptMick]

Describe the bug

in Vue 3 + vue-compat. When setting v-model on a b-form-checkbox component results in a runtime error when clicking the switch. Does not occur with a standard input field.

Steps to reproduce the bug

1. use b-form-checkbox in a view or component
2. set v-model to a boolean property
3. click switch/checkbox
4. Error

Expected behavior

No runtime Error.

Versions

Libraries:

• BootstrapVue: 2.23.1
• Bootstrap: 4.6.2
• Vue: 3.3.7

Environment:

• Device: Macbook Pro
• OS: MacOS Sonoma 14.0
• Browser: Chrome
• Version: Version 118.0.5993.117 (Official Build) (arm64)

Demo link

minimal repro on stackblitz

https://stackblitz.com/edit/bootstrap-vue-with-compat-fsfglw?file=components%2FHelloBootstrap.vue

Additional context

in my application, this crashes UI with 'Uncaught runtime Errors'.. in the stackblitz demo, only logs error to console.

When I debug down into the vue.js code, it seems that this call...

const vModelCheckbox = {
...
const assign = el[assignKey]; //yields undefined
....
assign(getCheckboxValue(el, checked)); //assign is not a function as it is undefined (boom)

where: assignKey is Symbol(_assign), this yields undefined, creating the error later

It may be related to this (vuejs/core#4121)

[Ryan Eastabrook]

We are seeing this exact error during our upgrade to Vue 3.3.7. In addition, we're seeing Uncaught TypeError: el[assignKey] is not a function when changing the selected option in a dropdown. If we downgrade to 3.3.4 the error is not thrown.

[Darrin Nagengast]

possibly the same issue as #7181 ?

[stephanestermann]

Same problem. Had to downgrade to v3.3.4...

[JavascriptMick]

@darrinmn9 , I think definitely the same root cause (vuejs/core#8681) and a similar issue. How do we fix it? the other issue is also open and symbols are hands off apparently

this way?

assignSymbol = Object.getOwnPropertySymbols(el).find(s => s.description === '_assign');

[JavascriptMick]

ok, following the @kalekseev example, I have forked and tried adding this to src/vue.js...

  const originalVModelCheckBoxCreated = Vue.vModelCheckbox.created
  const originalVModelCheckBoxBeforeUpdate = Vue.vModelCheckbox.beforeUpdate

  Vue.vModelCheckbox.created = function(el, binding, vnode) {
    const assignSymbol = Object.getOwnPropertySymbols(el).find(s => s.description === '_assign')
    if (assignSymbol && !el[assignSymbol]) {
      el[assignSymbol] = () => {}
    }
    originalVModelCheckBoxCreated.call(this, el, binding, vnode)
  }
  Vue.vModelCheckbox.beforeUpdate = function(el, binding, vnode) {
    const assignSymbol = Object.getOwnPropertySymbols(el).find(s => s.description === '_assign')
    if (assignSymbol && !el[assignSymbol]) {
      el[assignSymbol] = () => {}
    }
    originalVModelCheckBoxBeforeUpdate.call(this, el, binding, vnode)
  }

but when I import the locally built version of bootstrap-vue into my project, it appears that the 'VUE' that I am monkeypatching is not the same 'VUE' that is called from the code so it is not really working....

My Monkeypatching code..
webpack://web-client/clonedown/bootstrap-vue/esm/vue.js?58eb

the 'VUE' I am monkeypatching...
webpack://web-client/clonedown/bootstrap-vue/node_modules/@vue/compat/dist/vue.runtime.esm-bundler.js?c64a

The 'VUE' that actually gets called (not patched)
webpack://web-client/node_modules/@vue/compat/dist/vue.runtime.esm-bundler.js?fe26

Can any NPM/Yarn Gurus tell me what I am doing wrong in my testing?

[JavascriptMick]

fwiw, my workaround for now is to replace b-form-checkbox with...

        <div class="custom-control custom-switch ml-2">
          <input
            v-model="myModelVariable"
            class="custom-control-input"
            id="my-id"
            type="checkbox"
            value="true" /><label class="custom-control-label" for="my-id"
            >My Label</label
          >
        </div>

[Matthew Clark]

There is a similar problem with vue-compat / bootstrap-vue and the SELECT input component.

I wish there was a workaround, since I can't go back to Vue 3.3.4 due to other library constraints.

[helenezspeer]

I'm getting this same error using Vue 3.3.4.

[Jacques Fleischer]

I'm getting this same error using Vue 3.3.4.

@helenezspeer You need to make sure that you are not using ^3.3.4 but rather 3.3.4 and the same thing for @vue/compat

[helenezspeer]

Is it possible that the same error in the Radio Group component is not fixed by downgrading to 3.3.4? Even the exact version is not helping me with this.

As Vue continues to fix bugs, the cost of staying at 3.3.4 increases. Is there a possibility of fixing this in bootstrap-vue?

[Tom De Smet]

We have the exact same issue, but downgrading to 3.3.4 seems to solve the Radiogroup problem for us though.
But of course this is not a solution but a bad workaround. I still need to test wether this downgrade affects other libraries for us.