When trying to add Boostrap-Vue to my project with Vuex, Vue-Router, TypeScript and babel I get error in the browser.

To reproduce

docker run -it --rm -p 8080:8080 node:17.7.2-alpine

yarn global add @vue/cli

vue create my_app

vue add bootstrap-vue

I get this error in borwser after succesful yarn serve

app.js:953 Uncaught TypeError: Cannot read properties of undefined (reading 'prototype')
    at eval (config.js?b761:6:1)
    at Module../node_modules/bootstrap-vue/esm/utils/config.js (chunk-vendors.js:3415:1)
    at __webpack_require__ (app.js:950:33)
    at fn (app.js:1205:21)
    at eval (props.js:15:65)
    at Module../node_modules/bootstrap-vue/esm/utils/props.js (chunk-vendors.js:3668:1)
    at __webpack_require__ (app.js:950:33)
    at fn (app.js:1205:21)
    at eval (model.js:8:64)
    at Module../node_modules/bootstrap-vue/esm/utils/model.js (chunk-vendors.js:3591:1)

And also tried with yarn add bootstrap-vue bootstrap

This is how my main.ts looks:

import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue';

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

const myApp = createApp(App).use(store).use(router);

myApp.use(BootstrapVue);
myApp.use(BootstrapVueIcons);

myApp.mount('#app');

where I get the same error in browser

I have tried this with vue installed in node docker and also the one installed through yay on Arch Linux.

vue --version @vue/cli 5.0.1

CodePudding user response：

If you are using Vue.js version 3 and want to use the latest Bootstrap version on a new app, you might want to check this thread : Using Bootstrap 5 with Vue 3

The latest version of Bootstrap does not use jquery anymore and thus can be used directly, without installing bootstrap-vue.