Troubleshooting webpack dev server cli errors

Question

running 'npx webpack server' on a successfully build webpack bundle, the output when an error occurs does not tell me much (Error: 'wrong tag' deep inside the webpack dev server code), where do you look to see more info/details? Here is the output:

npx webpack serve

(node:31820) [DEP_WEBPACK_DEV_SERVER_HTTPS] DeprecationWarning: 'https' option is deprecated. Please use the 'server' option.
(Use `node --trace-deprecation ...` to show where the warning was created)
<i> [webpack-dev-server] SSL certificate: C:\Code\pl-security-audit-hub\PrecisionLender.SecurityAuditHub.API\ClientApp\node_modules\.cache\webpack-dev-server\server.pem
<w> [webpack-dev-server] "hot: true" automatically applies HMR plugin, you don't have to add it manually to your webpack configuration.
<i> [webpack-dev-server] [HPM] Proxy created: **  -> https://localhost:5510
[webpack-cli] Error: wrong tag
    at Object.createSecureContext (_tls_common.js:271:19)
    at Server.setSecureContext (_tls_wrap.js:1331:27)
    at Server (_tls_wrap.js:1186:8)
    at new Server (https.js:70:3)
    at Object.createServer (https.js:106:10)
    at Server.createServer (C:\Code\pl-security-audit-hub\PrecisionLender.SecurityAuditHub.API\ClientApp\node_modules\webpack-dev-server\lib\Server.js:1606:53)
    at Server.initialize (C:\Code\pl-security-audit-hub\PrecisionLender.SecurityAuditHub.API\ClientApp\node_modules\webpack-dev-server\lib\Server.js:1165:10)
    at Server.start (C:\Code\pl-security-audit-hub\PrecisionLender.SecurityAuditHub.API\ClientApp\node_modules\webpack-dev-server\lib\Server.js:2177:16)
    at async Command.<anonymous> (C:\Code\pl-security-audit-hub\PrecisionLender.SecurityAuditHub.API\ClientApp\node_modules\@webpack-cli\serve\lib\index.js:242:25)
    at async Promise.all (index 1)

Answer 1

See https://webpack.js.org/configuration/dev-server/#devserverhttps. This option is deprecated in favor of devServer.server option.

change your local webpack configuration from:

devServer: {
  ...,
  https: {
    cert: ...,
    key: ...,
  },
},

into:

devServer {
  ...,
  server: {
    type: 'https',
    options: {
      cert: ...,
      key: ...,
    },
  },
},