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"