Uncaught TypeError when using Bootstrap with VueJS

Question

I am trying to integrate bootstrap with my vue project, but when I open my browser, my console gives the following error.

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:3262)
    at __webpack_require__ (app.js:854)
    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:94)
    at __webpack_require__ (app.js:854)
    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:106)

I ran $ vue add bootstrap-vue which created bootstrap-vue.js

import Vue from 'vue'

import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)

Vue Version: 3

Bootstrap Version: 4

Any suggestions on how to fix this error or install bootstrap on vue? Thanks

Haini · Accepted Answer · 2020-11-30 09:13:18Z

As per this Github issue and per their Vue-Bootstrap documentation it is currently not possible to use Vue3.x with Bootstrap since there are some major breaking changes.

This is mentioned in the issue:

Note there are quite a few breaking changes between Vue 2.x and Vue 3.x, which will need changes in BootstrapVue.

Vue.extend, which is used extensively, is not available in Vue 3.x. (it is replaced with createComponent() method exported by Vue 3.x)

You might be able to import Vue and createComponent first, and then set Vue.export = createComponent, and then import the 3rd party libraries (like PortalVue, BootstrapVue, etc).

Collectives™ on Stack Overflow

Uncaught TypeError when using Bootstrap with VueJS

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related