@docusaurus/core 2.0.0-beta.fc64c12e4 → 2.0.0

package/lib/webpack/plugins/WaitPlugin.js

@@ -1,37 +1,38 @@
-"use strict";
 /**
  * Copyright (c) Facebook, Inc. and its affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const path_1 = tslib_1.__importDefault(require("path"));
-const fs_extra_1 = tslib_1.__importDefault(require("fs-extra"));
-const wait_on_1 = tslib_1.__importDefault(require("wait-on"));
+
+const path = require('path');
+const fs = require('fs-extra');
+const {waitFile} = require('wait-file');
+
 class WaitPlugin {
-    constructor(options) {
-        this.filepath = options.filepath;
-    }
-    apply(compiler) {
-        // Before finishing the compilation step
-        compiler.hooks.make.tapAsync('WaitPlugin', (compilation, callback) => {
-            // To prevent 'waitFile' error on waiting non-existing directory
-            fs_extra_1.default.ensureDir(path_1.default.dirname(this.filepath), {}, () => {
-                // Wait until file exist
-                wait_on_1.default({
-                    resources: [this.filepath],
-                    interval: 300,
-                })
-                    .then(() => {
-                    callback();
-                })
-                    .catch((error) => {
-                    console.warn(`WaitPlugin error: ${error}`);
-                });
-            });
-        });
-    }
+  constructor(options) {
+    this.filepath = options.filepath;
+  }
+
+  apply(compiler) {
+    // Before finishing the compilation step
+    compiler.hooks.make.tapAsync('WaitPlugin', (compilation, callback) => {
+      // To prevent 'waitFile' error on waiting non-existing directory
+      fs.ensureDir(path.dirname(this.filepath), () => {
+        // Wait until file exist
+        waitFile({
+          resources: [this.filepath],
+          interval: 300,
+        })
+          .then(() => {
+            callback();
+          })
+          .catch((error) => {
+            console.warn(`WaitPlugin error: ${error}`);
+          });
+      });
+    });
+  }
 }
-exports.default = WaitPlugin;
+
+module.exports = WaitPlugin;

package/lib/webpack/server.d.ts

@@ -4,9 +4,9 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { Configuration } from 'webpack';
-import { Props } from '@docusaurus/types';
-export default function createServerConfig({ props, onLinksCollected, }: {
+import { type Locals } from '@slorber/static-site-generator-webpack-plugin';
+import type { Props } from '@docusaurus/types';
+import type { Configuration } from 'webpack';
+export default function createServerConfig({ props, onLinksCollected, onHeadTagsCollected, }: Pick<Locals, 'onLinksCollected' | 'onHeadTagsCollected'> & {
     props: Props;
-    onLinksCollected?: (staticPagePath: string, links: string[]) => void;
-}): Configuration;
+}): Promise<Configuration>;

package/lib/webpack/server.js

@@ -9,15 +9,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const path_1 = tslib_1.__importDefault(require("path"));
 const webpack_merge_1 = tslib_1.__importDefault(require("webpack-merge"));
+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 = tslib_1.__importDefault(require("@slorber/static-site-generator-webpack-plugin"));
 const base_1 = require("./base");
 const WaitPlugin_1 = tslib_1.__importDefault(require("./plugins/WaitPlugin"));
 const LogPlugin_1 = tslib_1.__importDefault(require("./plugins/LogPlugin"));
-const constants_1 = require("../constants");
-// Forked for Docusaurus: https://github.com/slorber/static-site-generator-webpack-plugin
-const static_site_generator_webpack_plugin_1 = tslib_1.__importDefault(require("@slorber/static-site-generator-webpack-plugin"));
-function createServerConfig({ props, onLinksCollected = () => { }, }) {
-    const { baseUrl, routesPaths, generatedFilesDir, headTags, preBodyTags, postBodyTags, ssrTemplate, siteConfig: { noIndex, trailingSlash }, } = props;
-    const config = base_1.createBaseConfig(props, true);
+const ssr_html_template_1 = tslib_1.__importDefault(require("./templates/ssr.html.template"));
+async function createServerConfig({ props, onLinksCollected, onHeadTagsCollected, }) {
+    const { baseUrl, routesPaths, generatedFilesDir, headTags, preBodyTags, postBodyTags, siteConfig: { noIndex, trailingSlash, ssrTemplate }, } = props;
+    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) => {
@@ -25,8 +26,8 @@ function createServerConfig({ props, onLinksCollected = () => { }, }) {
         routesLocation[ssgPath] = str;
         return ssgPath;
     });
-    const serverConfig = webpack_merge_1.default(config, {
-        target: `node${constants_1.NODE_MAJOR_VERSION}.${constants_1.NODE_MINOR_VERSION}`,
+    const serverConfig = (0, webpack_merge_1.default)(config, {
+        target: `node${utils_1.NODE_MAJOR_VERSION}.${utils_1.NODE_MINOR_VERSION}`,
         entry: {
             main: path_1.default.resolve(__dirname, '../client/serverEntry.js'),
         },
@@ -52,15 +53,23 @@ function createServerConfig({ props, onLinksCollected = () => { }, }) {
                     preBodyTags,
                     postBodyTags,
                     onLinksCollected,
-                    ssrTemplate,
+                    onHeadTagsCollected,
+                    ssrTemplate: ssrTemplate ?? ssr_html_template_1.default,
                     noIndex,
+                    DOCUSAURUS_VERSION: utils_1.DOCUSAURUS_VERSION,
                 },
                 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: '' },
+                // Secret way to set SSR plugin concurrency option
+                // Waiting for feedback before documenting this officially?
+                concurrency: process.env.DOCUSAURUS_SSR_CONCURRENCY
+                    ? parseInt(process.env.DOCUSAURUS_SSR_CONCURRENCY, 10)
+                    : undefined,
             }),
             // Show compilation progress bar.
             new LogPlugin_1.default({

package/lib/webpack/templates/ssr.html.template.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+declare const _default: "\n<!DOCTYPE html>\n<html <%~ it.htmlAttributes %>>\n  <head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <meta name=\"generator\" content=\"Docusaurus v<%= it.version %>\">\n    <% if (it.noIndex) { %>\n      <meta name=\"robots\" content=\"noindex, nofollow\" />\n    <% } %>\n    <%~ it.headTags %>\n    <% it.metaAttributes.forEach((metaAttribute) => { %>\n      <%~ metaAttribute %>\n    <% }); %>\n    <% it.stylesheets.forEach((stylesheet) => { %>\n      <link rel=\"stylesheet\" href=\"<%= it.baseUrl %><%= stylesheet %>\" />\n    <% }); %>\n    <% it.scripts.forEach((script) => { %>\n      <link rel=\"preload\" href=\"<%= it.baseUrl %><%= script %>\" as=\"script\">\n    <% }); %>\n  </head>\n  <body <%~ it.bodyAttributes %>>\n    <%~ it.preBodyTags %>\n    <div id=\"__docusaurus\">\n      <%~ it.appHtml %>\n    </div>\n    <% it.scripts.forEach((script) => { %>\n      <script src=\"<%= it.baseUrl %><%= script %>\"></script>\n    <% }); %>\n    <%~ it.postBodyTags %>\n  </body>\n</html>\n";
+export default _default;

package/lib/{client → webpack}/templates/ssr.html.template.js

@@ -1,11 +1,12 @@
+"use strict";
 /**
  * Copyright (c) Facebook, Inc. and its affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-
-module.exports = `
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = `
 <!DOCTYPE html>
 <html <%~ it.htmlAttributes %>>
   <head>

package/lib/webpack/utils.d.ts

@@ -5,13 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 /// <reference types="node" />
-import { Configuration, RuleSetRule, WebpackPluginInstance } from 'webpack';
-import { TransformOptions } from '@babel/core';
-import { ConfigureWebpackFn, ConfigurePostCssFn } from '@docusaurus/types';
-export declare function getStyleLoaders(isServer: boolean, cssOptions?: {
+import { type Configuration, type RuleSetRule, type WebpackPluginInstance } from 'webpack';
+import type { TransformOptions } from '@babel/core';
+import type { Plugin } 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;
@@ -29,33 +29,17 @@ export declare const getCustomizableJSLoader: (jsLoader?: "babel" | ((isServer:
  * @param content content loaded by the plugin
  * @returns final/ modified webpack config
  */
