Debugging SSR in VSCode, quasar.config.js build.devtool not passed to server webpack config

[jeanbon]

Hi, I’m working on a SSR app and I wanted to enable debugging in VS Code for the SSR process. (My code was failing before render…)

After trying tons of things I found out that to debug SSR within VSCode, I needed to enable “inline-source-map” which I did through quasar.config.js. (Thanks to Les Harris who pointed me in the right direction.)

But this was not enough, I did not manage to make it work until I forced devtool = ‘inline-source-map’ in “extendWebpack” (Thanks to zoao2 post for the clue).

extendWebpack (cfg) {
       if (cfg.mode === 'development') {
           cfg.devtool = isServer ? 'inline-source-map' : 'source-map'
       }
...
}

According to Les Harris post mentioned above, “source-map” is needed for the client. One could as well set quasar build prop as default and just deal with server in extendWebpack…

If fact, after debugging “extendWebpack” I found out that the client config does get the value from build.devtool setup in quasar.config.js but the server config seems to ignore it and stays as “#source-map” .

**Quasar.config.js **

build: {
...
devtool: 'inline-source-map'
...
}

Debug Client config at the start of "extendWebpack"

{ mode: 'development',
  devtool: 'inline-source-map',
  ...
  entry: { app: [ '/home/node/sandbox2/.quasar/client-entry.js' ] } }
}

Debug Server config at the start of "extendWebpack"

{ mode: 'development',
  devtool: '#source-map',
  ...
  entry: { app: [ '/home/node/sandbox2/.quasar/server-entry.js' ] } }
}

Note: When build.devtool is not set, client config devtool = “#cheap-module-eval-source-map” by default.

I have 2 questions:

1. What is the reason for not applying build/devtool to server webpack config devtool ?
2. What is the purpose of the “#” in “#???source-map” ?

Thanks for your help.