[BUG] CRA5.0.0 [DEP_WEBPACK_DEV_SERVER_HTTPS] DeprecationWarning on start with .env file configured for HTTPS

[jafin]

Describe the bug

Upgrading Project to CRA 5, with a .env.development.local file configured with HTTPS settings, gives warning:

(node:48148) [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)

Did you try recovering your dependencies?

Yes

Environment

current version of create-react-app: 5.0.0

System:
OS: Windows 10 10.0.19044
CPU: (24) x64 AMD Ryzen 9 3900X 12-Core Processor
Binaries:
Node: 16.13.1 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 8.3.0 - ~\AppData\Roaming\npm\npm.CMD
Browsers:
Chrome: 96.0.4664.93
Edge: Spartan (44.19041.1266.0), Chromium (96.0.1054.53)
Internet Explorer: 11.0.19041.1202
npmPackages:
react: ^17.0.2 => 17.0.2
react-dom: ^17.0.2 => 17.0.2
react-scripts: ^5.0.0 => 5.0.0
npmGlobalPackages:
create-react-app: Not Found
(paste the output of the command here.)

Steps to reproduce

1. Create .env.development.local file with contents similar to :

HTTPS=true 
SSL_CRT_FILE=file.crt
SSL_KEY_FILE=file.key

execute:

npm start run

Verify warning on startup:

(node:48148) [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)

Expected behavior

No warning should occur.

Actual behavior

A warning is issued on startup, app still funcitons.

(node:48148) [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)

Further info

If I execute via CRACO and log the output of the webpack config I see:

https: {
  cert: /* cert */,
  key: /* key */,
},

create-react-app/packages/react-scripts/config/webpackDevServer.config.js

Line 102 in 20edab4

https: getHttpsConfig(),

whereas I believe this is expected:

server: {
  type: 'https',
  options: {
    cert: /* cert */,
    key: /* key */,
  },  
}

As per the webpack 5 docs: https://webpack.js.org/configuration/dev-server/#devserverserver

If I configure craco with a config which maps the properties in the expected shape, the warning disappears (from npm start run):

 devServer: (devServerConfig, { env, paths, proxy, allowedHost }) => {
        devServerConfig.server = {
            type: 'https',
            options: {
                key: devServerConfig.https.key,
                cert: devServerConfig.https.cert
                }
            };
        devServerConfig.https = undefined;
    return devServerConfig;
    },

[raix]

Confirmed changes in: WDS changelog https://github.com/webpack/webpack-dev-server/blob/master/CHANGELOG.md#440-2021-10-27 - we should move https config into "server" options and align schemas

[luffy84217]

Hello, is anyone working on it right now? If no, I'll take a look and try to do it

[luffy84217]

@iansu @mrmckeb Fixed by #11806 , please review, thanks😊