Discover why this exception appears when using Vue Bootstrap in Vue.js 3.

In the last days I applied for a new job where Vue.js was a requirement to apply, in order to get in, I needed to present a test to design a dashboard with Bootstrap Vue.

While trying to set up a new project, the CLI offered me the possibility to work With Vue 2 and Vue 3 so I decided to go on with the latest version (Vue 3). After reading the documentation, getting comfortable with the way Vue.js works, I started to create some components and they work as expected. When I was ready to start with the bootstrap library, after the installation and after trying to import the library as it theoretically should:

// main.js
import App from './App.vue'
import { createApp } from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'

// Install BootstrapVue
App.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
App.use(IconsPlugin)

createApp(App).mount('#app')

When trying to build the project, the following exception will appear on the terminal:

config.js?228e:8 Uncaught TypeError: Cannot read property 'prototype' of undefined
    at eval (config.js?228e:8)
    at Module../node_modules/bootstrap-vue/esm/utils/config.js (chunk-vendors.js:3251)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (alert.js?5fda:1)
    at Module../node_modules/bootstrap-vue/esm/components/alert/alert.js (chunk-vendors.js:83)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (index.js?cca8:1)
    at Module../node_modules/bootstrap-vue/esm/components/alert/index.js (chunk-vendors.js:95)

This problem doesn't have solution till the date as Bootstrap Vue doesn't provide support for Vue 3 yet, however it seems that the support will arrive to production soon.

Solution

For now, I hope that you are starting a project from scratch as I did because you will need to downgrade your Vue.js project from version 3 to Vue.js 2.

Happy coding ❤️!


Sponsors