CODEWITHSUNDEEP
vue.jsbootstrap-4typeerror
Alan
Alan

Reputation: 129

Uncaught TypeError when using Bootstrap with VueJS

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

Upvotes: 3

Views: 5512

Answers (1)

Haini
Haini

Reputation: 964

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).

Upvotes: 1

Related Questions