facebook · slorber · Apr 30, 2021 · Jan 22, 2021 · Feb 5, 2021 · Feb 9, 2021
diff --git a/.github/workflows/v2-build-time-perf.yml b/.github/workflows/v2-build-time-perf.yml
@@ -25,11 +25,11 @@ jobs:
       # Ensure build with a cold cache does not increase too much
       - name: Build (cold cache)
         run: yarn workspace docusaurus-2-website build
-        timeout-minutes: 10
+        timeout-minutes: 8
 
       # Ensure build with a warm cache does not increase too much
       - name: Build (warm cache)
         run: yarn workspace docusaurus-2-website build
-        timeout-minutes: 10
+        timeout-minutes: 2
 
     # TODO post a Github comment with build with perf warnings?
diff --git a/package.json b/package.json
@@ -71,10 +71,11 @@
     "@formatjs/intl-datetimeformat": "^3.2.12",
     "@formatjs/intl-numberformat": "^6.2.2",
     "@formatjs/intl-pluralrules": "^4.0.11",
+    "@types/cssnano": "^4.0.0",
     "@types/express": "^4.17.2",
     "@types/fs-extra": "^9.0.6",
     "@types/jest": "^26.0.20",
-    "@types/loader-utils": "^1.1.3",
+    "@types/loader-utils": "^2.0.1",
     "@types/lodash": "^4.14.168",
     "@types/node": "^14.14.22",
     "@types/prismjs": "^1.16.2",
@@ -87,8 +88,7 @@
     "@types/semver": "^7.1.0",
     "@types/shelljs": "^0.8.6",
     "@types/wait-on": "^5.2.0",
-    "@types/webpack": "^4.41.0",
-    "@types/webpack-dev-server": "^3.9.0",
+    "@types/webpack-dev-server": "^3.11.1",
     "@types/webpack-merge": "^4.1.5",
     "@typescript-eslint/eslint-plugin": "^4.18.0",
     "@typescript-eslint/parser": "^4.18.0",

diff --git a/packages/docusaurus-mdx-loader/package.json b/packages/docusaurus-mdx-loader/package.json
@@ -28,13 +28,13 @@
     "file-loader": "^6.2.0",
     "fs-extra": "^9.1.0",
     "github-slugger": "^1.3.0",
-    "loader-utils": "^2.0.0",
+    "gray-matter": "^4.0.2",
     "mdast-util-to-string": "^2.0.0",
     "remark-emoji": "^2.1.0",
     "stringify-object": "^3.3.0",
     "unist-util-visit": "^2.0.2",
     "url-loader": "^4.1.1",