-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 applyConfigureWebpack(configureWebpack: NonNullable<Plugin['configureWebpack']>, config: Configuration, isServer: boolean, jsLoader: 'babel' | ((isServer: boolean) => RuleSetRule) | undefined, content: unknown): Configuration;
+export declare function applyConfigurePostCss(configurePostCss: NonNullable<Plugin['configurePostCss']>, config: Configuration): Configuration;
+declare global {
+    interface Error {
+        /** @see https://webpack.js.org/api/node/#error-handling */
+        details: unknown;
+    }
+}
 export declare function compile(config: Configuration[]): Promise<void>;
-declare type AssetFolder = 'images' | 'files' | 'fonts' | 'medias';
-declare type FileLoaderUtils = {
-    loaders: {
-        file: (options: {
-            folder: AssetFolder;
-        }) => RuleSetRule;
-        url: (options: {
-            folder: AssetFolder;
-        }) => RuleSetRule;
-        inlineMarkdownImageFileLoader: string;
-        inlineMarkdownLinkFileLoader: string;
-    };
-    rules: {
-        images: () => RuleSetRule;
-        fonts: () => RuleSetRule;
-        media: () => RuleSetRule;
-        svg: () => RuleSetRule;
-        otherAssets: () => RuleSetRule;
-    };
-};
-export declare function getFileLoaderUtils(): FileLoaderUtils;
-export declare function getHttpsConfig(): boolean | {
+export declare function getHttpsConfig(): Promise<boolean | {
     cert: Buffer;
     key: Buffer;
-};
+}>;
 export declare function getMinimizer(useSimpleCssMinifier?: boolean): WebpackPluginInstance[];
