feat(v2): support/use React v17 by default (#4218)

* chore(v2): allow React v17 as peer dependency * minor React 17 changes * Revert examples * Possible fix * Use @docusaurus/react-loadable fork * add back react-loadable to please eslint/ts/linters, even if it's unused in practice * missing dependency bump * move enzyme dependencies to docusaurus v1 Co-authored-by: slorber <lorber.sebastien@gmail.com>
2025-08-03 16:59:06 +02:00 · 2021-02-12 19:04:45 +03:00 · 2021-02-12 19:04:45 +03:00 · 175d9c3c8e
commit 175d9c3c8e
parent 6a94ad989c
31 changed files with 118 additions and 57 deletions
--- a/packages/docusaurus-1.x/package.json
+++ b/packages/docusaurus-1.x/package.json
@ -45,6 +45,8 @@
    "commander": "^4.0.1",
    "crowdin-cli": "^0.3.0",
    "cssnano": "^4.1.10",
+    "enzyme": "^3.10.0",
+    "enzyme-adapter-react-16": "^1.15.1",
    "escape-string-regexp": "^2.0.0",
    "express": "^4.17.1",
    "feed": "^4.2.1",
--- a/packages/docusaurus-init/templates/bootstrap/package.json
+++ b/packages/docusaurus-init/templates/bootstrap/package.json
@ -17,8 +17,8 @@
    "@docusaurus/preset-bootstrap": "2.0.0-alpha.70",
    "@mdx-js/react": "^1.5.8",
    "classnames": "^2.2.6",
-    "react": "^16.8.4",
-    "react-dom": "^16.8.4"
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
  },
  "browserslist": {
    "production": [
--- a/packages/docusaurus-init/templates/classic/package.json
+++ b/packages/docusaurus-init/templates/classic/package.json
@ -17,8 +17,8 @@
    "@docusaurus/preset-classic": "2.0.0-alpha.70",
    "@mdx-js/react": "^1.6.21",
    "clsx": "^1.1.1",
-    "react": "^16.8.4",
-    "react-dom": "^16.8.4"
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
  },
  "browserslist": {
    "production": [
--- a/packages/docusaurus-init/templates/facebook/package.json
+++ b/packages/docusaurus-init/templates/facebook/package.json
@ -21,8 +21,8 @@
    "@docusaurus/preset-classic": "2.0.0-alpha.70",
    "@mdx-js/react": "^1.6.21",
    "clsx": "^1.1.1",
-    "react": "^16.8.4",
-    "react-dom": "^16.8.4"
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
  },
  "devDependencies": {
    "babel-eslint": "^10.0.3",
--- a/packages/docusaurus-mdx-loader/package.json
+++ b/packages/docusaurus-mdx-loader/package.json
@ -44,8 +44,8 @@
    "unist-util-remove-position": "^2.0.1"
  },
  "peerDependencies": {
-    "react": "^16.8.4",
-    "react-dom": "^16.8.4"
+    "react": "^16.8.4 || ^17.0.0",
+    "react-dom": "^16.8.4 || ^17.0.0"
  },
  "engines": {
    "node": ">=10.15.1"
--- a/packages/docusaurus-migrate/src/index.ts
+++ b/packages/docusaurus-migrate/src/index.ts
@ -106,8 +106,8 @@ export async function migrateDocusaurusProject(
    '@docusaurus/core': DOCUSAURUS_VERSION,
    '@docusaurus/preset-classic': DOCUSAURUS_VERSION,
    clsx: '^1.1.1',
-    react: '^16.10.2',
-    'react-dom': '^16.10.2',
+    react: '^17.0.1',
+    'react-dom': '^17.0.1',
  };
  try {
    createClientRedirects(siteConfig, deps, config);
--- a/packages/docusaurus-plugin-client-redirects/package.json
+++ b/packages/docusaurus-plugin-client-redirects/package.json
@ -29,8 +29,8 @@
    "lodash": "^4.17.20"
  },
  "peerDependencies": {
-    "react": "^16.8.4",
-    "react-dom": "^16.8.4"
+    "react": "^16.8.4 || ^17.0.0",
+    "react-dom": "^16.8.4 || ^17.0.0"
  },
  "engines": {
    "node": ">=10.9.0"
--- a/packages/docusaurus-plugin-content-blog/package.json
+++ b/packages/docusaurus-plugin-content-blog/package.json
@ -35,8 +35,8 @@
    "webpack": "^4.44.1"
  },
  "peerDependencies": {
-    "react": "^16.8.4",
-    "react-dom": "^16.8.4"
+    "react": "^16.8.4 || ^17.0.0",
+    "react-dom": "^16.8.4 || ^17.0.0"
  },
  "engines": {
    "node": ">=10.15.1"
--- a/packages/docusaurus-plugin-content-docs/package.json
+++ b/packages/docusaurus-plugin-content-docs/package.json
@ -48,8 +48,8 @@
    "webpack": "^4.44.1"
  },
  "peerDependencies": {
-    "react": "^16.8.4",
-    "react-dom": "^16.8.4"
+    "react": "^16.8.4 || ^17.0.0",
+    "react-dom": "^16.8.4 || ^17.0.0"
  },
  "engines": {
    "node": ">=10.15.1"
--- a/packages/docusaurus-plugin-content-pages/package.json
+++ b/packages/docusaurus-plugin-content-pages/package.json
@ -33,8 +33,8 @@
    "webpack": "^4.44.1"
  },
  "peerDependencies": {
-    "react": "^16.8.4",
-    "react-dom": "^16.8.4"
+    "react": "^16.8.4 || ^17.0.0",
+    "react-dom": "^16.8.4 || ^17.0.0"
  },
  "engines": {
    "node": ">=10.15.1"
--- a/packages/docusaurus-plugin-debug/package.json
+++ b/packages/docusaurus-plugin-debug/package.json
@ -23,8 +23,8 @@
    "react-json-view": "^1.20.4"
  },
  "peerDependencies": {
-    "react": "^16.8.4",
-    "react-dom": "^16.8.4"
+    "react": "^16.8.4 || ^17.0.0",
+    "react-dom": "^16.8.4 || ^17.0.0"
  },
  "engines": {
    "node": ">=10.15.1"
--- a/packages/docusaurus-plugin-google-analytics/package.json
+++ b/packages/docusaurus-plugin-google-analytics/package.json
@ -16,8 +16,8 @@
    "@docusaurus/core": "2.0.0-alpha.70"
  },
  "peerDependencies": {
-    "react": "^16.8.4",
-    "react-dom": "^16.8.4"
+    "react": "^16.8.4 || ^17.0.0",
+    "react-dom": "^16.8.4 || ^17.0.0"
  },
  "engines": {
    "node": ">=10.15.1"
--- a/packages/docusaurus-plugin-google-gtag/package.json
+++ b/packages/docusaurus-plugin-google-gtag/package.json
@ -16,8 +16,8 @@
    "@docusaurus/core": "2.0.0-alpha.70"
  },
  "peerDependencies": {
-    "react": "^16.8.4",
-    "react-dom": "^16.8.4"
+    "react": "^16.8.4 || ^17.0.0",
+    "react-dom": "^16.8.4 || ^17.0.0"
  },
  "engines": {
    "node": ">=10.15.1"
--- a/packages/docusaurus-plugin-ideal-image/package.json
+++ b/packages/docusaurus-plugin-ideal-image/package.json
@ -30,8 +30,8 @@
    "webpack": "^4.44.1"
  },
  "peerDependencies": {
-    "react": "^16.8.4",
-    "react-dom": "^16.8.4"
+    "react": "^16.8.4 || ^17.0.0",
+    "react-dom": "^16.8.4 || ^17.0.0"
  },
  "engines": {
    "node": ">=10.15.1"
--- a/packages/docusaurus-plugin-pwa/package.json
+++ b/packages/docusaurus-plugin-pwa/package.json
@ -29,7 +29,7 @@
    "workbox-window": "^6.0.2"
  },
  "peerDependencies": {
-    "react": "^16.8.4",
-    "react-dom": "^16.8.4"
+    "react": "^16.8.4 || ^17.0.0",
+    "react-dom": "^16.8.4 || ^17.0.0"
  }
 }
--- a/packages/docusaurus-plugin-sitemap/package.json
+++ b/packages/docusaurus-plugin-sitemap/package.json
@ -25,8 +25,8 @@
    "sitemap": "^3.2.2"
  },
  "peerDependencies": {
-    "react": "^16.8.4",
-    "react-dom": "^16.8.4"
+    "react": "^16.8.4 || ^17.0.0",
+    "react-dom": "^16.8.4 || ^17.0.0"
  },
  "engines": {
    "node": ">=10.15.1"
--- a/packages/docusaurus-preset-bootstrap/package.json
+++ b/packages/docusaurus-preset-bootstrap/package.json
@ -20,8 +20,8 @@
    "@docusaurus/theme-bootstrap": "2.0.0-alpha.70"
  },
  "peerDependencies": {
-    "react": "^16.8.4",
-    "react-dom": "^16.8.4"
+    "react": "^16.8.4 || ^17.0.0",
+    "react-dom": "^16.8.4 || ^17.0.0"
  },
  "engines": {
    "node": ">=10.15.1"
--- a/packages/docusaurus-preset-classic/package.json
+++ b/packages/docusaurus-preset-classic/package.json
@ -25,8 +25,8 @@
    "@docusaurus/theme-search-algolia": "2.0.0-alpha.70"
  },
  "peerDependencies": {
-    "react": "^16.8.4",
-    "react-dom": "^16.8.4"
+    "react": "^16.8.4 || ^17.0.0",
+    "react-dom": "^16.8.4 || ^17.0.0"
  },
  "engines": {
    "node": ">=10.15.1"
--- a/packages/docusaurus-remark-plugin-npm2yarn/package.json
+++ b/packages/docusaurus-remark-plugin-npm2yarn/package.json
@ -21,8 +21,8 @@
    "to-vfile": "^6.0.0"
  },
  "peerDependencies": {
-    "react": "^16.8.4",
-    "react-dom": "^16.8.4"
+    "react": "^16.8.4 || ^17.0.0",
+    "react-dom": "^16.8.4 || ^17.0.0"
  },
  "engines": {
    "node": ">=10.15.1"
--- a/packages/docusaurus-theme-classic/package.json
+++ b/packages/docusaurus-theme-classic/package.json
@ -50,8 +50,8 @@
    "@docusaurus/module-type-aliases": "2.0.0-alpha.70"
  },
  "peerDependencies": {
-    "react": "^16.8.4",
-    "react-dom": "^16.8.4"
+    "react": "^16.8.4 || ^17.0.0",
+    "react-dom": "^16.8.4 || ^17.0.0"
  },
  "engines": {
    "node": ">=10.15.1"
--- a/packages/docusaurus-theme-common/package.json
+++ b/packages/docusaurus-theme-common/package.json
@ -28,8 +28,8 @@
    "@docusaurus/module-type-aliases": "2.0.0-alpha.70"
  },
  "peerDependencies": {
-    "react": "^16.8.4",
-    "react-dom": "^16.8.4"
+    "react": "^16.8.4 || ^17.0.0",
+    "react-dom": "^16.8.4 || ^17.0.0"
  },
  "engines": {
    "node": ">=10.15.1"
--- a/packages/docusaurus-theme-live-codeblock/package.json
+++ b/packages/docusaurus-theme-live-codeblock/package.json
@ -21,8 +21,8 @@
    "react-live": "^2.2.3"
  },
  "peerDependencies": {
-    "react": "^16.8.4",
-    "react-dom": "^16.8.4"
+    "react": "^16.8.4 || ^17.0.0",
+    "react-dom": "^16.8.4 || ^17.0.0"
  },
  "engines": {
    "node": ">=10.15.1"
--- a/packages/docusaurus-theme-search-algolia/package.json
+++ b/packages/docusaurus-theme-search-algolia/package.json
@ -25,8 +25,8 @@
    "lodash": "^4.17.19"
  },
  "peerDependencies": {
-    "react": "^16.8.4",
-    "react-dom": "^16.8.4"
+    "react": "^16.8.4 || ^17.0.0",
+    "react-dom": "^16.8.4 || ^17.0.0"
  },
  "engines": {
    "node": ">=10.15.1"
--- a/packages/docusaurus/package.json
+++ b/packages/docusaurus/package.json
@ -50,6 +50,7 @@
    "@babel/runtime-corejs3": "^7.12.5",
    "@babel/traverse": "^7.12.12",
    "@docusaurus/cssnano-preset": "2.0.0-alpha.70",
+    "@docusaurus/react-loadable": "5.5.0",
    "@docusaurus/types": "2.0.0-alpha.70",
    "@docusaurus/utils": "2.0.0-alpha.70",
    "@docusaurus/utils-validation": "2.0.0-alpha.70",
@ -86,6 +87,7 @@
    "lodash.isplainobject": "^4.0.6",
    "lodash.isstring": "^4.0.1",
    "mini-css-extract-plugin": "^0.8.0",
+    "module-alias": "^2.2.2",
    "nprogress": "^0.2.0",
    "null-loader": "^4.0.0",
    "optimize-css-assets-webpack-plugin": "^5.0.4",
@ -116,8 +118,8 @@
    "webpackbar": "^5.0.0-3"
  },
  "peerDependencies": {
-    "react": "^16.8.4",
-    "react-dom": "^16.8.4"
+    "react": "^16.8.4 || ^17.0.0",
+    "react-dom": "^16.8.4 || ^17.0.0"
  },
  "engines": {
    "node": ">=10.15.1"
--- a/packages/docusaurus/src/webpack/base.ts
+++ b/packages/docusaurus/src/webpack/base.ts
@ -20,6 +20,7 @@ import {
  getMinimizer,
 } from './utils';
 import {STATIC_DIR_NAME} from '../constants';
+import SharedModuleAliases from './sharedModuleAliases';

 const CSS_REGEX = /\.css$/;
 const CSS_MODULE_REGEX = /\.module\.css$/;
@ -101,6 +102,8 @@ export function createBaseConfig(
        process.cwd(),
      ],
      alias: {
+        ...SharedModuleAliases,
+
        '@site': siteDir,
        '@generated': generatedFilesDir,

--- a/packages/docusaurus/src/webpack/sharedModuleAliases.ts
+++ b/packages/docusaurus/src/webpack/sharedModuleAliases.ts
@ -0,0 +1,19 @@
+/**
+ * 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.
+ */
+
+import moduleAlias from 'module-alias';
+
+// The shared module aliases are module aliases that need to work in both SSR/NodeJS + Webpack
+const SharedModuleAliases = {
+  // Useful to fix the react-loadable warning
+  // See https://github.com/jamiebuilds/react-loadable/pull/213#issuecomment-778246548
+  'react-loadable': '@docusaurus/react-loadable',
+};
+
+moduleAlias.addAliases(SharedModuleAliases);
+
+export default SharedModuleAliases;