Upgrade to Node 20 and some dependencies

package.json

@@ -2,6 +2,9 @@
   "name": "sotlas",
   "version": "0.1.0",
   "private": true,
+  "engines": {
+    "node": "20.x"
+  },
   "scripts": {
     "serve": "vue-cli-service serve",
     "prebuild": "vsvg -s ./svg-icons -t ./src/compiled-icons",
@@ -20,10 +23,10 @@
     "@fortawesome/vue-fontawesome": "^0.1.10",
     "@mapbox/mapbox-gl-draw": "github:manuelkasper/mapbox-gl-draw#sotlas",
     "@tmcw/togeojson": "^3.2.0",
-    "axios": "^1.6.3",
+    "axios": "^1.6.8",
     "buefy": "^0.8.20",
     "cheap-ruler": "^2.5.1",
-    "core-js": "^2.6.12",
+    "core-js": "^3.8.3",
     "filepond": "^4.30.4",
     "filepond-plugin-file-validate-type": "^1.2.5",
     "flagpack": "^1.0.5",
@@ -49,17 +52,17 @@
     "vuex": "^3.6.2"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.12.1",
-    "@vue/cli-plugin-eslint": "^3.12.1",
-    "@vue/cli-service": "^3.12.1",
+    "@babel/eslint-parser": "^7.24.1",
+    "@vue/cli-plugin-babel": "^5.0.8",
+    "@vue/cli-plugin-eslint": "^5.0.8",
+    "@vue/cli-service": "^5.0.8",
     "@vue/eslint-config-standard": "^4.0.0",
-    "babel-eslint": "^10.1.0",
-    "eslint": "^5.16.0",
-    "eslint-plugin-vue": "^5.2.3",
-    "git-revision-webpack-plugin": "^3.0.6",
-    "node-sass": "^6.0.1",
-    "sass": "^1.62.1",
-    "sass-loader": "^10.3.1",
+    "eslint": "^8.57.0",
+    "eslint-plugin-vue": "^9.24.0",
+    "git-revision-webpack-plugin": "^5.0.0",
+    "node-sass": "^9.0.0",
+    "sass": "^1.75.0",
+    "sass-loader": "^14.2.1",
     "vue-svgicon": "^3.2.9",
     "vue-template-compiler": "^2.7.14"
   },
@@ -72,9 +75,13 @@
       "plugin:vue/essential",
       "@vue/standard"
     ],
-    "rules": {},
+    "rules": {
+      "vue/multi-word-component-names": "off",
+      "vue/no-reserved-component-names": "off",
+      "vue/no-unused-vars": "off"
+    },
     "parserOptions": {
-      "parser": "babel-eslint"
+      "parser": "@babel/eslint-parser"
     },
     "globals": {
       "VERSION": true,

src/App.vue

@@ -24,5 +24,5 @@ $link: $blue;
 @import "~buefy/src/scss/buefy";
 @import "~flagpack/dist/flagpack.css";
 @import '~mapbox-gl/dist/mapbox-gl.css';
-@import '~@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css'
+@import '~@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
 </style>

src/main.js

@@ -22,7 +22,6 @@ import { FontAwesomeIcon, FontAwesomeLayers } from '@fortawesome/vue-fontawesome
 import '@/assets/global.css'
 import store from './store'
 import axios from 'axios'
-import { SnackbarProgrammatic as Snackbar } from 'buefy/dist/components/snackbar'
 
 library.add(faCheck, faCheckCircle, faInfoCircle, faExclamationTriangle, faExclamationCircle, faArrowUp, faPlus, faCheckDouble,
   faAngleRight, faAngleLeft, faAngleDown, faAngleUp, faEye, faEyeSlash, faCaretUp, faUpload, faLink, faHistory, faThList, faImages,
@@ -44,6 +43,8 @@ Vue.use(Buefy, {
 })
 Vue.use(MatchMedia)
 
+let myVue
+
 if (window.performance && performance.navigation.type === 1) {
   // Store last reload timestamp so user reloads can be detected despite SSO redirect
   sessionStorage.setItem('lastReload', new Date().getTime())
@@ -85,8 +86,10 @@ let lastError = null
 axios.interceptors.response.use(response => {
   return response
 }, error => {
-  if ((!lastError || new Date().getTime() - lastError > 9000) && (!error.response || error.response.status !== 404)) {
-    Snackbar.open({
+  if ((!lastError || new Date().getTime() - lastError > 9000) && (!error.response || error.response.status !== 404) && myVue) {
+    // SnackbarProgrammatic.open doesn't work with Webpack 5
+    // See https://github.com/buefy/buefy/issues/2299
+    myVue.$buefy.snackbar.open({
       duration: 9000,
       message: 'Network or server error while loading data, try again later',
       type: 'is-danger',
@@ -101,7 +104,7 @@ axios.interceptors.response.use(response => {
 })
 
 function startVue () {
-  new Vue({
+  myVue = new Vue({
     store,
     router,
     render: h => h(App),

src/mapsession.js

@@ -7,6 +7,7 @@ function reportMapSession () {
     return
   }
   axios.post(process.env.VUE_APP_API_URL + '/mapsession', { type: 'first' })
+    .catch(() => {})
   mapSessionReported = true
 }
 

vue.config.js

@@ -1,7 +1,7 @@
 const webpack = require('webpack')
-const GitRevisionPlugin = require('git-revision-webpack-plugin')
+const { GitRevisionPlugin } = require('git-revision-webpack-plugin')
 
-const gitRevisionPlugin = new GitRevisionPlugin()
+const gitRevisionPlugin = new GitRevisionPlugin({ branch: true })
 
 module.exports = {
   productionSourceMap: false,
@@ -14,7 +14,13 @@ module.exports = {
         'COMMITHASH': JSON.stringify(gitRevisionPlugin.commithash()),
         'BRANCH': JSON.stringify(gitRevisionPlugin.branch())
       })
-    ]
+    ],
+    resolve: {
+      fallback: {
+        fs: false,
+        path: false
+      }
+    }
   },
   publicPath: process.env.PUBLIC_PATH
 }