-    "webpack": "^4.44.1"
+    "webpack": "^5.28.0"
   },
   "devDependencies": {
     "@docusaurus/types": "2.0.0-alpha.72",

diff --git a/packages/docusaurus-mdx-loader/src/index.js b/packages/docusaurus-mdx-loader/src/index.js
@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-const {getOptions} = require('loader-utils');
 const {readFile} = require('fs-extra');
 const mdx = require('@mdx-js/mdx');
 const emoji = require('remark-emoji');
@@ -24,7 +23,8 @@ const DEFAULT_OPTIONS = {
 
 module.exports = async function docusaurusMdxLoader(fileString) {
   const callback = this.async();
-  const reqOptions = getOptions(this) || {};
+
+  const reqOptions = this.getOptions() || {};
 
   const {frontMatter, content, hasFrontMatter} = readFrontMatter(
     fileString,

diff --git a/packages/docusaurus-mdx-loader/src/remark/transformImage/index.js b/packages/docusaurus-mdx-loader/src/remark/transformImage/index.js
@@ -38,7 +38,7 @@ const createJSX = (node, pathUrl) => {
 };
 
 async function ensureImageFileExist(imagePath, sourceFilePath) {
-  const imageExists = await fs.exists(imagePath);
+  const imageExists = await fs.pathExists(imagePath);
   if (!imageExists) {
     throw new Error(
       `Image ${toMessageRelativeFilePath(

diff --git a/packages/docusaurus-mdx-loader/src/remark/transformLinks/index.js b/packages/docusaurus-mdx-loader/src/remark/transformLinks/index.js
@@ -20,7 +20,7 @@ const {
 } = getFileLoaderUtils();
 
 async function ensureAssetFileExist(fileSystemAssetPath, sourceFilePath) {
-  const assetExists = await fs.exists(fileSystemAssetPath);
+  const assetExists = await fs.pathExists(fileSystemAssetPath);
   if (!assetExists) {
     throw new Error(
       `Asset ${toMessageRelativeFilePath(
@@ -85,12 +85,12 @@ async function convertToAssetLinkIfNeeded({node, staticDir, filePath}) {
     toAssetLinkNode(fileSystemAssetPath);
   } else if (path.isAbsolute(assetPath)) {
     const fileSystemAssetPath = path.join(staticDir, assetPath);
-    if (await fs.exists(fileSystemAssetPath)) {
+    if (await fs.pathExists(fileSystemAssetPath)) {
       toAssetLinkNode(fileSystemAssetPath);
     }
   } else {
     const fileSystemAssetPath = path.join(path.dirname(filePath), assetPath);
-    if (await fs.exists(fileSystemAssetPath)) {
+    if (await fs.pathExists(fileSystemAssetPath)) {
       toAssetLinkNode(fileSystemAssetPath);
     }
   }

diff --git a/packages/docusaurus-plugin-content-blog/package.json b/packages/docusaurus-plugin-content-blog/package.json
@@ -27,12 +27,12 @@
     "feed": "^4.2.2",
     "fs-extra": "^9.1.0",
     "globby": "^11.0.2",
-    "loader-utils": "^1.2.3",
+    "loader-utils": "^2.0.0",
     "lodash": "^4.17.20",
     "reading-time": "^1.3.0",
     "remark-admonitions": "^1.2.1",
     "tslib": "^2.1.0",
-    "webpack": "^4.44.1"
+    "webpack": "^5.28.0"
   },
   "peerDependencies": {
     "react": "^16.8.4 || ^17.0.0",

diff --git a/packages/docusaurus-plugin-content-blog/src/index.ts b/packages/docusaurus-plugin-content-blog/src/index.ts
@@ -44,7 +44,7 @@ import {
   OptionValidationContext,
   ValidationResult,
 } from '@docusaurus/types';
-import {Configuration, Loader} from 'webpack';
+import {Configuration} from 'webpack';
 import {
   generateBlogFeed,
   generateBlogPosts,
@@ -401,7 +401,7 @@ export default function pluginContentBlog(
     configureWebpack(
       _config: Configuration,
       isServer: boolean,
-      {getBabelLoader, getCacheLoader}: ConfigureWebpackUtils,
+      {getJSLoader}: ConfigureWebpackUtils,
     ) {
       const {
         rehypePlugins,
@@ -441,8 +441,7 @@ export default function pluginContentBlog(
                 // Trailing slash is important, see https://github.com/facebook/docusaurus/pull/3970
                 .map(addTrailingPathSeparator),
               use: [
-                getCacheLoader(isServer),
-                getBabelLoader(isServer),
+                getJSLoader({isServer}),
                 {
                   loader: require.resolve('@docusaurus/mdx-loader'),
                   options: {
@@ -466,7 +465,7 @@ export default function pluginContentBlog(
                   loader: path.resolve(__dirname, './markdownLoader.js'),
                   options: markdownLoaderOptions,
                 },
-              ].filter(Boolean) as Loader[],
+              ].filter(Boolean),
             },
           ],
         },

diff --git a/packages/docusaurus-plugin-content-blog/src/markdownLoader.ts b/packages/docusaurus-plugin-content-blog/src/markdownLoader.ts
@@ -5,16 +5,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {loader} from 'webpack';
 import {truncate, linkify} from './blogUtils';
-import {parseQuery, getOptions} from 'loader-utils';
+import {parseQuery} from 'loader-utils';
 import {BlogMarkdownLoaderOptions} from './types';
 
-const markdownLoader: loader.Loader = function (source) {
+// TODO temporary until Webpack5 export this type
+// see https://github.com/webpack/webpack/issues/11630
+interface Loader extends Function {
+  (this: any, source: string): string | Buffer | void | undefined;
+}
+
+const markdownLoader: Loader = function (source) {
   const filePath = this.resourcePath;
   const fileString = source as string;
   const callback = this.async();
-  const markdownLoaderOptions = getOptions(this) as BlogMarkdownLoaderOptions;
+  const markdownLoaderOptions = this.getOptions() as BlogMarkdownLoaderOptions;
 
   // Linkify blog posts
   let finalContent = linkify({
@@ -24,8 +29,8 @@ const markdownLoader: loader.Loader = function (source) {
   });
 
   // Truncate content if requested (e.g: file.md?truncated=true).
-  const truncated: string | undefined = this.resourceQuery
-    ? parseQuery(this.resourceQuery).truncated
+  const truncated: boolean | undefined = this.resourceQuery
+    ? !!parseQuery(this.resourceQuery).truncated
     : undefined;
 
   if (truncated) {

diff --git a/packages/docusaurus-plugin-content-docs/package.json b/packages/docusaurus-plugin-content-docs/package.json
@@ -34,13 +34,12 @@
     "fs-extra": "^9.1.0",
     "globby": "^11.0.2",
     "import-fresh": "^3.2.2",
-    "loader-utils": "^1.2.3",
     "lodash": "^4.17.20",
     "remark-admonitions": "^1.2.1",
     "shelljs": "^0.8.4",
     "tslib": "^2.1.0",
     "utility-types": "^3.10.0",
-    "webpack": "^4.44.1"
+    "webpack": "^5.28.0"
   },
   "peerDependencies": {
     "react": "^16.8.4 || ^17.0.0",

diff --git a/packages/docusaurus-plugin-content-docs/src/__tests__/index.test.ts b/packages/docusaurus-plugin-content-docs/src/__tests__/index.test.ts
@@ -27,7 +27,6 @@ import {normalizePluginOptions} from '@docusaurus/utils-validation';
 import {DocMetadata, LoadedVersion} from '../types';
 import {toSidebarsProp} from '../props';
 
-// @ts-expect-error: TODO typedefs missing?
 import {validate} from 'webpack';
 
 function findDocById(version: LoadedVersion, unversionedId: string) {
@@ -233,7 +232,7 @@ describe('simple website', () => {
       false,
     );
     const errors = validate(config);
-    expect(errors.length).toBe(0);
+    expect(errors).toBeUndefined();
   });
 
   test('content', async () => {

diff --git a/packages/docusaurus-plugin-content-docs/src/index.ts b/packages/docusaurus-plugin-content-docs/src/index.ts
@@ -319,7 +319,7 @@ export default function pluginContentDocs(
     },
 
     configureWebpack(_config, isServer, utils) {
-      const {getBabelLoader, getCacheLoader} = utils;
+      const {getJSLoader} = utils;
       const {
         rehypePlugins,
         remarkPlugins,
@@ -349,8 +349,7 @@ export default function pluginContentDocs(
             // Trailing slash is important, see https://github.com/facebook/docusaurus/pull/3970
             .map(addTrailingPathSeparator),
           use: compact([
-            getCacheLoader(isServer),
-            getBabelLoader(isServer),
+            getJSLoader({isServer}),
             {
               loader: require.resolve('@docusaurus/mdx-loader'),
               options: {
@@ -375,16 +374,13 @@ export default function pluginContentDocs(
         };
       }
 
-      // Suppress warnings about non-existing of versions file.
-      const stats = {
-        warningsFilter: [VERSIONS_JSON_FILE],
-      };
-
       return {
-        stats,
-        devServer: {
-          stats,
-        },
+        ignoreWarnings: [
+          // Suppress warnings about non-existing of versions file.
+          (e) =>
+            e.message.includes("Can't resolve") &&
+            e.message.includes(VERSIONS_JSON_FILE),
+        ],
         resolve: {
           alias: {
             '~docs': pluginDataDirRoot,

diff --git a/packages/docusaurus-plugin-content-docs/src/markdown/index.ts b/packages/docusaurus-plugin-content-docs/src/markdown/index.ts
@@ -5,15 +5,19 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {getOptions} from 'loader-utils';
-import {loader} from 'webpack';
 import {linkify} from './linkify';
 import {DocsMarkdownOption} from '../types';
 
-const markdownLoader: loader.Loader = function (source) {
+// TODO temporary until Webpack5 export this type
+// see https://github.com/webpack/webpack/issues/11630
+interface Loader extends Function {
+  (this: any, source: string): string | Buffer | void | undefined;
+}
+
+const markdownLoader: Loader = function (source) {
   const fileString = source as string;
   const callback = this.async();
-  const options = getOptions(this) as DocsMarkdownOption;
+  const options = this.getOptions() as DocsMarkdownOption;
   return (
     callback && callback(null, linkify(fileString, this.resourcePath, options))
   );

diff --git a/packages/docusaurus-plugin-content-pages/package.json b/packages/docusaurus-plugin-content-pages/package.json
@@ -24,13 +24,12 @@
     "@docusaurus/utils": "2.0.0-alpha.72",
     "@docusaurus/utils-validation": "2.0.0-alpha.72",
     "globby": "^11.0.2",
-    "loader-utils": "^1.2.3",
     "lodash": "^4.17.20",
     "minimatch": "^3.0.4",
     "remark-admonitions": "^1.2.1",
     "slash": "^3.0.0",
     "tslib": "^2.1.0",
-    "webpack": "^4.44.1"
+    "webpack": "^5.28.0"
   },
   "peerDependencies": {
     "react": "^16.8.4 || ^17.0.0",

diff --git a/packages/docusaurus-plugin-content-pages/src/index.ts b/packages/docusaurus-plugin-content-pages/src/index.ts
@@ -26,7 +26,7 @@ import {
   ValidationResult,
   ConfigureWebpackUtils,
 } from '@docusaurus/types';
-import {Configuration, Loader} from 'webpack';
+import {Configuration} from 'webpack';
 import admonitions from 'remark-admonitions';
 import {PluginOptionSchema} from './pluginOptionSchema';
 import {
@@ -192,7 +192,7 @@ export default function pluginContentPages(
     configureWebpack(
       _config: Configuration,
       isServer: boolean,
-      {getBabelLoader, getCacheLoader}: ConfigureWebpackUtils,
+      {getJSLoader}: ConfigureWebpackUtils,
     ) {
       const {
         rehypePlugins,
@@ -214,8 +214,7 @@ export default function pluginContentPages(
                 // Trailing slash is important, see https://github.com/facebook/docusaurus/pull/3970
                 .map(addTrailingPathSeparator),
               use: [
-                getCacheLoader(isServer),
-                getBabelLoader(isServer),
+                getJSLoader({isServer}),
                 {
                   loader: require.resolve('@docusaurus/mdx-loader'),
                   options: {
@@ -248,7 +247,7 @@ export default function pluginContentPages(
                     // contentPath,
                   },
                 },
-              ].filter(Boolean) as Loader[],
+              ].filter(Boolean),
             },
           ],
         },

diff --git a/packages/docusaurus-plugin-content-pages/src/markdownLoader.ts b/packages/docusaurus-plugin-content-pages/src/markdownLoader.ts
@@ -5,13 +5,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {loader} from 'webpack';
-// import {getOptions} from 'loader-utils';
+// TODO temporary until Webpack5 export this type
+// see https://github.com/webpack/webpack/issues/11630
+interface Loader extends Function {
+  (this: any, source: string): string | Buffer | void | undefined;
+}
 
-const markdownLoader: loader.Loader = function (fileString) {
+const markdownLoader: Loader = function (fileString) {
   const callback = this.async();
 
-  // const options = getOptions(this);
+  // const options = this.getOptions();
 
   // TODO provide additinal md processing here? like interlinking pages?
   // fileString = linkify(fileString)

diff --git a/packages/docusaurus-plugin-ideal-image/package.json b/packages/docusaurus-plugin-ideal-image/package.json
@@ -24,11 +24,11 @@
     "@docusaurus/lqip-loader": "2.0.0-alpha.72",
     "@docusaurus/types": "2.0.0-alpha.72",
     "@endiliey/react-ideal-image": "^0.0.11",
-    "@endiliey/responsive-loader": "^1.3.2",
     "react-waypoint": "^9.0.2",
+    "responsive-loader-modern": "^1.3.2",
     "sharp": "^0.27.1",
     "tslib": "^2.1.0",
-    "webpack": "^4.44.1"
+    "webpack": "^5.28.0"
   },
   "peerDependencies": {
     "react": "^16.8.4 || ^17.0.0",

diff --git a/packages/docusaurus-plugin-ideal-image/src/index.ts b/packages/docusaurus-plugin-ideal-image/src/index.ts
@@ -35,12 +35,12 @@ export default function (
               use: [
                 require.resolve('@docusaurus/lqip-loader'),
                 {
-                  loader: require.resolve('@endiliey/responsive-loader'),
+                  loader: require.resolve('responsive-loader-modern'),
                   options: {
                     emitFile: !isServer, // don't emit for server-side rendering
                     disable: !isProd,
                     // eslint-disable-next-line
-                    adapter: require('@endiliey/responsive-loader/sharp'),
+                    adapter: require('responsive-loader-modern/sharp'),
                     name: isProd
                       ? 'assets/ideal-img/[name].[hash:hex:7].[width].[ext]'
                       : 'assets/ideal-img/[name].[width].[ext]',