-export {};

package/lib/webpack/utils.js

@@ -6,21 +6,25 @@
  * LICENSE file in the root directory of this source tree.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getMinimizer = exports.getHttpsConfig = exports.getFileLoaderUtils = exports.compile = exports.applyConfigurePostCss = exports.applyConfigureWebpack = exports.getCustomizableJSLoader = exports.getBabelOptions = exports.getCustomBabelConfigFilePath = exports.getStyleLoaders = void 0;
+exports.getMinimizer = exports.getHttpsConfig = exports.compile = exports.applyConfigurePostCss = exports.applyConfigureWebpack = exports.getCustomizableJSLoader = exports.getBabelOptions = exports.getCustomBabelConfigFilePath = exports.getStyleLoaders = void 0;
 const tslib_1 = require("tslib");
+const fs_extra_1 = tslib_1.__importDefault(require("fs-extra"));
+const path_1 = tslib_1.__importDefault(require("path"));
+const crypto_1 = tslib_1.__importDefault(require("crypto"));
+const logger_1 = tslib_1.__importDefault(require("@docusaurus/logger"));
+const utils_1 = require("@docusaurus/utils");
 const mini_css_extract_plugin_1 = tslib_1.__importDefault(require("mini-css-extract-plugin"));
 const webpack_merge_1 = require("webpack-merge");
 const webpack_1 = tslib_1.__importDefault(require("webpack"));
-const fs_extra_1 = tslib_1.__importDefault(require("fs-extra"));
 const terser_webpack_plugin_1 = tslib_1.__importDefault(require("terser-webpack-plugin"));
 const css_minimizer_webpack_plugin_1 = tslib_1.__importDefault(require("css-minimizer-webpack-plugin"));
-const path_1 = tslib_1.__importDefault(require("path"));
-const crypto_1 = tslib_1.__importDefault(require("crypto"));
-const chalk_1 = tslib_1.__importDefault(require("chalk"));
-const constants_1 = require("../constants");
-const lodash_1 = require("lodash");
 // Utility method to get style loaders
