@docusaurus/core 2.0.0-beta.15 → 2.0.0-beta.16

package/lib/webpack/base.js

@@ -14,8 +14,8 @@ const path_1 = (0, tslib_1.__importDefault)(require("path"));
 const utils_1 = require("./utils");
 const themes_1 = require("../server/themes");
 const utils_2 = require("@docusaurus/utils");
-const CSS_REGEX = /\.css$/;
-const CSS_MODULE_REGEX = /\.module\.css$/;
+const CSS_REGEX = /\.css$/i;
+const CSS_MODULE_REGEX = /\.module\.css$/i;
 exports.clientDir = path_1.default.join(__dirname, '..', 'client');
 const LibrariesToTranspile = [
     'copy-text-to-clipboard', // contains optional catch binding, incompatible with recent versions of Edge
@@ -28,15 +28,15 @@ function excludeJS(modulePath) {
     }
     // Don't transpile node_modules except any docusaurus npm package
     return (/node_modules/.test(modulePath) &&
-        !/(docusaurus)((?!node_modules).)*\.jsx?$/.test(modulePath) &&
+        !/docusaurus(?:(?!node_modules).)*\.jsx?$/.test(modulePath) &&
         !LibrariesToTranspileRegex.test(modulePath));
 }
 exports.excludeJS = excludeJS;
