quasar app upgrade from 1.9.* to 2.2.* is causing errors

[jitendra1607]

$ quasar dev -m pwa

Dev mode.......... pwa
Pkg quasar........ v1.15.10
Pkg @quasar/app... v2.2.4
Debugging......... enabled

Configured browser support (at least 89.65% of global marketshare):
· Chrome for Android >= 90
· Firefox for Android >= 87
· QQ for Android >= 10.4
· UC for Android >= 12.12
· Android >= 90
· Baidu >= 7.12
· Bb >= 7
· Chrome >= 88
· Edge >= 89
· Firefox >= 86
· IE >= 11
· IE Mobile >= 10
· iOS >= 13.4-13.7
· Kaios >= 2.5
· Opera Mini >= all
· Opera Mobile >= 12.1
· Opera >= 74
· Safari >= 13.1
· Samsung >= 12.0

App · Running "@quasar/qcalendar" Quasar App Extension...
App · Reading quasar.conf.js
App · Checking listening address availability (0.0.0.0:8080)...
App · Extension(@quasar/qcalendar): Extending quasar.conf...
App · Transpiling JS (Babel active) - includes IE11 support
node:internal/modules/cjs/loader:940
 const err = new Error(message);
             ^

[  Error: Cannot find module 'workbox-webpack-plugin'
 Require stack:
 - app/node_modules/@quasar/app/lib/webpack/pwa/index.js
 - app/node_modules/@quasar/app/lib/webpack/index.js
 - app/node_modules/@quasar/app/lib/quasar-conf-file.js
 - app/node_modules/@quasar/app/bin/quasar-dev
 - app/node_modules/@quasar/app/bin/quasar
 - /usr/local/lib/node_modules/@quasar/cli/bin/quasar
 
 - loader:940 Function.Module._resolveFilename
   node:internal/modules/cjs/loader:940:15
 
 - loader:773 Function.Module._load
   node:internal/modules/cjs/loader:773:27
 
 - loader:1012 Module.require
   node:internal/modules/cjs/loader:1012:19
 
 - helpers:93 require
   node:internal/modules/cjs/helpers:93:18
 
 - index.js:11 module.exports
   [school_app]/[@quasar]/app/lib/webpack/pwa/index.js:11:25
 
 - index.js:58 getPWA
   [school_app]/[@quasar]/app/lib/webpack/index.js:58:19
 
 - index.js:186 module.exports
   [school_app]/[@quasar]/app/lib/webpack/index.js:186:18
 
 - quasar-conf-file.js:945 QuasarConfFile.compile
   [school_app]/[@quasar]/app/lib/quasar-conf-file.js:945:50
 
 - task_queues:96 processTicksAndRejections
   node:internal/process/task_queues:96:5
 
 - quasar-dev:222 async goLive
   [school_app]/[@quasar]/app/bin/quasar-dev:222:3
 
] {
 code: 'MODULE_NOT_FOUND',
 requireStack: [
   '/app/node_modules/@quasar/app/lib/webpack/pwa/index.js',
   '/app/node_modules/@quasar/app/lib/webpack/index.js',
   '/app/node_modules/@quasar/app/lib/quasar-conf-file.js',
   '/app/node_modules/@quasar/app/bin/quasar-dev',
   '/app/node_modules/@quasar/app/bin/quasar',
   '/usr/local/lib/node_modules/@quasar/cli/bin/quasar'
 ]
}

[jitendra1607]

in my quasar.conf file

pwa: {
      workboxPluginMode: 'InjectManifest',
      workboxOptions: {
        // skipWaiting: true,
        // clientsClaim: true
      },
      manifest: {
        name: 'xxxx',
        short_name: 'xxxx',
        start_url: '/',
        description: 'xxxx',
        display: 'standalone',
        // orientation: 'natural',
        background_color: '#ffffff',
        theme_color: '#00833e',
        prefer_related_applications: false,
        icons: [{
          'src': 'statics/icons/icon-128x128.png',
          'sizes': '128x128',
          'type': 'image/png'
        },
        {
          'src': 'statics/icons/icon-192x192.png',
          'sizes': '192x192',
          'type': 'image/png'
        },
        {
          'src': 'statics/icons/icon-256x256.png',
          'sizes': '256x256',
          'type': 'image/png'
        },
        {
          'src': 'statics/icons/icon-384x384.png',
          'sizes': '384x384',
          'type': 'image/png'
        },
        {
          'src': 'statics/icons/icon-512x512.png',
          'sizes': '512x512',
          'type': 'image/png'
        }
        ]
      },
      metaVariables: {
        appleMobileWebAppCapable: 'yes',
        appleMobileWebAppStatusBarStyle: 'default',
        msapplicationTileColor: '#000000'
      }
    },

[rstoenescu]

You forgot to also install workbox-webpack-plugin. This is installed automatically when you add the PWA mode, but you probably created a new folder and ported stuff to it.

[metalsadman]

search for “htmlWebpackPlugin.options.” and replace with “” (empty string) found on the guide. i suggest you follow it https://quasar.dev/quasar-cli/app-upgrade-guide.

[jitendra1607]

My bad. I was struggling with 'https://quasar.dev/start/upgrade-guide' till now. Thank you so much.

[jitendra1607]

Now 'quasar dev' is successful but 'quasar dev -m pwa' shows following error

Can't find self.__WB_MANIFEST in your SW source.

i checked same issue at 'GoogleChrome/workbox#2253' but didn't get the exact solution.

[jitendra1607]

i added precacheAndRoute(self.__WB_MANIFEST); at the starting of my 'custom-service-worker.js' file and got success. Is this the right way?

[jitendra1607]

As per 'https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin#injectmanifest_plugin' the aspect (precacheAndRoute(self.__WB_MANIFEST);) should be handled itself.

[jitendra1607]

Can you post sample code for 'custom-service-worker.js', as I am getting errors after upgrading to 2.2.*

errors in console are below

Uncaught ReferenceError: workbox is not defined
    at eval (custom-service-worker.js?aec2:3)
    at Object../src-pwa/custom-service-worker.js (service-worker.js:96)
    at __webpack_require__ (service-worker.js:20)
    at service-worker.js:84
    at service-worker.js:87




Error during service worker registration: TypeError: Failed to register a ServiceWorker for scope ('http://127.0.0.1:8080/') with script ('http://127.0.0.1:8080/service-worker.js'): ServiceWorker script evaluation failed

[jitendra1607]

similar issue 'https://forum.quasar-framework.org/topic/6525/pwa-whit-custom-service-worker-js/8'