PWA - hot reload causing errors



  • After much testing, I have narrowed this down and it is always reproducible for me with the following steps:

    1. quasar create newproject
    2. During setup choose all the defaults (the only deviation for me was choosing npm instead of yarn in the last step)
    3. cd newproject
    4. quasar dev -m pwa
    5. Open chrome devtools, make sure “Bypass for network” is selected in “Application”/“Service Workers” tab
    6. From project folder open src/Index.vue and make any small change (I just removed the quasar img) and save file

    RESULT: Quasar hot reloads with error, and in the dev tools console of chrome, the following message will be displayed one or more times:

    GenerateSW has been called multiple times, perhaps due to running webpack in --watch mode. The precache manifest generated after the first call may be inaccurate! Please see https://github.com/GoogleChrome/workbox/issues/1790 for more information.
    

    Because this is a brand new project coming from quasar create, it seems highly unlikely to be related to any project changes I could have made. Here is the result of the quasar info command for that folder:

    Operating System - Darwin(19.5.0) - darwin/x64
    NodeJs - 12.18.1
    
    Global packages
      NPM - 6.14.5
      yarn - Not installed
      @quasar/cli - 1.1.0
      cordova - Not installed
    
    Important local packages
      quasar - 1.12.8 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
      @quasar/app - 2.0.1 -- Quasar Framework local CLI
      @quasar/extras - 1.8.2 -- Quasar Framework fonts, icons and animations
      eslint-plugin-quasar - Not installed
      vue - 2.6.11 -- Reactive, component-oriented view layer for modern web interfaces.
      vue-router - 3.2.0 -- Official router for Vue.js 2
      vuex - 3.4.0 -- state management for Vue.js
      electron - Not installed
      electron-packager - Not installed
      electron-builder - Not installed
      @capacitor/core - Not installed
      @capacitor/cli - Not installed
      @capacitor/android - Not installed
      @capacitor/ios - Not installed
      @babel/core - 7.10.4 -- Babel compiler core.
      webpack - 4.43.0 -- Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.
      webpack-dev-server - 3.11.0 -- Serves a webpack app. Updates the browser on changes.
      workbox-webpack-plugin - 5.1.3 -- A plugin for your Webpack build process, helping you generate a manifest of local files that workbox-sw should precache.
      register-service-worker - 1.7.1 -- Script for registering service worker, with hooks
      typescript - 3.9.5 -- TypeScript is a language for application scale JavaScript development
    
    Quasar App Extensions
      *None installed*
    
    Networking
      Host - iMac
      en1 - 192.168.10.22
    

    Unless I hear some specific advice from someone here, I guess I will report this in github. But it really surprises me that no one else has experienced this, which makes me think that it could be something in my computer setup, but no idea what that could be…

    NOTE: I recreated this post from an earlier one and deleted that one for clarity, only leaving the absolute minimum necessary to understand the issue and not to confuse things with my troubleshooting progress.



  • Well, after heading over to github and doing a lot of searching, I seem to have found reference (if not a solution) to the problem here:

    https://github.com/quasarframework/quasar/issues/7272

    Hope this helps someone else.


Log in to reply