-function getStyleLoaders(isServer, cssOptions = {}) {
+function getStyleLoaders(isServer, cssOptionsArg = {}) {
+    const cssOptions = {
+        // TODO turn esModule on later, see https://github.com/facebook/docusaurus/pull/6424
+        esModule: false,
+        ...cssOptionsArg,
+    };
     if (isServer) {
         return cssOptions.modules
             ? [
@@ -66,7 +70,7 @@ function getStyleLoaders(isServer, cssOptions = {}) {
                     // https://github.com/facebook/create-react-app/issues/2677
                     ident: 'postcss',
                     plugins: [
-                        // eslint-disable-next-line @typescript-eslint/no-var-requires, global-require
+                        // eslint-disable-next-line global-require
                         require('autoprefixer'),
                     ],
                 },
@@ -75,9 +79,9 @@ function getStyleLoaders(isServer, cssOptions = {}) {
     ];
 }
 exports.getStyleLoaders = getStyleLoaders;
-function getCustomBabelConfigFilePath(siteDir) {
-    const customBabelConfigurationPath = path_1.default.join(siteDir, constants_1.BABEL_CONFIG_FILE_NAME);
-    return fs_extra_1.default.existsSync(customBabelConfigurationPath)
+async function getCustomBabelConfigFilePath(siteDir) {
+    const customBabelConfigurationPath = path_1.default.join(siteDir, utils_1.BABEL_CONFIG_FILE_NAME);
+    return (await fs_extra_1.default.pathExists(customBabelConfigurationPath))
         ? customBabelConfigurationPath
         : undefined;
 }
@@ -90,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 ?? { presets: [require.resolve('../babel/preset')] }),
+        babelrc: false,
+        configFile: false,
+        caller: { name: isServer ? 'server' : 'client' },
+    };
 }
 exports.getBabelOptions = getBabelOptions;
 // Name is generic on purpose
@@ -111,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 = lodash_1.memoize(function () {
-    console.warn(chalk_1.default.yellow('Docusaurus plans to support multiple JS loader strategies (Babel, esbuild...): "getBabelLoader(isServer)" is now deprecated in favor of "getJSLoader({isServer})".'));
-});
-const getBabelLoaderDeprecated = function getBabelLoaderDeprecated(isServer, babelOptions) {
-    warnBabelLoaderOnce();
-    return getDefaultBabelLoader({ isServer, babelOptions });
-};
-// TODO remove this before end of 2021 ?
-const warnCacheLoaderOnce = lodash_1.memoize(function () {
-    console.warn(chalk_1.default.yellow('Docusaurus uses Webpack 5 and 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
@@ -140,30 +127,23 @@ function applyConfigureWebpack(configureWebpack, config, isServer, jsLoader, con
     // Export some utility functions
     const utils = {
         getStyleLoaders,
-        getJSLoader: exports.getCustomizableJSLoader(jsLoader),
-        getBabelLoader: getBabelLoaderDeprecated,
-        getCacheLoader: getCacheLoaderDeprecated,
+        getJSLoader: (0, exports.getCustomizableJSLoader)(jsLoader),
     };
     if (typeof configureWebpack === 'function') {
-        const { mergeStrategy, ...res } = configureWebpack(config, isServer, utils, content);
-        if (res && typeof res === 'object') {
-            // @ts-expect-error: annoying error due to enums: https://github.com/survivejs/webpack-merge/issues/179
-            const customizeRules = mergeStrategy !== null && mergeStrategy !== void 0 ? mergeStrategy : {};
-            return webpack_merge_1.mergeWithCustomize({
-                customizeArray: webpack_merge_1.customizeArray(customizeRules),
-                customizeObject: webpack_merge_1.customizeObject(customizeRules),
-            })(config, res);
-        }
+        const { mergeStrategy, ...res } = configureWebpack(config, isServer, utils, content) ?? {};
+        const customizeRules = mergeStrategy ?? {};
+        return (0, webpack_merge_1.mergeWithCustomize)({
+            customizeArray: (0, webpack_merge_1.customizeArray)(customizeRules),
+            customizeObject: (0, webpack_merge_1.customizeObject)(customizeRules),
+        })(config, res);
     }
     return config;
 }
 exports.applyConfigureWebpack = applyConfigureWebpack;
 function applyConfigurePostCss(configurePostCss, config) {
-    var _a, _b;
-    // TODO not ideal heuristic but good enough for our usecase?
+    // Not ideal heuristic but good enough for our use-case?
     function isPostCssLoader(loader) {
-        var _a, _b;
-        return !!((_b = (_a = loader) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.postcssOptions);
+        return !!loader?.options?.postcssOptions;
     }
     // Does not handle all edge cases, but good enough for now
     function overridePostCssOptions(entry) {
@@ -176,42 +156,39 @@ function applyConfigurePostCss(configurePostCss, config) {
         else if (Array.isArray(entry.use)) {
             entry.use
                 .filter((u) => typeof u === 'object')
-                .forEach(overridePostCssOptions);
+                .forEach((rule) => overridePostCssOptions(rule));
         }
     }
-    (_b = (_a = config.module) === null || _a === void 0 ? void 0 : _a.rules) === null || _b === void 0 ? void 0 : _b.forEach(overridePostCssOptions);
+    config.module?.rules?.forEach((rule) => overridePostCssOptions(rule));
     return config;
 }
 exports.applyConfigurePostCss = applyConfigurePostCss;
 function compile(config) {
     return new Promise((resolve, reject) => {
-        const compiler = webpack_1.default(config);
+        const compiler = (0, webpack_1.default)(config);
         compiler.run((err, stats) => {
-            var _a;
             if (err) {
-                console.error(err.stack || err);
-                // @ts-expect-error: see https://webpack.js.org/api/node/#error-handling
+                logger_1.default.error(err.stack ?? err);
                 if (err.details) {
-                    // @ts-expect-error: see https://webpack.js.org/api/node/#error-handling
-                    console.error(err.details);
+                    logger_1.default.error(err.details);
                 }
                 reject(err);
             }
-            // let plugins consume all the stats
-            const errorsWarnings = stats === null || stats === void 0 ? void 0 : stats.toJson('errors-warnings');
-            if (stats === null || stats === void 0 ? void 0 : stats.hasErrors()) {
+            // Let plugins consume all the stats
+            const errorsWarnings = stats?.toJson('errors-warnings');
+            if (stats?.hasErrors()) {
                 reject(new Error('Failed to compile with errors.'));
             }
-            if (errorsWarnings && (stats === null || stats === void 0 ? void 0 : stats.hasWarnings())) {
-                (_a = errorsWarnings.warnings) === null || _a === void 0 ? void 0 : _a.forEach((warning) => {
-                    console.warn(warning);
+            if (errorsWarnings && stats?.hasWarnings()) {
+                errorsWarnings.warnings?.forEach((warning) => {
+                    logger_1.default.warn(warning);
                 });
             }
             // Webpack 5 requires calling close() so that persistent caching works
             // See https://github.com/webpack/webpack.js.org/pull/4775
             compiler.close((errClose) => {
                 if (errClose) {
-                    console.error(chalk_1.default.red('Error while closing Webpack compiler:', errClose));
+                    logger_1.default.error(`Error while closing Webpack compiler: ${errClose}`);
                     reject(errClose);
                 }
                 else {
@@ -222,145 +199,46 @@ function compile(config) {
     });
 }
 exports.compile = compile;
-// Inspired by https://github.com/gatsbyjs/gatsby/blob/8e6e021014da310b9cc7d02e58c9b3efe938c665/packages/gatsby/src/utils/webpack-utils.ts#L447
-function getFileLoaderUtils() {
-    // files/images < 10kb will be inlined as base64 strings directly in the html
-    const urlLoaderLimit = 10000;
-    // defines the path/pattern of the assets handled by webpack
-    const fileLoaderFileName = (folder) => `${constants_1.OUTPUT_STATIC_ASSETS_DIR_NAME}/${folder}/[name]-[hash].[ext]`;
-    const loaders = {
-        file: (options) => {
-            return {
-                loader: require.resolve(`file-loader`),
-                options: {
-                    name: fileLoaderFileName(options.folder),
-                },
-            };
-        },
-        url: (options) => {
-            return {
-                loader: require.resolve(`url-loader`),
-                options: {
-                    limit: urlLoaderLimit,
-                    name: fileLoaderFileName(options.folder),
-                    fallback: require.resolve(`file-loader`),
-                },
-            };
-        },
-        // TODO find a better solution to avoid conflicts with the ideal-image plugin
-        // TODO this may require a little breaking change for ideal-image users?
-        // Maybe with the ideal image plugin, all md images should be "ideal"?
-        // This is used to force url-loader+file-loader on markdown images
-        // https://webpack.js.org/concepts/loaders/#inline
-        inlineMarkdownImageFileLoader: `!url-loader?limit=${urlLoaderLimit}&name=${fileLoaderFileName('images')}&fallback=file-loader!`,
-        inlineMarkdownLinkFileLoader: `!file-loader?name=${fileLoaderFileName('files')}!`,
-    };
-    const rules = {
-        /**
-         * Loads image assets, inlines images via a data URI if they are below
-         * the size threshold
-         */
-        images: () => {
-            return {
-                use: [loaders.url({ folder: 'images' })],
-                test: /\.(ico|jpg|jpeg|png|gif|webp)(\?.*)?$/,
-            };
-        },
-        fonts: () => {
-            return {
-                use: [loaders.url({ folder: 'fonts' })],
-                test: /\.(woff|woff2|eot|ttf|otf)$/,
-            };
-        },
-        /**
-         * Loads audio and video and inlines them via a data URI if they are below
-         * the size threshold
-         */
-        media: () => {
-            return {
-                use: [loaders.url({ folder: 'medias' })],
-                test: /\.(mp4|webm|ogv|wav|mp3|m4a|aac|oga|flac)$/,
-            };
-        },
-        svg: () => {
-            return {
-                test: /\.svg?$/,
-                oneOf: [
-                    {
-                        use: [
-                            {
-                                loader: '@svgr/webpack',
-                                options: {
-                                    prettier: false,
-                                    svgo: true,
-                                    svgoConfig: {
-                                        plugins: [{ removeViewBox: false }],
-                                    },
-                                    titleProp: true,
-                                    ref: ![path_1.default],
-                                },
-                            },
-                        ],
-                        // We don't want to use SVGR loader for non-React source code
-                        // ie we don't want to use SVGR for CSS files...
-                        issuer: {
-                            and: [/\.(ts|tsx|js|jsx|md|mdx)$/],
-                        },
-                    },
-                    {
-                        use: [loaders.url({ folder: 'images' })],
-                    },
-                ],
-            };
-        },
-        otherAssets: () => {
-            return {
-                use: [loaders.file({ folder: 'files' })],
-                test: /\.(pdf|doc|docx|xls|xlsx|zip|rar)$/,
-            };
-        },
-    };
-    return { loaders, rules };
-}
-exports.getFileLoaderUtils = getFileLoaderUtils;
 // Ensure the certificate and key provided are valid and if not
 // throw an easy to debug error
-function validateKeyAndCerts({ cert, key, keyFile, crtFile }) {
+function validateKeyAndCerts({ cert, key, keyFile, crtFile, }) {
     let encrypted;
     try {
         // publicEncrypt will throw an error with an invalid cert
         encrypted = crypto_1.default.publicEncrypt(cert, Buffer.from('test'));
     }
     catch (err) {
-        throw new Error(`The certificate "${chalk_1.default.yellow(crtFile)}" is invalid.\n${err.message}`);
+        logger_1.default.error `The certificate path=${crtFile} is invalid.`;
+        throw err;
     }
     try {
         // privateDecrypt will throw an error with an invalid key
         crypto_1.default.privateDecrypt(key, encrypted);
     }
     catch (err) {
-        throw new Error(`The certificate key "${chalk_1.default.yellow(keyFile)}" is invalid.\n${err.message}`);
+        logger_1.default.error `The certificate key path=${keyFile} is invalid.`;
+        throw err;
     }
 }
 // Read file and throw an error if it doesn't exist
-function readEnvFile(file, type) {
-    if (!fs_extra_1.default.existsSync(file)) {
-        throw new Error(`You specified ${chalk_1.default.cyan(type)} in your env, but the file "${chalk_1.default.yellow(file)}" can't be found.`);
+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;
@@ -386,12 +264,12 @@ function getMinimizer(useSimpleCssMinifier = false) {
             parallel: getTerserParallel(),
             terserOptions: {
                 parse: {
-                    // we want uglify-js to parse ecma 8 code. However, we don't want it
+                    // We want uglify-js to parse ecma 8 code. However, we don't want it
                     // to apply any minification steps that turns valid ecma 5 code
                     // into invalid ecma 5 code. This is why the 'compress' and 'output'
                     // sections only apply transformations that are ecma 5 safe
                     // https://github.com/facebook/create-react-app/pull/4234
-                    ecma: 8,
+                    ecma: 2020,
                 },
                 compress: {
                     ecma: 5,
@@ -403,8 +281,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,
                 },
             },
@@ -429,6 +307,7 @@ function getMinimizer(useSimpleCssMinifier = false) {
                     level: {
                         1: {
                             all: false,
+                            removeWhitespace: true,
                         },
                         2: {
                             all: true,