While attempting to integrate Bootstrap-Vue into my project that includes Vuex, Vue-Router, TypeScript, and Babel, I encounter an error in the browser.
To replicate
docker run -it --rm -p 8080:8080 node:17.7.2-alpineyarn global add @vue/cli
vue create my_app
vue add bootstrap-vue
After successfully running yarn serve, I see this error in the browser:
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)
I also attempted using yarn add bootstrap-vue bootstrap
This is how my main.ts file appears:
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');
The same error occurs in the browser when using this setup
I have tested this with both Vue installed on a Node Docker container and the one installed through yay on Arch Linux.
vue --version
@vue/cli 5.0.1