Revert "MT#63046 Update @quasar/app-webpack and relevant libs"

This reverts commit b70ea928dd.

NGCP-Flow: mr12.5

Reason for revert: The new Quasar is struggling to resolve assets path's and crashes the app.

Change-Id: Id4d53d9f660c02c77642c0e5feb455caa0b56a81
(cherry picked from commit 69c8b370f8)

.gitignore

@@ -40,4 +40,4 @@ yarn-error.log*
 /junit.xml
 /test/jest/coverage
 
-quasar.config.dev.js
+quasar.conf.dev.js

.postcssrc.js

@@ -0,0 +1,8 @@
+// https://github.com/michael-ciniawsky/postcss-load-config
+
+module.exports = {
+    plugins: [
+        // to edit target browsers: use "browserslist" field in package.json
+        require('autoprefixer')
+    ]
+}

bin/config-create.js

@@ -1,13 +1,9 @@
-import fs from 'fs'
-import path from 'path'
-import { fileURLToPath } from 'url'
+/* eslint-disable */
+const path = require('path')
+const fs = require('fs')
 
-// In ES modules, __dirname is not available, so we create it from import.meta.url
-const __filename = fileURLToPath(import.meta.url)
-const __dirname = path.dirname(__filename)
-
-const filePathTemplate = path.resolve(path.join(__dirname, '..', 'src', 'config', 'app.template.root.js'))
-const filePathConfig = path.resolve(path.join(__dirname, '..', 'src', 'config', 'app.js'))
+const filePathTemplate = path.resolve(__dirname + '/../src/config/app.template.root.js')
+const filePathConfig = path.resolve(__dirname + '/../src/config/app.js')
 const template = fs.readFileSync(filePathTemplate, 'utf8')
 const rendered = template.split('{{host}}').join(process.argv[2])
 fs.writeFileSync(filePathConfig, rendered)

package.json

@@ -33,11 +33,11 @@
     "async": "^3.2.2",
     "axios": "1.13.1",
     "content-disposition": "^0.5.4",
-    "core-js": "^3.45.1",
-    "crypto-browserify": "3.12.1",
+    "core-js": "^3.6.5",
+    "crypto-browserify": "^3.12.0",
     "decode-uri-component": "^0.4.0",
     "eslint-plugin-no-relative-import-paths": "1.6.1",
-    "eslint-plugin-unused-imports": "4.2.0",
+    "eslint-plugin-unused-imports": "4.1.4",
     "file-saver": "^2.0.2",
     "jest-junit": "^16.0.0",
     "jssip": "3.10.1",
@@ -45,14 +45,14 @@
     "loader-utils": "^3.2.1",
     "lodash": "4.17.21",
     "moment": "^2.29.4",
-    "npm": "^11.5.2",
+    "npm": "^11.5.1",
     "path": "0.12.7",
     "qrcode": "1.5.4",
     "quasar": "2.18.2",
     "stream-browserify": "^3.0.0",
     "terser": "^5.14.2",
     "tiny-emitter": "2.1.0",
-    "vue": "3.5.20",
+    "vue": "3.5.18",
     "vue-eslint-parser": "10.2.0",
     "vue-i18n": "11.1.11",
     "vue-resource": "^1.5.1",
