HMR is broken when SSR is enabled

[Grawl]

What happened?

After update to Quasar v2, HMR is not working for me.

What did you expect to happen?

HMR should work when SSR is enabled.

Reproduction URL

https://github.com/Grawl/quasar-2-ssr-hmr

How to reproduce?

1. Set up reproduction repository: git clone, yarn
2. Run yarn dev-ssr
3. Open http://localhost:8080/ in browser and open browser dev tools console
4. Type something into input
5. Change something in src/pages/Index.vue, style property for example
6. See GET http://localhost:8080/app.<hash>.hot-update.json 404 (Not Found) for a millisecond
7. Page reloads instead of HMR changes injecting

Flavour

Quasar CLI (@quasar/cli | @quasar/app)

Areas

SSR Mode

Platforms/Browsers

Chrome

Quasar info output

Operating System - Darwin(21.1.0) - darwin/x64
NodeJs - 16.13.1

Global packages
  NPM - 8.1.2
  yarn - 1.22.17
  @quasar/cli - undefined
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.5.5 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app - 3.3.3 -- Quasar Framework local CLI
  @quasar/extras - 1.13.0 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.2.31 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.0.14
  vuex - Not installed
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  @babel/core - 7.17.5 -- Babel compiler core.
  webpack - 5.70.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 - 4.7.4 -- Serves a webpack app. Updates the browser on changes.
  workbox-webpack-plugin - 6.5.1 -- 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.2 -- Script for registering service worker, with hooks
  typescript - 4.5.5 -- TypeScript is a language for application scale JavaScript development
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Networking
  Host - iMac-Daniil.local
  en1 - 10.23.10.86
  utun3 - 172.16.0.2

Relevant log output

GET http://localhost:8080/app.<hash>.hot-update.json 404 (Not Found)

Additional context

No response

[Grawl]

Still broken on 2.7.3

Any plans on this?

With Vite, there is no problem. Should we convert our projects from Webpack to Vite?

[Grawl]

Found a workaround: we have to remove one app.get() from Webpack devServer Express router.

We can do that using devServer middleware from quasar.conf.js:

    devServer: {
      // …devServer settings
      onAfterSetupMiddleware: function (devServer) {
        if (!devServer) throw new Error('webpack-dev-server is not defined')
        const stack = devServer.app._router.stack
        const re = /(\.hot-update\.json|\.js\.map)$/
        const item = stack.find(({ regexp }) => regexp.toString() === re.toString())
        stack.splice(stack.indexOf(item), 1)
      },
    },

Found this trick at https://stackoverflow.com/a/55053856/766307

[rstoenescu]

Hi,

For Quasar v2, @quasar/app is deprecated. Use @quasar/app-webpack instead. Everything should work fine.

[Grawl]

@rstoenescu I just updated reproduction repository and the problem is still existing https://github.com/Grawl/quasar-2-ssr-hmr

[Grawl]

Just try to create a new project using yarn create quasar, enable SSR mode and you will see that problem.

[rstoenescu]

I now see exactly the use-case that you mean. The code that you removed was initially a workaround to a webpack-dev-server issue that now seems to be fixed.

Thanks for contributing! This will go into q/app-webpack 3.5.7