Updating old very old application

[volker-heidema-9to5]

I am updating a ver very old project with brunch, bootstrap and bootstrap-vue
Can someone please help me or point me into the right direction?

Old package.json

{
"repository": {},
"license": "MIT",
"scripts": {
"deploy": "brunch build --production",
"watch": "brunch watch --stdin",
"build": "brunch build"
},
"dependencies": {
"axios": "^0.24.0",
"bootstrap": "=4.0.0-alpha.5",
"bootstrap-vue": "^0.5.1",
"chart.js": "^2.8.0",
"dateformat": "^2.0.0",
"element-ui": "^1.2.8",
"file-saver": "^2.0.5",
"font-awesome": "^4.7.0",
"lodash": "^4.17.21",
"moment": "^2.29.1",
"phoenix": "^1.5.7",
"phoenix_html": "^2.14.3",
"vue": "^2.1.10",
"vue-brunch": "^2.0.0",
"vue-chartjs": "^2.5.5",
"vue-color": "^2.0.6",
"vue-multiselect": "^2.0.0-beta.13",
"vue-resource": "^1.0.3",
"vue-router": "^2.1.1",
"vuedraggable": "^2.15.0",
"vuelidate": "^0.7.0",
"vuex": "^2.1.0",
"vuex-router-sync": "^4.1.0"
},
"devDependencies": {
"babel-brunch": "^6.0.0",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-preset-es2015": "^6.22.0",
"babel-preset-es2016": "^6.22.0",
"babel-runtime": "^6.22.0",
"brunch": "^2.10.17",
"clean-css-brunch": "^2.10.0",
"copycat-brunch": "^1.1.0",
"css-brunch": "^2.10.0",
"javascript-brunch": "^2.10.0",
"sass-brunch": "^3.0.0",
"uglify-js-brunch": "~2.0.1"
}
}

New package.json

{
"repository": {},
"license": "MIT",
"scripts": {
"deploy": "brunch build --production",
"watch": "brunch watch --stdin",
"build": "brunch build"
},
"dependencies": {
"axios": "^0.24.0",
"bootstrap": "^5.1.3",
"bootstrap-vue": "^2.21.2",
"chart.js": "^2.9.4",
"dateformat": "^2.2.0",
"element-ui": "^1.4.13",
"file-saver": "^2.0.5",
"font-awesome": "^4.7.0",
"lodash": "^4.17.21",
"moment": "^2.29.1",
"phoenix": "^1.6.5",
"phoenix_html": "^3.2.0",
"vue": "^2.1.10",
"vue-brunch": "^2.0.3",
"vue-chartjs": "^2.5.5",
"vue-color": "^2.0.6",
"vue-multiselect": "^2.0.0-beta.13",
"vue-resource": "^1.0.3",
"vue-router": "^2.1.1",
"vuedraggable": "^2.15.0",
"vuelidate": "^0.7.0",
"vuex": "^2.1.0",
"vuex-router-sync": "^4.1.0"
},
"devDependencies": {
"babel-brunch": "^6.0.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-es2016": "^6.24.1",
"babel-runtime": "^6.26.0",
"brunch": "^2.10.17",
"clean-css-brunch": "^3.0.0",
"copycat-brunch": "^1.1.1",
"css-brunch": "^2.10.0",
"javascript-brunch": "^2.10.0",
"sass-brunch": "^3.0.1",
"uglify-js-brunch": "~2.10.0"
}
}

New app.js

import { BootstrapVue } from "bootstrap-vue";
import Element from "element-ui";
import "phoenix_html";
import Vue from "vue";
import Multiselect from "vue-multiselect";
import VueResource from "vue-resource";
import draggableOffer from "vuedraggable";
import main from "./main.vue";
import router from "./router";
import store from "./store";

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

Vue.use(Element);
Vue.use(BootstrapVue);
Vue.use(VueResource);
Vue.component("Multiselect", Multiselect);
Vue.component("draggableOffer", draggableOffer);

// this is necessary until we deal with k8s redirects
if (window.location.hostname !== "localhost") {
window.location.protocol = "https:";
}

const app = new Vue({
el: "#app",
store,
router,
render: (h) => h(main),
});

export { app, store };

When I run the project I get a certain error in the terminal:
volker@Volkers-MacBook-Pro jafolders-admin % brunch watch --server
11:19:59 - info: application started on http://localhost:3000/
11:20:02 - info: compiling
11:20:05 - error: Processing of js/app.js failed. Error: Could not load module 'bootstrap-vue/build/bootstrap-vue.common.js' from '/Users/volker/Documents/9to5/jafolders-admin/js'. Possible solution: run npm install.
Stack trace was suppressed. Run with LOGGY_STACKS=1 to see the trace.
11:20:05 - info: compiled 238 files into 2 files, copied 45 in 8.3 sec
11:20:05 - info: [copycat] copied 6 files (0 files were not modified)

And the browser inspector shows :
app.js:62 Uncaught Error: Cannot find module 'js/app' from '/'
at require (app.js:62)
at app.js:80533

[sidneygijzen]

One thing I noticed is that your new package.json is trying to use Bootstrap 5 with BootstrapVue 2.21.2. Bootstrap 5 is not yet supported (see #5507). BootstrapVue currently only supports Bootstrap 4 and Vue 2.

[volker-heidema-9to5]

Thanks for the reply :)
I have also tried with the last version 4.6.1. replying, I have update the project as far as I could.
I'll ask again if I run into the same issue next time I try to update the deps.

[sidneygijzen]

You're welcome.

I am not completely sure how I should interpret your reply 🙂 Is the issue with BootstrapVue resolved? Or are you still seeing errors related to BootstrapVue?

[volker-heidema-9to5]

I am currently working on other projects, but next time I am upgrading the deps I'll encounter the same issue.
Thanks for your time :)