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)

[ryaneastabrook]

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.

[darrinmn9]

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>

[GORGES]

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.

[jpfleischer]

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?

[TomDeSmet]

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.

[Waxoussou]

Hello,
I'm having the same issue on latest version : 3.4.21, with @vue/compat.
Not any news on that subject since lastest release ?

[FrancielleSales]

Hello!

I was having the same problem with checkboxes and radio buttons in the project I was upgrading to vue version 3.4.21.
It seems that unfortunately the problem has not yet been resolved, so I followed the suggestions above to downgrade to version 3.3.4 of vue and @vue/compat and "resolved" the problem. I recommend check vue and @vue/compat version after downgrade if the problem persists.

[Waxoussou]

Hello!

I was having the same problem with checkboxes and radio buttons in the project I was upgrading to vue version 3.4.21. It seems that unfortunately the problem has not yet been resolved, so I followed the suggestions above to downgrade to version 3.3.4 of vue and @vue/compat and "resolved" the problem. I recommend check vue and @vue/compat version after downgrade if the problem persists.

Hey, thanks for your reply. (haven't see that one earlier sorry).
We finally did the same thing. We were looking for an alternative solution, since downgrading to a previous version did not seem right but for the moment we have not found any other.

[TomDeSmet]

I did, I'm in the process of removing Vue-Bootstrap from all our applications and replacing it with custom components or another library that is being kept up-to-date where needed.
But that is a rather drastic solution of course.
But running Vue-compat and old package versions in production is not the way to go either. So we have to move on.

[FrancielleSales]

Hey, thanks for your reply. (haven't see that one earlier sorry). We finally did the same thing. We were looking for an alternative solution, since downgrading to a previous version did not seem right but for the moment we have not found any other.

You are welcome! In the project I'm working on, we ended up deciding to do the same thing that @TomDeSmet mentioned.

It was a lot of work to change in our case, but we made this decision considering:

1. we were able to update all the other libraries in our project without any problems;
2. first version of Vue 3 came out almost 4 years ago and there is still no date for a version from bootstrap-vue that is compatible (just a promise).

But I hope a compatible version comes out soon, I really like this library and I wish for your success!