Hot reload and changes not taken into account when editing a package in node_modules folder

[sebastien-vedrine]

I just installed a new Quasar v2 (rc-1 build) app.

After running quasar dev, when I edit my files in the src directory, the live reload happens with the latest modifications.
However when editing my dependency files (in node_modules) for dev purposes, the console warned me that the webpack-dev-server hot reloads but my components don't re-render and all my changes are not taken into account (even if I refresh the whole page).

This is what's displayed in the console when editing a file in a node_modules package (hot reload not working):

When editing an src file (hot reload working):

In my previous Quasar v1 projects, I never encountered this issue. I was able to change any file in the node_modules folder and had hot reload working (without any specific configuration).

I've tried to add this config I found here
I'm aware this config is made for quasar extensions, but I think it should still work with any node_modules.

devServer: {
    https: false,
    port: 8080,
    open: false,
    watchOptions: {
      ignored: [
        'node_modules',
        '!node_modules/my-module',
      ],
    },
  },

But an error occurs stating that watchOptions does not match the API schema (when running quasar dev)

To Reproduce
Steps to reproduce the behavior:

1. Install a fresh Quasar v2 (rc-1) project.
2. Edit a package file in the node_modules folder.
3. Check your browser.

Platform (please complete the following information):
Quasar Version: v.2.0.0-rc1
@quasar/app Version: ^3.0.0-beta.1
Quasar mode:

• SPA
• SSR
• PWA
• Electron
• Cordova
• Capacitor
• BEX

Tested on:

• SPA
• SSR
• PWA
• Electron
• Cordova
• Capacitor
• BEX

OS: debian
Node: v14.16.1
NPM: 6.14.12
Yarn: 1.22.10
Browsers: Google Chrome

[hawkeye64]

Try this:

  devServer: {
    https: false,
    port: 8080,
    open: false,
    watch: true,
    watchOptions: {
      ignored: [
        /node_modules([\\]+|\/)+(?!my-package-name)/
      ]
    },
  },

Ignores everything under node_modules except the targeted my-package-name package.

[hawkeye64]

@sebastien-vedrine
I did some research and found out just including watchOptions causes this issue. As a workaround, you can roll back to an earlier version (beta15) until a fix is made.

[sebastien-vedrine]

@hawkeye64
Thank you for your investigations.
When do you think this will be fixed?
Can you please update this issue when this is done? It is quite blocking for me right now.

[hawkeye64]

@sebastien-vedrine I don't think it'll be fixed until early next week

[sebastien-vedrine]

Okay that would be nice, thank you!

[rstoenescu]

There is no fix that we can do because this is a webpack v5 issue and outside of our reach. Everything under quasar.conf.js > devServer is passed to webpack-dev-server. Please open a ticket on https://github.com/webpack/webpack-dev-server and mention it's for v4.0.0-beta.3