-function getDocusaurusAliases() {
+async function getDocusaurusAliases() {
     const dirPath = path_1.default.resolve(__dirname, '../client/exports');
     const extensions = ['.js', '.ts', '.tsx'];
     const aliases = {};
-    fs_extra_1.default.readdirSync(dirPath)
+    (await fs_extra_1.default.readdir(dirPath))
         .filter((fileName) => extensions.includes(path_1.default.extname(fileName)))
         .forEach((fileName) => {
         const fileNameWithoutExtension = path_1.default.basename(fileName, path_1.default.extname(fileName));
@@ -46,7 +46,7 @@ function getDocusaurusAliases() {
     return aliases;
 }
 exports.getDocusaurusAliases = getDocusaurusAliases;
-function createBaseConfig(props, isServer, minify = true) {
+async function createBaseConfig(props, isServer, minify = true) {
     var _a;
     const { outDir, siteDir, siteConfig, siteConfigPath, baseUrl, generatedFilesDir, routesPaths, siteMetadata, plugins, } = props;
     const totalPages = routesPaths.length;
@@ -56,7 +56,7 @@ function createBaseConfig(props, isServer, minify = true) {
     const fileLoaderUtils = (0, utils_2.getFileLoaderUtils)();
     const name = isServer ? 'server' : 'client';
     const mode = isProd ? 'production' : 'development';
-    const themeAliases = (0, themes_1.loadPluginsThemeAliases)({ siteDir, plugins });
+    const themeAliases = await (0, themes_1.loadPluginsThemeAliases)({ siteDir, plugins });
     return {
         mode,
         name,
@@ -69,16 +69,19 @@ function createBaseConfig(props, isServer, minify = true) {
             // When version string changes, cache is evicted
             version: [
                 siteMetadata.docusaurusVersion,
-                // Webpack does not evict the cache correctly on alias/swizzle change, so we force eviction.
+                // Webpack does not evict the cache correctly on alias/swizzle change,
+                // so we force eviction.
                 // See https://github.com/webpack/webpack/issues/13627
                 (0, utils_2.md5Hash)(JSON.stringify(themeAliases)),
             ].join('-'),
-            // When one of those modules/dependencies change (including transitive deps), cache is invalidated
+            // When one of those modules/dependencies change (including transitive
+            // deps), cache is invalidated
             buildDependencies: {
                 config: [
                     __filename,
                     path_1.default.join(__dirname, isServer ? 'server.js' : 'client.js'),
-                    // Docusaurus config changes can affect MDX/JSX compilation, so we'd rather evict the cache.
+                    // Docusaurus config changes can affect MDX/JSX compilation, so we'd
+                    // rather evict the cache.
                     // See https://github.com/questdb/questdb.io/issues/493
                     siteConfigPath,
                 ],
@@ -117,17 +120,18 @@ function createBaseConfig(props, isServer, minify = true) {
                 // Note: a @docusaurus alias would also catch @docusaurus/theme-common,
                 // so we use fine-grained aliases instead
                 // '@docusaurus': path.resolve(__dirname, '../client/exports'),
-                ...getDocusaurusAliases(),
+                ...(await getDocusaurusAliases()),
                 ...themeAliases,
             },
-            // This allows you to set a fallback for where Webpack should look for modules.
-            // We want `@docusaurus/core` own dependencies/`node_modules` to "win" if there is conflict
-            // Example: if there is core-js@3 in user's own node_modules, but core depends on
-            // core-js@2, we should use core-js@2.
+            // This allows you to set a fallback for where Webpack should look for
+            // modules. We want `@docusaurus/core` own dependencies/`node_modules` to
+            // "win" if there is conflict. Example: if there is core-js@3 in user's
+            // own node_modules, but core depends on core-js@2, we should use
+            // core-js@2.
             modules: [
                 path_1.default.resolve(__dirname, '..', '..', 'node_modules'),
                 'node_modules',
-                path_1.default.resolve(fs_extra_1.default.realpathSync(process.cwd()), 'node_modules'),
+                path_1.default.resolve(await fs_extra_1.default.realpath(process.cwd()), 'node_modules'),
             ],
         },
         resolveLoader: {
@@ -135,7 +139,8 @@ function createBaseConfig(props, isServer, minify = true) {
         },
         optimization: {
             removeAvailableModules: false,
-            // Only minimize client bundle in production because server bundle is only used for static site generation
+            // Only minimize client bundle in production because server bundle is only
+            // used for static site generation
             minimize: minimizeEnabled,
             minimizer: minimizeEnabled
                 ? (0, utils_1.getMinimizer)(useSimpleCssMinifier)
@@ -143,7 +148,9 @@ function createBaseConfig(props, isServer, minify = true) {
             splitChunks: isServer
                 ? false
                 : {
-                    // Since the chunk name includes all origin chunk names it's recommended for production builds with long term caching to NOT include [name] in the filenames
+                    // Since the chunk name includes all origin chunk names it's
+                    // recommended for production builds with long term caching to NOT
+                    // include [name] in the filenames
                     name: false,
                     cacheGroups: {
                         // disable the built-in cacheGroups
@@ -175,12 +182,12 @@ function createBaseConfig(props, isServer, minify = true) {
                 fileLoaderUtils.rules.svg(),
                 fileLoaderUtils.rules.otherAssets(),
                 {
-                    test: /\.(j|t)sx?$/,
+                    test: /\.[jt]sx?$/i,
                     exclude: excludeJS,
                     use: [
                         (0, utils_1.getCustomizableJSLoader)((_a = siteConfig.webpack) === null || _a === void 0 ? void 0 : _a.jsLoader)({
                             isServer,
-                            babelOptions: (0, utils_1.getCustomBabelConfigFilePath)(siteDir),
+                            babelOptions: await (0, utils_1.getCustomBabelConfigFilePath)(siteDir),
                         }),
                     ],
                 },
@@ -217,8 +224,9 @@ function createBaseConfig(props, isServer, minify = true) {
                 chunkFilename: isProd
                     ? 'assets/css/[name].[contenthash:8].css'
                     : '[name].css',
-                // remove css order warnings if css imports are not sorted alphabetically
-                // see https://github.com/webpack-contrib/mini-css-extract-plugin/pull/422 for more reasoning
+                // remove css order warnings if css imports are not sorted
+                // alphabetically. See https://github.com/webpack-contrib/mini-css-extract-plugin/pull/422
+                // for more reasoning
                 ignoreOrder: true,
             }),
         ],

package/lib/webpack/client.d.ts

@@ -6,4 +6,4 @@
  */
 import type { Configuration } from 'webpack';
 import type { Props } from '@docusaurus/types';
-export default function createClientConfig(props: Props, minify?: boolean): Configuration;
+export default function createClientConfig(props: Props, minify?: boolean): Promise<Configuration>;

package/lib/webpack/client.js

@@ -13,12 +13,14 @@ const webpack_merge_1 = (0, tslib_1.__importDefault)(require("webpack-merge"));
 const base_1 = require("./base");
 const ChunkAssetPlugin_1 = (0, tslib_1.__importDefault)(require("./plugins/ChunkAssetPlugin"));
 const LogPlugin_1 = (0, tslib_1.__importDefault)(require("./plugins/LogPlugin"));
-function createClientConfig(props, minify = true) {
+async function createClientConfig(props, minify = true) {
     var _a;
     const isBuilding = process.argv[2] === 'build';
-    const config = (0, base_1.createBaseConfig)(props, false, minify);
+    const config = await (0, base_1.createBaseConfig)(props, false, minify);
     const clientConfig = (0, webpack_merge_1.default)(config, {
-        // target: 'browserslist', //  useless, disabled on purpose (errors on existing sites with no browserslist cfg)
+        // useless, disabled on purpose (errors on existing sites with no
+        // browserslist config)
+        // target: 'browserslist',
         entry: path_1.default.resolve(__dirname, '../client/clientEntry.js'),
         optimization: {
             // Keep the runtime chunk separated to enable long term caching
@@ -33,7 +35,8 @@ function createClientConfig(props, minify = true) {
             }),
         ],
     });
-    // When building include the plugin to force terminate building if errors happened in the client bundle.
+    // When building, include the plugin to force terminate building if errors
+    // happened in the client bundle.
     if (isBuilding) {
         (_a = clientConfig.plugins) === null || _a === void 0 ? void 0 : _a.push({
             apply: (compiler) => {

package/lib/webpack/plugins/ChunkAssetPlugin.d.ts

@@ -5,7 +5,17 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { type Compiler } from 'webpack';
-declare class ChunkAssetPlugin {
+/**
+ * We modify webpack runtime to add an extra function called
+ * "__webpack_require__.gca" that will allow us to get the corresponding chunk
+ * asset for a webpack chunk. Pass it the chunkName or chunkId you want to load.
+ * For example: if you have a chunk named "my-chunk-name" that will map to
+ * "/publicPath/0a84b5e7.c8e35c7a.js" as its corresponding output path
+ * __webpack_require__.gca("my-chunk-name") will return
+ * "/publicPath/0a84b5e7.c8e35c7a.js"
+ *
+ * "gca" stands for "get chunk asset"
+ */
+export default class ChunkAssetPlugin {
     apply(compiler: Compiler): void;
 }
-export default ChunkAssetPlugin;

package/lib/webpack/plugins/ChunkAssetPlugin.js

@@ -8,16 +8,20 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const webpack_1 = require("webpack");
 const pluginName = 'chunk-asset-plugin';
+/**
+ * We modify webpack runtime to add an extra function called
+ * "__webpack_require__.gca" that will allow us to get the corresponding chunk
+ * asset for a webpack chunk. Pass it the chunkName or chunkId you want to load.
+ * For example: if you have a chunk named "my-chunk-name" that will map to
+ * "/publicPath/0a84b5e7.c8e35c7a.js" as its corresponding output path
+ * __webpack_require__.gca("my-chunk-name") will return
+ * "/publicPath/0a84b5e7.c8e35c7a.js"
+ *
+ * "gca" stands for "get chunk asset"
+ */
 class ChunkAssetPlugin {
     apply(compiler) {
         compiler.hooks.thisCompilation.tap(pluginName, ({ mainTemplate }) => {
-            /* We modify webpack runtime to add an extra function called "__webpack_require__.gca"
-            that will allow us to get the corresponding chunk asset for a webpack chunk.
-            Pass it the chunkName or chunkId you want to load.
-            For example: if you have a chunk named "my-chunk-name" that will map to "/publicPath/0a84b5e7.c8e35c7a.js" as its corresponding output path
-            __webpack_require__.gca("my-chunk-name") will return "/publicPath/0a84b5e7.c8e35c7a.js"
-            "gca" stands for "get chunk asset"
-            */
             mainTemplate.hooks.requireExtensions.tap(pluginName, (source, chunk) => {
                 const chunkIdToName = chunk.getChunkMaps(false).name;
                 const chunkNameToId = Object.create(null);
@@ -30,10 +34,13 @@ class ChunkAssetPlugin {
                 buf.push(
                 // If chunkName is passed, we convert it to chunk asset url
                 // .p => public path url ("/" or "/baseUrl/")
-                // .u(chunkId) => chunk asset url ("assets/js/x63b64xd.contentHash.js")
-                // not sure where this is documented, but this link was helpful: https://programmer.help/blogs/5d68849083e1a.html
+                // .u(chunkId) =>
+                //   chunk asset url ("assets/js/x63b64xd.contentHash.js")
+                // not sure where this is documented, but this link was helpful:
+                // https://programmer.help/blogs/5d68849083e1a.html
                 //
-                // Note: __webpack_require__.gca() is called in docusaurus.ts for prefetching
+                // Note: __webpack_require__.gca() is called in docusaurus.ts for
+                // prefetching
                 // Note: we previously used jsonpScriptSrc (Webpack 4)
                 `__webpack_require__.gca = function(chunkId) { chunkId = ${JSON.stringify(chunkNameToId)}[chunkId]||chunkId; return __webpack_require__.p + __webpack_require__.u(chunkId); };`);
                 return webpack_1.Template.asString(buf);

package/lib/webpack/plugins/CleanWebpackPlugin.d.ts

@@ -13,8 +13,8 @@
  * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  * copies of the Software, and to permit persons to whom the Software is
  * furnished to do so, subject to the following conditions:
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
@@ -54,7 +54,7 @@ export interface Options {
      */
     cleanOnceBeforeBuildPatterns?: string[];
 }
-declare class CleanWebpackPlugin {
+export default class CleanWebpackPlugin {
     private readonly verbose;
     private readonly cleanStaleWebpackAssets;
     private readonly protectWebpackAssets;
@@ -69,10 +69,10 @@ declare class CleanWebpackPlugin {
      *
      * Only happens once.
      *
-     * Warning: It is recommended to initially clean your build directory outside of webpack to minimize unexpected behavior.
+     * Warning: It is recommended to initially clean your build directory outside
+     * of webpack to minimize unexpected behavior.
      */
     handleInitial(): void;
     handleDone(stats: Stats): void;
     removeFiles(patterns: string[]): void;
 }
-export default CleanWebpackPlugin;

package/lib/webpack/plugins/CleanWebpackPlugin.js

@@ -60,7 +60,8 @@ class CleanWebpackPlugin {
      *
      * Only happens once.
      *
-     * Warning: It is recommended to initially clean your build directory outside of webpack to minimize unexpected behavior.
+     * Warning: It is recommended to initially clean your build directory outside
+     * of webpack to minimize unexpected behavior.
      */
     handleInitial() {
         if (this.initialClean) {
@@ -133,13 +134,13 @@ class CleanWebpackPlugin {
                 });
             }
         }
-        catch (error) {
-            const needsForce = /Cannot delete files\/folders outside the current working directory\./.test(error.message);
+        catch (err) {
+            const needsForce = /Cannot delete files\/folders outside the current working directory\./.test(err.message);
             if (needsForce) {
                 const message = 'clean-webpack-plugin: Cannot delete files/folders outside the current working directory. Can be overridden with the "dangerouslyAllowCleanPatternsOutsideProject" option.';
                 throw new Error(message);
             }
-            throw error;
+            throw err;
         }
     }
 }

package/lib/webpack/server.d.ts

@@ -9,4 +9,4 @@ import type { Props } from '@docusaurus/types';
 export default function createServerConfig({ props, onLinksCollected, }: {
     props: Props;
     onLinksCollected?: (staticPagePath: string, links: string[]) => void;
-}): Configuration;
+}): Promise<Configuration>;

package/lib/webpack/server.js

@@ -15,9 +15,9 @@ const LogPlugin_1 = (0, tslib_1.__importDefault)(require("./plugins/LogPlugin"))
 const utils_1 = require("@docusaurus/utils");
 // Forked for Docusaurus: https://github.com/slorber/static-site-generator-webpack-plugin
 const static_site_generator_webpack_plugin_1 = (0, tslib_1.__importDefault)(require("@slorber/static-site-generator-webpack-plugin"));
-function createServerConfig({ props, onLinksCollected = () => { }, }) {
+async function createServerConfig({ props, onLinksCollected = () => { }, }) {
     const { baseUrl, routesPaths, generatedFilesDir, headTags, preBodyTags, postBodyTags, ssrTemplate, siteConfig: { noIndex, trailingSlash }, } = props;
-    const config = (0, base_1.createBaseConfig)(props, true);
+    const config = await (0, base_1.createBaseConfig)(props, true);
     const routesLocation = {};
     // Array of paths to be rendered. Relative to output directory
     const ssgPaths = routesPaths.map((str) => {
@@ -57,9 +57,10 @@ function createServerConfig({ props, onLinksCollected = () => { }, }) {
                 },
                 paths: ssgPaths,
                 preferFoldersOutput: trailingSlash,
-                // When using "new URL('file.js', import.meta.url)", Webpack will emit __filename, and this plugin will throw
-                // not sure the __filename value has any importance for this plugin, just using an empty string to avoid the error
-                // See https://github.com/facebook/docusaurus/issues/4922
+                // When using "new URL('file.js', import.meta.url)", Webpack will emit
+                // __filename, and this plugin will throw. not sure the __filename value
+                // has any importance for this plugin, just using an empty string to
+                // avoid the error. See https://github.com/facebook/docusaurus/issues/4922
                 globals: { __filename: '' },
             }),
             // Show compilation progress bar.

package/lib/webpack/utils.d.ts

@@ -11,7 +11,7 @@ import type { ConfigureWebpackFn, ConfigurePostCssFn } from '@docusaurus/types';
 export declare function getStyleLoaders(isServer: boolean, cssOptionsArg?: {
     [key: string]: unknown;
 }): RuleSetRule[];
-export declare function getCustomBabelConfigFilePath(siteDir: string): string | undefined;
+export declare function getCustomBabelConfigFilePath(siteDir: string): Promise<string | undefined>;
 export declare function getBabelOptions({ isServer, babelOptions, }?: {
     isServer?: boolean;
     babelOptions?: TransformOptions | string;
@@ -32,8 +32,8 @@ export declare const getCustomizableJSLoader: (jsLoader?: "babel" | ((isServer:
 export declare function applyConfigureWebpack(configureWebpack: ConfigureWebpackFn, config: Configuration, isServer: boolean, jsLoader: 'babel' | ((isServer: boolean) => RuleSetRule) | undefined, content: unknown): Configuration;
 export declare function applyConfigurePostCss(configurePostCss: NonNullable<ConfigurePostCssFn>, config: Configuration): Configuration;
 export declare function compile(config: Configuration[]): Promise<void>;
-export declare function getHttpsConfig(): boolean | {
+export declare function getHttpsConfig(): Promise<boolean | {
     cert: Buffer;
     key: Buffer;
-};
+}>;
 export declare function getMinimizer(useSimpleCssMinifier?: boolean): WebpackPluginInstance[];

package/lib/webpack/utils.js

@@ -18,7 +18,6 @@ const path_1 = (0, tslib_1.__importDefault)(require("path"));
 const crypto_1 = (0, tslib_1.__importDefault)(require("crypto"));
 const logger_1 = (0, tslib_1.__importDefault)(require("@docusaurus/logger"));
 const utils_1 = require("@docusaurus/utils");
-const lodash_1 = require("lodash");
 // Utility method to get style loaders
 function getStyleLoaders(isServer, cssOptionsArg = {}) {
     const cssOptions = {
@@ -80,9 +79,9 @@ function getStyleLoaders(isServer, cssOptionsArg = {}) {
     ];
 }
 exports.getStyleLoaders = getStyleLoaders;
-function getCustomBabelConfigFilePath(siteDir) {
+async function getCustomBabelConfigFilePath(siteDir) {
     const customBabelConfigurationPath = path_1.default.join(siteDir, utils_1.BABEL_CONFIG_FILE_NAME);
-    return fs_extra_1.default.existsSync(customBabelConfigurationPath)
+    return (await fs_extra_1.default.pathExists(customBabelConfigurationPath))
         ? customBabelConfigurationPath
         : undefined;
 }
@@ -95,13 +94,12 @@ function getBabelOptions({ isServer, babelOptions, } = {}) {
             caller: { name: isServer ? 'server' : 'client' },
         };
     }
-    else {
-        return Object.assign(babelOptions !== null && babelOptions !== void 0 ? babelOptions : { presets: [require.resolve('../babel/preset')] }, {
-            babelrc: false,
-            configFile: false,
-            caller: { name: isServer ? 'server' : 'client' },
-        });
-    }
+    return {
+        ...(babelOptions !== null && babelOptions !== void 0 ? babelOptions : { presets: [require.resolve('../babel/preset')] }),
+        babelrc: false,
+        configFile: false,
+        caller: { name: isServer ? 'server' : 'client' },
+    };
 }
 exports.getBabelOptions = getBabelOptions;
 // Name is generic on purpose
@@ -116,22 +114,6 @@ const getCustomizableJSLoader = (jsLoader = 'babel') => ({ isServer, babelOption
     ? getDefaultBabelLoader({ isServer, babelOptions })
     : jsLoader(isServer);
 exports.getCustomizableJSLoader = getCustomizableJSLoader;
-// TODO remove this before end of 2021?
-const warnBabelLoaderOnce = (0, lodash_1.memoize)(() => {
-    logger_1.default.warn `Docusaurus plans to support multiple JS loader strategies (Babel, esbuild...): code=${'getBabelLoader(isServer)'} is now deprecated in favor of code=${'getJSLoader(isServer)'}.`;
-});
-const getBabelLoaderDeprecated = function getBabelLoaderDeprecated(isServer, babelOptions) {
-    warnBabelLoaderOnce();
-    return getDefaultBabelLoader({ isServer, babelOptions });
-};
-// TODO remove this before end of 2021 ?
-const warnCacheLoaderOnce = (0, lodash_1.memoize)(() => {
-    logger_1.default.warn `Docusaurus uses Webpack 5 and code=${'getCacheLoader()'} usage is now deprecated.`;
-});
-function getCacheLoaderDeprecated() {
-    warnCacheLoaderOnce();
-    return null;
-}
 /**
  * Helper function to modify webpack config
  * @param configureWebpack a webpack config or a function to modify config
@@ -146,8 +128,6 @@ function applyConfigureWebpack(configureWebpack, config, isServer, jsLoader, con
     const utils = {
         getStyleLoaders,
         getJSLoader: (0, exports.getCustomizableJSLoader)(jsLoader),
-        getBabelLoader: getBabelLoaderDeprecated,
-        getCacheLoader: getCacheLoaderDeprecated,
     };
     if (typeof configureWebpack === 'function') {
         const { mergeStrategy, ...res } = configureWebpack(config, isServer, utils, content);
@@ -248,24 +228,24 @@ ${err}`);
     }
 }
 // Read file and throw an error if it doesn't exist
-function readEnvFile(file, type) {
-    if (!fs_extra_1.default.existsSync(file)) {
+async function readEnvFile(file, type) {
+    if (!(await fs_extra_1.default.pathExists(file))) {
         throw new Error(`You specified ${type} in your env, but the file "${file}" can't be found.`);
     }
-    return fs_extra_1.default.readFileSync(file);
+    return fs_extra_1.default.readFile(file);
 }
-const appDirectory = fs_extra_1.default.realpathSync(process.cwd());
 // Get the https config
 // Return cert files if provided in env, otherwise just true or false
-function getHttpsConfig() {
+async function getHttpsConfig() {
+    const appDirectory = await fs_extra_1.default.realpath(process.cwd());
     const { SSL_CRT_FILE, SSL_KEY_FILE, HTTPS } = process.env;
     const isHttps = HTTPS === 'true';
     if (isHttps && SSL_CRT_FILE && SSL_KEY_FILE) {
         const crtFile = path_1.default.resolve(appDirectory, SSL_CRT_FILE);
         const keyFile = path_1.default.resolve(appDirectory, SSL_KEY_FILE);
         const config = {
-            cert: readEnvFile(crtFile, 'SSL_CRT_FILE'),
-            key: readEnvFile(keyFile, 'SSL_KEY_FILE'),
+            cert: await readEnvFile(crtFile, 'SSL_CRT_FILE'),
+            key: await readEnvFile(keyFile, 'SSL_KEY_FILE'),
         };
         validateKeyAndCerts({ ...config, keyFile, crtFile });
         return config;
@@ -308,8 +288,8 @@ function getMinimizer(useSimpleCssMinifier = false) {
                 output: {
                     ecma: 5,
                     comments: false,
-                    // Turned on because emoji and regex is not minified properly using default
-                    // https://github.com/facebook/create-react-app/issues/2488
+                    // Turned on because emoji and regex is not minified properly using
+                    // default. See https://github.com/facebook/create-react-app/issues/2488
                     ascii_only: true,
                 },
             },