create-react-app fix: replace https to server to support Webpack 5

trafficstars

Describe the bug

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

Actual behavior

A deprecation warning is issued on bootstrap, app still works properly. Screenshot:

Core idea

https://github.com/facebook/create-react-app/blob/20edab4894b301f6b90dad0f90a2f82c52a7ac66/packages/react-scripts/config/webpackDevServer.config.js#L102

Replace https: getHttpsConfig(): { cert: Buffer; key: Buffer; } | boolean with server: getServerConfig(): "http" | "https" | { type: "https"; options: { cert: Buffer; key: Buffer; }; }

function getServerConfig() {
  const { SSL_CRT_FILE, SSL_KEY_FILE, HTTPS } = process.env;
  const protocol = HTTPS === 'true' ? 'https' : 'http';

  if (protocol === 'https') {
    if (SSL_CRT_FILE && SSL_KEY_FILE) {
      const crtFile = path.resolve(paths.appPath, SSL_CRT_FILE);
      const keyFile = path.resolve(paths.appPath, SSL_KEY_FILE);
      const config = {
        type: protocol,
        options: {
          cert: readEnvFile(crtFile, 'SSL_CRT_FILE'),
          key: readEnvFile(keyFile, 'SSL_KEY_FILE'),
        },
      };

      validateKeyAndCerts({ ...config.options, keyFile, crtFile });
      return config;
    }
    return protocol;
  }
  return protocol;
}

Modify the function to move https config into "server" options and align schemas

After fixing

The deprecation warning is eliminated successfully. Screenshot:

Dec 20 '21 10:12 luffy84217

@iansu @mrmckeb Would you please take a look at this?

Jan 29 '22 01:01 luffy84217

@iansu @mrmckeb Would you please take a look at this?

Hello, any update on this, please? Thanks a lot in advance.

Mar 28 '22 14:03 carlosparreno

Still there: [DEP_WEBPACK_DEV_SERVER_HTTPS] DeprecationWarning: 'https' option is deprecated. Please use the 'server' option. warning when using the HTTPS option. Seems like an easy merge of this PR.. :)