bootstrap-vue: Vue 2.5.1: Invalid value for option "components": expected an Object, but got Array.

Until fix is released, I worked around it using:

let originalVueComponent = Vue.component
Vue.component = function(name, definition) {
  if (name === 'bFormCheckboxGroup' || name === 'bCheckboxGroup' ||
      name === 'bCheckGroup' || name === 'bFormRadioGroup') {
    definition.components = {bFormCheckbox: definition.components[0]}
  }
  originalVueComponent.apply(this, [name, definition])
}
Vue.use(BootstrapVue)
Vue.component = originalVueComponent

putting together @kriomant and @Flygenring code, here is a complete workaround for Node, works for me on the entire bootstrap-vue import:

let originalVueComponent = Vue.component
Vue.component = function (name, definition) {
  if (Array.isArray(definition.components) && definition.components.length === 1) {
    definition.components = {[name]: definition.components[0]}
  }
  originalVueComponent.apply(this, [name, definition])
}

Vue.use(BootstrapVue)
Vue.component = originalVueComponent

Both of these have been fixed in the dev branch, and will be available when v1.0.0-beta.10 comes out (not sure when the release i going to happen, but hopefully soon).

This will all be cleared up once we get v1.0.0 release (soon I hope)

The new release of Bootstrap-Vue v1.0.0-beta.10 (which also uses the new Bootstrap V4.beta.2 CSS) should be available soon.

Looks like this has been fixed here: https://github.com/bootstrap-vue/bootstrap-vue/commit/09187ead52ae3c4c781584593167a6a6c3d487f5

beta.10 wont be released… we are removing the beta tag and releasing v1.0.0 mainline.

@tmorehouse this is what I see in the browser:

This (object key shortcut):

components: { bFormInput }

is compiled from ES6 by babel to:

components: {
  `bFormInput`: bFormInput
}

So I don’t think that is it.

I think it’s that this code:

components: { bFormCheckbox },

gets compiled into something like:

components: [bFormCheckbox],

which generates de warning. Not sure how to check what I’m saying.

@Flygenring,

I suppose an even more complete monkey patch would be as follows:

(function(v) {
  var componentFn = v.component
  v.component = function(name, definition) {
    if (Object.prototype.toString.call(definition.components) === "[object Array]") {
      var components = {}
      for (var i = 0; i < definition.components.length; i--) {
        var def = definition.components[i]
        components[def.name] = def.name
      }
      definition.components = components
    }
    componentFn.apply(this, [name, definition])
  }
})(window.Vue)

The one problem is that it assumes that all bootstrap vue components have defined their name property. I don’t believe this is the case.

I do like the workaround by @kriomant and @SReject’s additions until the fix is out! But it’s a little limited, so for the sake of completeness and people copying what they see, the substitution function shouldn’t define the particular items to handle and should use the name for the key instead of always “bFormCheckbox”

function(name, definition) {
    if(Array.isArray(definition.components) && definition.components.length === 1) {
        definition.components = {[name]: definition.components[0]};
    }
    originalVueComponent.apply(this, [name, definition])
}

The only breaking change is if you are importing components individually.

we have a new file structure (as can be seen in the dev branch, and the distribution version (or if you run yarn-build) has all components/directives available as es transpiled builds in the bootstrap-vue/es directory. Which should make importing individual components, and doing tree shaking (when importing the full library) much easier.

I have the same issue after upgrading vue cli today. I use <b-container>, <b-dropdown>, <b-dropdown-item> components in combination with vue-awesome (https://github.com/Justineo/vue-awesome)

I’m still getting the error. When should we expect the fix to be brought in?