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>

Author: lex111

examples/classic/package.json

@@ -33,4 +33,4 @@
     ]
   },
   "description": "Docusaurus example project"
-}
+}

examples/facebook/package.json

@@ -50,4 +50,4 @@
     ]
   },
   "description": "Docusaurus example project (facebook template)"
-}
+}

package.json

@@ -102,8 +102,6 @@
     "babel-eslint": "^10.0.3",
     "concurrently": "^5.3.0",
     "cross-env": "^7.0.3",
-    "enzyme": "^3.10.0",
-    "enzyme-adapter-react-16": "^1.15.1",
     "eslint": "^7.13.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-prettier": "^6.15.0",
@@ -121,8 +119,8 @@
     "netlify-cli": "^2.58.0",
     "nodemon": "^2.0.7",
     "prettier": "^2.0.2",
-    "react": "^16.8.4",
-    "react-dom": "^16.8.4",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
     "rimraf": "^3.0.2",
     "serve": "^11.3.2",
     "stylelint": "^13.2.1",

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",

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": [

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": [

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",

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"

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);

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"

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"

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"

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"

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"

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"

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"

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"

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"
   }
 }

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"

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"

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"

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"

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"

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"

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"

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"

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"

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,
 

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;

website/package.json

@@ -40,8 +40,8 @@
     "clsx": "^1.1.1",
     "color": "^3.1.3",
     "npm-to-yarn": "^1.0.0-2",
-    "react": "^16.8.4",
-    "react-dom": "^16.8.4",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
     "workbox-routing": "^5.0.0",
     "workbox-strategies": "^5.0.0"
   },