@@ -65,17 +65,16 @@
   "devDependencies": {
     "@babel/eslint-parser": "^7.25.7",
     "@babel/plugin-transform-private-methods": "7.27.1",
-    "@quasar/app-webpack": "4.3.0",
+    "@quasar/app-webpack": "3.15.1",
     "@quasar/cli": "2.5.0",
     "@quasar/quasar-app-extension-testing": "2.2.0",
     "@quasar/quasar-app-extension-testing-unit-jest": "3.0.3",
     "@stylistic/eslint-plugin-js": "4.4.1",
     "@vue/test-utils": "2.4.6",
-    "autoprefixer": "10.4.21",
     "commander": "14.0.0",
     "decomment": "0.9.5",
     "dot-object": "2.1.5",
-    "eslint": "9.34.0",
+    "eslint": "9.32.0",
     "eslint-config-standard": "17.1.0",
     "eslint-plugin-import": "2.32.0",
     "eslint-plugin-jest": "29.0.1",
@@ -83,8 +82,8 @@
     "eslint-plugin-node": "11.1.0",
     "eslint-plugin-promise": "7.2.1",
     "eslint-plugin-quasar": "1.1.0",
-    "eslint-plugin-vue": "10.4.0",
-    "eslint-webpack-plugin": "5.0.2",
+    "eslint-plugin-vue": "10.3.0",
+    "eslint-webpack-plugin": "4.2.0",
     "glob": "11.0.3",
     "globals": "16.3.0",
     "is-valid-glob": "1.0.0",

postcss.config.mjs

@@ -1,8 +0,0 @@
-import autoprefixer from 'autoprefixer'
-
-export default {
-    plugins: [
-        // to edit target browsers: use "browserslist" field in package.json
-        autoprefixer
-    ]
-}

quasar.conf.dev.proxy.js

@@ -2,5 +2,5 @@ module.exports = {
     public: '',
     publicPath: '/v2/',
     proxyAPI2localhost: true,
-    proxyAPIFromURL: 'https://{{sipwiseVoipPlatformIPorFDQN}}:1443'
+    proxyAPIFromURL: 'https://{{sipwiseVoipPlatformIPorFDQN}}'
 }

quasar.conf.js

@@ -5,21 +5,17 @@
  */
 
 // Configuration for your app
-// https://quasar.dev/quasar-cli-webpack/quasar-config-file
+// https://quasar.dev/quasar-cli/quasar-conf-js
 
-import ESLintPlugin from 'eslint-webpack-plugin'
-import webpack from 'webpack'
+const ESLintPlugin = require('eslint-webpack-plugin')
+const webpack = require('webpack')
 
-export default async function (ctx) {
+module.exports = function (ctx) {
     let devServerConfig = {}
     try {
-        if (ctx.dev) {
-            // Use dynamic import for the dev config
-            const devConfig = await import('./quasar.config.dev.proxy')
-            devServerConfig = devConfig
-        }
+        devServerConfig = (ctx.dev) ? require('./quasar.conf.dev') : {}
     } catch (e) {
-        if (e.code === 'MODULE_NOT_FOUND' || e.code === 'ERR_MODULE_NOT_FOUND') {
+        if (e.code === 'MODULE_NOT_FOUND') {
             devServerConfig = {}
         } else {
             throw e
@@ -34,7 +30,6 @@ export default async function (ctx) {
         // --> boot files are part of "main.js"
         // https://quasar.dev/quasar-cli/boot-files
         boot: [
-            'store',
             'appConfig',
             'i18n',
             'api',
@@ -110,11 +105,7 @@ export default async function (ctx) {
                 ...process.env
             },
             vueRouterMode: 'hash', // available values: 'hash', 'history'
-            // It affects how URLs for bundled assets are generated in the final build.
-            // This determines the base path where the bundled JavaScript, CSS, and other assets will be served from.
-            publicPath: process.env.NODE_ENV === 'production'
-                ? '/v2/'
-                : (devServerConfig.publicPath || '/v2/'),
+
             // transpile: false,
 
             // Add dependencies for transpiling with Babel (Array of string/regex)
@@ -132,7 +123,7 @@ export default async function (ctx) {
             // extractCSS: false,
 
             // https://quasar.dev/quasar-cli/handling-webpack
-            extendWebpack (cfg) {
+            extendWebpack(cfg) {
                 cfg.resolve.fallback = {
                     crypto: 'crypto-browserify',
                     stream: 'stream-browserify',
@@ -161,9 +152,8 @@ export default async function (ctx) {
         devServer: {
             https: false,
             port: 8080,
-            open: true,
+            open: true, // opens browser window automatically,
             devMiddleware: {
-                // It determines the URL path where the webpack-dev-server will serve the development version of the application.
                 publicPath: devServerConfig.publicPath,
                 ...(!devServerConfig.proxyAPI2localhost
                     ? {}
@@ -176,24 +166,19 @@ export default async function (ctx) {
                 ? {}
                 : {
                     https: true,
-                    proxy: [
-                        {
-                            context: [`!${devServerConfig.publicPath || '/v2/'}`],
+                    proxy: {
+                        [`!${devServerConfig.publicPath || '/v2/'}`]: {
                             target: devServerConfig.proxyAPIFromURL,
                             secure: false
                         }
-                    ],
-                    setupMiddlewares: (middlewares, devServer) => {
-                        // Create a constant path value to prevent reactivity issues
-                        const basePath = devServerConfig.publicPath || '/v2/'
-
-                        // Use once-only redirect handler
+                    },
+                    onBeforeSetupMiddleware: (devServer) => {
                         devServer.app.get('/', (req, res) => {
-                            res.redirect(301, basePath)
+                            res.redirect(301, devServerConfig.publicPath || '/v2/')
                         })
-                        return middlewares
                     }
-                })
+                }
+            )
         },
 
         // animations: 'all', // --- includes all animations

src/boot/appConfig.js

@@ -1,7 +1,6 @@
-import { store } from 'src/boot/store'
 import appConfig from 'src/config/app'
 
-export default async ({ app }) => {
+export default async ({ app, store }) => {
     app.config.globalProperties.$appConfig = appConfig
     store.$appConfig = appConfig
 }

src/boot/branding.js

@@ -1,7 +1,6 @@
 import { getCssVar } from 'quasar'
-import { store } from 'src/boot/store'
 
-export default async ({ Vue, app }) => {
+export default async ({ Vue, store, app }) => {
     await store.dispatch('user/setDefaultBranding', {
         primaryColor: getCssVar('primary'),
         secondaryColor: getCssVar('secondary')

src/boot/event-bus.js

@@ -1,6 +1,6 @@
 import emitter from 'tiny-emitter/instance'
 
-export default async ({ app }) => {
+export default async ({ app, store }) => {
     app.config.globalProperties.emitter = {
         $on: (...args) => emitter.on(...args),
         $once: (...args) => emitter.once(...args),

src/boot/i18n.js

@@ -1,4 +1,3 @@
-import { store } from 'src/boot/store'
 import messages, {
     getLangFromBrowserDefaults,
     setLanguage
@@ -19,7 +18,7 @@ export const i18n = createI18n({
     messages: messageLoaded
 })
 
-export default async ({ app }) => {
+export default async ({ app, store }) => {
     app.use(i18n)
     app.i18n = i18n
     await setLanguage(currentLocale)

src/boot/ngcp-call.js

@@ -12,9 +12,8 @@ import {
     callUnMute,
     callUnMuteRemote
 } from 'src/api/ngcp-call'
-import { store } from 'src/boot/store'
 
-export default async ({ app }) => {
+export default async ({ app, store }) => {
     callConfigure({
         baseWebSocketUrl: `${app.config.globalProperties.$appConfig.baseWsUrl}/wss/sip`
     })

src/boot/routes.js

@@ -3,9 +3,8 @@ import {
     getJwt, getSubscriberId,
     hasJwt
 } from 'src/auth'
-import { store } from 'src/boot/store'
 
-export default ({ app, router }) => {
+export default ({ app, router, store }) => {
     router.beforeEach((to, from, next) => {
         const publicUrls = ['/login', '/recoverpassword']
         // not authorized user

src/boot/store.js

@@ -1,12 +0,0 @@
-import storeFactory from 'src/store'
-
-// Create store instance
-const _store = storeFactory()
-
-export default ({ app }) => {
-    // Register store with the app so components can access it
-    app.use(_store)
-    return { store: _store }
-}
-
-export { _store as store }

src/boot/user.js

@@ -1,8 +1,7 @@
 import { loginByExchangeToken } from 'src/api/user'
 import { hasJwt, setJwt, setSubscriberId } from 'src/auth'
-import { store } from 'src/boot/store'
 
-export default async () => {
+export default async ({ store }) => {
     // Todo: Use "URL" shim to hide workaround
     const linkDomNode = document.createElement('a')
     linkDomNode.href = document.location.href

src/index.template.html

@@ -19,6 +19,7 @@
     <link rel="icon" type="image/ico" href="favicon.ico">
   </head>
   <body>
-    <!-- quasar:entry-point -->
+    <!-- DO NOT touch the following DIV -->
+    <div id="q-app"></div>
   </body>
 </html>

src/store/communication.js

@@ -17,7 +17,7 @@ export default {
         },
         createFaxError (state) {
             return state.createFaxError ||
-                i18n.global.t('An error occurred while trying to send the fax. Please try again')
+                i18n.global.t('An error occured while trying to send the fax. Please try again')
         }
     },
     mutations: {

src/store/index.js

@@ -1,11 +1,11 @@
 import { date } from 'quasar'
-import CommunicationModule from 'src/communication'
 import { INTERNAL_DATE_FORMAT_DASH, INTERNAL_DATE_FORMAT_DASH_HOUR, INTERNAL_DATE_FORMAT_SLASH } from 'src/constants'
 import CallModule from 'src/store/call'
 import CallBlockingModule from 'src/store/call-blocking'
 import CallForwardingModule from 'src/store/call-forwarding'
 import CallRecordingsModule from 'src/store/call-recordings'
 import CallSettingsModule from 'src/store/call-settings'
+import CommunicationModule from 'src/store/communication'
 import ConversationsModule from 'src/store/conversations'
 import Customer from 'src/store/customer'
 import DashboardModule from 'src/store/dashboard'