feat: React 18 + automatic JSX runtime + build --dev (#8961)

Author: slorber

.eslintrc.js

@@ -66,6 +66,8 @@ module.exports = {
     '@docusaurus',
   ],
   rules: {
+    'react/jsx-uses-react': OFF, // JSX runtime: automatic
+    'react/react-in-jsx-scope': OFF, // JSX runtime: automatic
     'array-callback-return': WARNING,
     camelcase: WARNING,
     'class-methods-use-this': OFF, // It's a way of allowing private variables.
@@ -259,6 +261,9 @@ module.exports = {
           },
           {pattern: '@jest/globals', group: 'builtin', position: 'before'},
           {pattern: 'react', group: 'builtin', position: 'before'},
+          {pattern: 'react-dom', group: 'builtin', position: 'before'},
+          {pattern: 'react-dom/**', group: 'builtin', position: 'before'},
+          {pattern: 'stream', group: 'builtin', position: 'before'},
           {pattern: 'fs-extra', group: 'builtin'},
           {pattern: 'lodash', group: 'external', position: 'before'},
           {pattern: 'clsx', group: 'external', position: 'before'},

jest.config.mjs

@@ -32,6 +32,7 @@ const ignorePatterns = [
 export default {
   rootDir: fileURLToPath(new URL('.', import.meta.url)),
   verbose: true,
+  setupFiles: ['./jest/setup.js'],
   testEnvironmentOptions: {
     url: 'https://docusaurus.io/',
   },

jest/setup.js

@@ -0,0 +1,11 @@
+/**
+ * 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 {TextEncoder} from 'util';
+
+// Required for RTL renderHook SSR tests with React-18
+// See also https://github.com/testing-library/react-testing-library/issues/1120#issuecomment-1516132279
+global.TextEncoder = TextEncoder;

package.json

@@ -105,10 +105,10 @@
     "lint-staged": "^13.1.2",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.8.4",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-helmet-async": "^1.3.0",
-    "react-test-renderer": "^17.0.2",
+    "react-test-renderer": "^18.0.0",
     "remark-parse": "^8.0.2",
     "rimraf": "^3.0.2",
     "sharp": "^0.31.3",

packages/create-docusaurus/templates/classic-typescript/package.json

@@ -17,11 +17,11 @@
   "dependencies": {
     "@docusaurus/core": "^3.0.0-alpha.0",
     "@docusaurus/preset-classic": "^3.0.0-alpha.0",
-    "@mdx-js/react": "^2.1.5",
+    "@mdx-js/react": "^2.3.0",
     "clsx": "^1.2.1",
     "prism-react-renderer": "^1.3.5",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "^3.0.0-alpha.0",

packages/create-docusaurus/templates/classic/package.json

@@ -16,11 +16,11 @@
   "dependencies": {
     "@docusaurus/core": "^3.0.0-alpha.0",
     "@docusaurus/preset-classic": "^3.0.0-alpha.0",
-    "@mdx-js/react": "^2.1.5",
+    "@mdx-js/react": "^2.3.0",
     "clsx": "^1.2.1",
     "prism-react-renderer": "^1.3.5",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "^3.0.0-alpha.0"

packages/docusaurus-mdx-loader/package.json

@@ -59,8 +59,8 @@
     "unist-util-remove-position": "^3.0.0"
   },
   "peerDependencies": {
-    "react": "^16.8.4 || ^17.0.0",
-    "react-dom": "^16.8.4 || ^17.0.0"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "engines": {
     "node": ">=16.14"

packages/docusaurus-module-type-aliases/src/index.d.ts

@@ -242,6 +242,12 @@ declare module '@docusaurus/router' {
   export {useHistory, useLocation, Redirect, matchPath} from 'react-router-dom';
 }
 
+declare module '@docusaurus/useIsomorphicLayoutEffect' {
+  import {useLayoutEffect} from 'react';
+
+  export = useLayoutEffect;
+}
+
 declare module '@docusaurus/useDocusaurusContext' {
   import type {DocusaurusContext} from '@docusaurus/types';
 

packages/docusaurus-plugin-client-redirects/package.json

@@ -32,8 +32,8 @@
     "@docusaurus/types": "^3.0.0-alpha.0"
   },
   "peerDependencies": {
-    "react": "^16.8.4 || ^17.0.0",
-    "react-dom": "^16.8.4 || ^17.0.0"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "engines": {
     "node": ">=16.14"

packages/docusaurus-plugin-content-blog/package.json

@@ -36,8 +36,8 @@
     "webpack": "^5.76.0"
   },
   "peerDependencies": {
-    "react": "^16.8.4 || ^17.0.0",
-    "react-dom": "^16.8.4 || ^17.0.0"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "engines": {
     "node": ">=16.14"

packages/docusaurus-plugin-content-docs/package.json

@@ -60,8 +60,8 @@
     "shelljs": "^0.8.5"
   },
   "peerDependencies": {
-    "react": "^16.8.4 || ^17.0.0",
-    "react-dom": "^16.8.4 || ^17.0.0"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "engines": {
     "node": ">=16.14"

packages/docusaurus-plugin-content-pages/package.json

@@ -28,8 +28,8 @@
     "webpack": "^5.76.0"
   },
   "peerDependencies": {
-    "react": "^16.8.4 || ^17.0.0",
-    "react-dom": "^16.8.4 || ^17.0.0"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "engines": {
     "node": ">=16.14"

packages/docusaurus-plugin-debug/package.json

@@ -28,8 +28,8 @@
     "tslib": "^2.5.0"
   },
   "peerDependencies": {
-    "react": "^16.8.4 || ^17.0.0",
-    "react-dom": "^16.8.4 || ^17.0.0"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "engines": {
     "node": ">=16.14"

packages/docusaurus-plugin-google-analytics/package.json

@@ -24,8 +24,8 @@
     "tslib": "^2.5.0"
   },
   "peerDependencies": {
-    "react": "^16.8.4 || ^17.0.0",
-    "react-dom": "^16.8.4 || ^17.0.0"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "engines": {
     "node": ">=16.14"

packages/docusaurus-plugin-google-gtag/package.json

@@ -25,8 +25,8 @@
     "tslib": "^2.5.0"
   },
   "peerDependencies": {
-    "react": "^16.8.4 || ^17.0.0",
-    "react-dom": "^16.8.4 || ^17.0.0"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "engines": {
     "node": ">=16.14"

packages/docusaurus-plugin-google-tag-manager/package.json

@@ -24,8 +24,8 @@
     "tslib": "^2.5.0"
   },
   "peerDependencies": {
-    "react": "^16.8.4 || ^17.0.0",
-    "react-dom": "^16.8.4 || ^17.0.0"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "engines": {
     "node": ">=16.14"

packages/docusaurus-plugin-ideal-image/package.json

@@ -26,7 +26,7 @@
     "@docusaurus/theme-translations": "^3.0.0-alpha.0",
     "@docusaurus/types": "^3.0.0-alpha.0",
     "@docusaurus/utils-validation": "^3.0.0-alpha.0",
-    "@endiliey/react-ideal-image": "^0.0.11",
+    "@slorber/react-ideal-image": "^0.0.12",
     "react-waypoint": "^10.3.0",
     "sharp": "^0.31.3",
     "tslib": "^2.5.0",
@@ -38,8 +38,8 @@
   },
   "peerDependencies": {
     "jimp": "*",
-    "react": "^16.8.4 || ^17.0.0",
-    "react-dom": "^16.8.4 || ^17.0.0"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "peerDependenciesMeta": {
     "jimp": {

packages/docusaurus-plugin-ideal-image/src/deps.d.ts

@@ -12,7 +12,7 @@
  * Note: the original type definition is WRONG. getIcon & getMessage receive
  * full state object.
  */
-declare module '@endiliey/react-ideal-image' {
+declare module '@slorber/react-ideal-image' {
   import type {ComponentProps, ComponentType, CSSProperties} from 'react';
 
   export type LoadingState = 'initial' | 'loading' | 'loaded' | 'error';

packages/docusaurus-plugin-ideal-image/src/theme/IdealImage/index.tsx

@@ -9,7 +9,7 @@ import React from 'react';
 import ReactIdealImage, {
   type IconKey,
   type State,
-} from '@endiliey/react-ideal-image';
+} from '@slorber/react-ideal-image';
 import {translate} from '@docusaurus/Translate';
 
 import type {Props} from '@theme/IdealImage';

packages/docusaurus-plugin-pwa/package.json

@@ -45,8 +45,8 @@
     "fs-extra": "^11.1.0"
   },
   "peerDependencies": {
-    "react": "^16.8.4 || ^17.0.0",
-    "react-dom": "^16.8.4 || ^17.0.0"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "engines": {
     "node": ">=16.14"

packages/docusaurus-plugin-pwa/src/registerSw.ts

@@ -72,8 +72,14 @@ async function getIsAppInstalledRelatedApps() {
   if (!('getInstalledRelatedApps' in window.navigator)) {
     return false;
   }
-  const relatedApps = await navigator.getInstalledRelatedApps();
-  return relatedApps.some((app) => app.platform === 'webapp');
+  try {
+    const relatedApps = await navigator.getInstalledRelatedApps();
+    return relatedApps.some((app) => app.platform === 'webapp');
+  } catch (e) {
+    // Error might be thrown when Docusaurus is embedded in an iframe:
+    // registerSW failed DOMException: Failed to execute 'getInstalledRelatedApps' on 'Navigator': getInstalledRelatedApps() is only supported in top-level browsing contexts.
+    return false;
+  }
 }
 function isStandaloneDisplayMode() {
   return window.matchMedia('(display-mode: standalone)').matches;

packages/docusaurus-plugin-sitemap/package.json

@@ -29,8 +29,8 @@
     "tslib": "^2.5.0"
   },
   "peerDependencies": {
-    "react": "^16.8.4 || ^17.0.0",
-    "react-dom": "^16.8.4 || ^17.0.0"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "engines": {
     "node": ">=16.14"

packages/docusaurus-preset-classic/package.json

@@ -33,8 +33,8 @@
     "@docusaurus/types": "^3.0.0-alpha.0"
   },
   "peerDependencies": {
-    "react": "^16.8.4 || ^17.0.0",
-    "react-dom": "^16.8.4 || ^17.0.0"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "engines": {
     "node": ">=16.14"

packages/docusaurus-theme-classic/package.json

@@ -52,12 +52,12 @@
     "@types/prismjs": "^1.26.0",
     "@types/rtlcss": "^3.5.0",
     "fs-extra": "^11.1.0",
-    "react-test-renderer": "^17.0.2",
+    "react-test-renderer": "^18.0.0",
     "utility-types": "^3.10.0"
   },
   "peerDependencies": {
-    "react": "^16.8.4 || ^17.0.0",
-    "react-dom": "^16.8.4 || ^17.0.0"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "engines": {
     "node": ">=16.14"

packages/docusaurus-theme-common/package.json

@@ -54,8 +54,8 @@
     "lodash": "^4.17.21"
   },
   "peerDependencies": {
-    "react": "^16.8.4 || ^17.0.0",
-    "react-dom": "^16.8.4 || ^17.0.0"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "engines": {
     "node": ">=16.14"

packages/docusaurus-theme-common/src/components/Collapsible/index.tsx

@@ -10,13 +10,13 @@ import React, {
   useEffect,
   useRef,
   useCallback,
-  useLayoutEffect,
   type RefObject,
   type Dispatch,
   type SetStateAction,
   type ReactNode,
 } from 'react';
 import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
+import useIsomorphicLayoutEffect from '@docusaurus/useIsomorphicLayoutEffect';
 import {prefersReducedMotion} from '../../utils/accessibilityUtils';
 
 const DefaultAnimationEasing = 'ease-in-out';
@@ -231,13 +231,13 @@ function CollapsibleLazy({collapsed, ...props}: CollapsibleBaseProps) {
   // Updated in effect so that first expansion transition can work
   const [lazyCollapsed, setLazyCollapsed] = useState(collapsed);
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (!collapsed) {
       setMounted(true);
     }
   }, [collapsed]);
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (mounted) {
       setLazyCollapsed(collapsed);
     }

packages/docusaurus-theme-common/src/index.ts

@@ -48,7 +48,6 @@ export {ThemeClassNames} from './utils/ThemeClassNames';
 export {prefersReducedMotion} from './utils/accessibilityUtils';
 
 export {
-  useIsomorphicLayoutEffect,
   useEvent,
   usePrevious,
   composeProviders,

packages/docusaurus-theme-common/src/utils/reactUtils.tsx

@@ -7,26 +7,12 @@
 
 import React, {
   useCallback,
-  useEffect,
-  useLayoutEffect,
   useMemo,
   useRef,
   type ComponentType,
   type ReactNode,
 } from 'react';
-import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
-
-/**
- * This hook is like `useLayoutEffect`, but without the SSR warning.
- * It seems hacky but it's used in many React libs (Redux, Formik...).
- * Also mentioned here: https://github.com/facebook/react/issues/16956
- *
- * It is useful when you need to update a ref as soon as possible after a React
- * render (before `useEffect`).
- */
-export const useIsomorphicLayoutEffect = ExecutionEnvironment.canUseDOM
-  ? useLayoutEffect
-  : useEffect;
+import useIsomorphicLayoutEffect from '@docusaurus/useIsomorphicLayoutEffect';
 
 /**
  * Temporary userland implementation until an official hook is implemented