diff --git a/admin/test-bad-package/README.mdx b/admin/test-bad-package/README.mdx
new file mode 100644
index 000000000000..40abc5448c2b
--- /dev/null
+++ b/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 (
+ <>
+
React version: {ReactVersion}
+ React DOM version: {ReactDOMVersion}
+ >
+ );
+}
+
+
+
+---
+
+## MDX Components work:
+
+
+ Summary
+
+Details
+
+
+
+```js
+const age = 42;
+```
diff --git a/admin/test-bad-package/package.json b/admin/test-bad-package/package.json
new file mode 100644
index 000000000000..450f08b59f48
--- /dev/null
+++ b/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"
+ }
+}
diff --git a/package.json b/package.json
index 0cc5a557dfb1..671fdd1070da 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
"website",
"test-website-in-workspace",
"packages/create-docusaurus/templates/*",
+ "admin/test-bad-package",
"admin/new.docusaurus.io"
],
"scripts": {
diff --git a/packages/docusaurus/package.json b/packages/docusaurus/package.json
index fc2677ed0562..7ec1fa5fd41c 100644
--- a/packages/docusaurus/package.json
+++ b/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"
diff --git a/packages/docusaurus/src/webpack/__tests__/__snapshots__/base.test.ts.snap b/packages/docusaurus/src/webpack/__tests__/__snapshots__/base.test.ts.snap
index 7299deaf977a..88a08cdf5997 100644
--- a/packages/docusaurus/src/webpack/__tests__/__snapshots__/base.test.ts.snap
+++ b/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",
}
`;
diff --git a/packages/docusaurus/src/webpack/base.ts b/packages/docusaurus/src/webpack/base.ts
index 5d3ab12bedf9..872ed041cdd2 100644
--- a/packages/docusaurus/src/webpack/base.ts
+++ b/packages/docusaurus/src/webpack/base.ts
@@ -31,6 +31,15 @@ const LibrariesToTranspileRegex = new RegExp(
LibrariesToTranspile.map((libName) => `(node_modules/${libName})`).join('|'),
);
+const ReactAliases: Record = 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()),
diff --git a/website/_dogfooding/_docs tests/tests/import-bad-package.mdx b/website/_dogfooding/_docs tests/tests/import-bad-package.mdx
new file mode 100644
index 000000000000..45681f4b0d95
--- /dev/null
+++ b/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';
+
+
diff --git a/yarn.lock b/yarn.lock
index df406ecda4b9..83f08094c2ab 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2152,6 +2152,11 @@
unist-util-visit "^5.0.0"
vfile "^6.0.0"
+"@mdx-js/react@1.0.1":
+ 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"
+react-dom@16.14.0:
+ 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"
+react@16.14.0:
+ 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"