Skip to content
GitLab

fix: replace https to server to support Webpack 5

Open Administrator requested to merge github/fork/luffy84217/fix-webpack-dev-server-deprecated-option into main

Created by: luffy84217

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: image

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: image