1

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

Max K
  • 71
  • 1
  • 11
  • see https://github.com/bootstrap-vue/bootstrap-vue/issues/5196 – Lawrence Cherone Mar 26 '22 at 17:04
  • Oh so install instructions for Vue *CLI* 3. Are not for version of vue but for version of cli interface – Max K Mar 26 '22 at 18:13
  • 1
    @MaxK The GitHub issue tells you that `bootstrap-vue` does not yet support Vue 3. The installation instructions tell you to `yarn add @vue/cli`, which installs the `latest` tag. It does not tell you install Vue CLI 3. – tony19 Mar 26 '22 at 21:11

1 Answers1

-1

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.