fix(core): always alias React/ReactDOM to site dependency so that importing MDX from anywhere works (#10391)

Author: slorber

admin/test-bad-package/README.mdx

@@ -0,0 +1,49 @@
+# test-bad-package
+
+This package declares a wrong React version on purpose (16.14.0)
+
+The goal is to test that the MD/MDX content of this package can still be imported/rendered by our website.
+
+See related issue https://github.com/facebook/docusaurus/issues/9027
+
+---
+
+import {version as ReactVersion} from 'react';
+import {version as ReactDOMVersion} from 'react-dom';
+
+export function TestComponent() {
+  const expectedVersion = 18;
+  if (!ReactVersion.startsWith(`${expectedVersion}`)) {
+    throw new Error(
+      `'test-bad-package/README.mdx' is rendered with bad React version: ${ReactVersion}`,
+    );
+  }
+  if (!ReactVersion.startsWith(`${expectedVersion}`)) {
+    throw new Error(
+      `'test-bad-package/README.mdx' is rendered with bad React-DOM version: ${ReactDOMVersion}`,
+    );
+  }
+  return (
+    <>
+      <div>React version: {ReactVersion}</div>
+      <div>React DOM version: {ReactDOMVersion}</div>
+    </>
+  );
+}
+
+<TestComponent />
+
+---
+
+## MDX Components work:
+
+<details>
+  <summary>Summary</summary>
+
+Details
+
+</details>
+
+```js
+const age = 42;
+```

admin/test-bad-package/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "test-bad-package",
+  "version": "3.5.1",
+  "private": true,
+  "dependencies": {
+    "react": "16.14.0",
+    "react-dom": "16.14.0",
+    "@mdx-js/react": "1.0.1"
+  }
+}

package.json

@@ -9,6 +9,7 @@
     "website",
     "test-website-in-workspace",
     "packages/create-docusaurus/templates/*",
+    "admin/test-bad-package",
     "admin/new.docusaurus.io"
   ],
   "scripts": {

packages/docusaurus/package.json

@@ -119,7 +119,8 @@
   },
   "peerDependencies": {
     "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react-dom": "^18.0.0",
+    "@mdx-js/react": "^3.0.0"
   },
   "engines": {
     "node": ">=18.0"

packages/docusaurus/src/webpack/__tests__/__snapshots__/base.test.ts.snap

@@ -23,6 +23,7 @@ exports[`base webpack config creates webpack aliases 1`] = `
   "@docusaurus/useIsomorphicLayoutEffect": "../../../../client/exports/useIsomorphicLayoutEffect.tsx",
   "@docusaurus/useRouteContext": "../../../../client/exports/useRouteContext.tsx",
   "@generated": "../../../../../../..",
+  "@mdx-js/react": "../../../../../../../node_modules/@mdx-js/react",
   "@site": "",
   "@theme-init/PluginThemeComponentEnhanced": "pluginThemeFolder/PluginThemeComponentEnhanced.js",
   "@theme-original/Error": "../../../../client/theme-fallback/Error/index.tsx",
@@ -47,5 +48,7 @@ exports[`base webpack config creates webpack aliases 1`] = `
   "@theme/UserThemeComponent1": "src/theme/UserThemeComponent1.js",
   "@theme/subfolder/PluginThemeComponent2": "pluginThemeFolder/subfolder/PluginThemeComponent2.js",
   "@theme/subfolder/UserThemeComponent2": "src/theme/subfolder/UserThemeComponent2.js",
+  "react": "../../../../../../../node_modules/react",
+  "react-dom": "../../../../../../../node_modules/react-dom",
 }
 `;

packages/docusaurus/src/webpack/base.ts

@@ -31,6 +31,15 @@ const LibrariesToTranspileRegex = new RegExp(
   LibrariesToTranspile.map((libName) => `(node_modules/${libName})`).join('|'),
 );
 
+const ReactAliases: Record<string, string> = process.env
+  .DOCUSAURUS_NO_REACT_ALIASES
+  ? {}
+  : {
+      react: path.dirname(require.resolve('react/package.json')),
+      'react-dom': path.dirname(require.resolve('react-dom/package.json')),
+      '@mdx-js/react': path.dirname(require.resolve('@mdx-js/react')),
+    };
+
 export function excludeJS(modulePath: string): boolean {
   // Always transpile client dir
   if (modulePath.startsWith(clientDir)) {
@@ -136,6 +145,7 @@ export async function createBaseConfig({
         process.cwd(),
       ],
       alias: {
+        ...ReactAliases,
         '@site': siteDir,
         '@generated': generatedFilesDir,
         ...(await loadDocusaurusAliases()),

website/_dogfooding/_docs tests/tests/import-bad-package.mdx

@@ -0,0 +1,13 @@
+# Import Bad Package
+
+We are importing MDX content from a file that is in a package that has a bad React version.
+
+This is expected to work despite the bad version.
+
+See https://github.com/facebook/docusaurus/issues/9027
+
+---
+
+import Readme from '@site/../admin/test-bad-package/README.mdx';
+
+<Readme />

yarn.lock

@@ -2152,6 +2152,11 @@
     unist-util-visit "^5.0.0"
     vfile "^6.0.0"
 
+"@mdx-js/[email protected]":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@mdx-js/react/-/react-1.0.1.tgz#565acea8375b02a2039a5afefdeb3758ccc13988"
+  integrity sha512-8jFmVrU6uAg94zh6sYCNtZnh9YovEvXmwaD9O8HxzQWNcEyn3ZZXG7r5ZcOpvtaQLnM+4+nwN4T42sfs2D+DvA==
+
 "@mdx-js/react@^3.0.0":
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/@mdx-js/react/-/react-3.0.0.tgz#eaccaa8d6a7736b19080aff5a70448a7ba692271"
@@ -13808,6 +13813,16 @@ react-dev-utils@^12.0.1:
     strip-ansi "^6.0.1"
     text-table "^0.2.0"
 
+[email protected]:
+  version "16.14.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.14.0.tgz#7ad838ec29a777fb3c75c3a190f661cf92ab8b89"
+  integrity sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+    scheduler "^0.19.1"
+
 react-dom@^18.0.0:
   version "18.3.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.3.0.tgz#98a3a1cc4e471d517c2a084f38ab1d58d02cada7"
@@ -13954,6 +13969,15 @@ react-waypoint@^10.3.0:
     prop-types "^15.0.0"
     react-is "^17.0.1 || ^18.0.0"
 
+[email protected]:
+  version "16.14.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"
+  integrity sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+
 react@^18.0.0:
   version "18.3.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.3.0.tgz#84386d0a36fdf5ef50fa5755b7812bdfb76194a5"
@@ -14640,6 +14664,14 @@ saxes@^6.0.0:
   dependencies:
     xmlchars "^2.2.0"
 
+scheduler@^0.19.1:
+  version "0.19.1"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196"
+  integrity sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 scheduler@^0.23.1:
   version "0.23.1"
   resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.1.tgz#ef964a7936d7cbe8f7bc0d38fc479a823aed2923"