Descubre por qué aparece esta excepción al usar Vue Bootstrap en Vue.js 3.

En los últimos días me postulé a un nuevo trabajo donde Vue.js era un requisito para postular, para poder ingresar necesitaba presentar una prueba para diseñar un dashboard con Bootstrap Vue.

Mientras intentaba configurar un nuevo proyecto, la CLI me ofreció la posibilidad de trabajar con Vue 2 y Vue 3, así que decidí continuar con la última versión (Vue 3). Después de leer la documentación, sentirme cómodo con la forma en que funciona Vue.js, comencé a crear algunos componentes y funcionan como se esperaba. Cuando estaba listo para comenzar con la biblioteca de arranque, después de la instalación y después de intentar importar la biblioteca como debería teóricamente:

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

// Instalar BootstrapVue
App.use(BootstrapVue)
// Opcionalmente, instale el complemento de componentes del icono BootstrapVue
App.use(IconsPlugin)

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

Al intentar construir el proyecto, aparecio la siguiente excepción en la 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)

Este problema no tiene solución hasta la fecha, ya que Bootstrap Vue aún no brinda soporte para Vue 3, sin embargo, parece que el soporte llegará pronto a producción.

Solución

Por ahora, espero que estés comenzando un proyecto desde cero como lo hice yo porque deberás degradar tu proyecto Vue.js de la versión 3 a Vue.js 2.

Que te diviertas ❤️!


Conviertete en un programador más sociable

Patrocinadores