Version

3.1.0-beta.6

Reproduction link

https://github.com/tamland/bootstrap-vue3-compat

Steps to reproduce

1. Create a new project that uses @vue/compat v3.1.0-beta.6 and bootstrap-vue 2.21.2 or clone https://github.com/tamland/bootstrap-vue3-compat.
2. Run npm run serve to start the dev server.
3. Open the application in any browser.

What is expected?

BootstrapVue components work.

What is actually happening?

Some of the simple components like b-btn do work, but most components do not, resulting in the following error:

vue.runtime.esm-bundler.js?1786:4627 Uncaught TypeError: h.bind is not a function
    at eval (vue.runtime.esm-bundler.js?1786:4627)
    at Array.map (<anonymous>)
    at callHookWithMixinAndExtends (vue.runtime.esm-bundler.js?1786:4627)
    at callSyncHook (vue.runtime.esm-bundler.js?1786:4612)
    at applyOptions (vue.runtime.esm-bundler.js?1786:4358)
    at finishComponentSetup (vue.runtime.esm-bundler.js?1786:9868)
    at setupStatefulComponent (vue.runtime.esm-bundler.js?1786:9778)
    at setupComponent (vue.runtime.esm-bundler.js?1786:9709)
    at mountComponent (vue.runtime.esm-bundler.js?1786:7228)
    at processComponent (vue.runtime.esm-bundler.js?1786:7199)

The problem is caused by render function API change.

In 2.x, the render function would automatically receive the h function as an argument. In 3.x h is now globally imported instead of passed to render functions as an argument.

The compatibility build should provide a wrapper that restores the h function argument of render functions.

This is holding back Vue 3 migration in BootstrapVue.

The migration build does handle the render function h compat behavior: https://github.com/vuejs/vue-next/blob/master/packages/runtime-core/src/compat/renderFn.ts#L44

The reproduction error in fact has nothing to do with render function behavior. The root cause is that some BoostrapVue components somehow declares lifecycle hooks as nested arrays, e.g. beforeCreate hook in the shape of [[fn], fn]. This probably has to do with mixin merging behavior for the compat build.

Just tested with latest master branch and the modal is working as intended.

Closing, but note this doesn't guarantee that compat build can run every Bootstrap Vue component since it's a pretty complex library. Please open separate issues if there are problems with other components.

Excellent, thank you!