fix: handle React v18.3 warnings (#10079)

Author: slorber

.github/workflows/argos.yml

@@ -41,7 +41,7 @@ jobs:
         run: npx playwright install --with-deps chromium
 
       - name: Build website fast
-        run: yarn build:website:fast
+        run: yarn build:website:fast --dev
 
       - name: Take Argos screenshots
         run: yarn argos:screenshot

argos/tests/screenshot.spec.ts

@@ -8,6 +8,7 @@ import * as fs from 'fs';
 import {test} from '@playwright/test';
 import {argosScreenshot} from '@argos-ci/playwright';
 import * as cheerio from 'cheerio';
+import type {Page} from '@playwright/test';
 
 const siteUrl = 'http://localhost:3000';
 const sitemapPath = '../website/build/sitemap.xml';
@@ -61,9 +62,12 @@ function getPathnames(): string[] {
     (pathname) => !isBlacklisted(pathname),
   );
   pathnames.sort();
+  /*
   console.log('Pathnames:\n', JSON.stringify(pathnames, null, 2));
   console.log('Pathnames before filtering', pathnamesUnfiltered.length);
   console.log('Pathnames after filtering', pathnames.length);
+
+   */
   return pathnames;
 }
 
@@ -91,8 +95,47 @@ function waitForDocusaurusHydration() {
   return document.documentElement.dataset.hasHydrated === 'true';
 }
 
+// Ensure that Docusaurus site pages do not emit unexpected errors/warnings
+// See https://github.com/microsoft/playwright/issues/27277
+// TODO this shouldn't be the responsibility of Argos tests to do this
+//  but this is convenient to do this here for now
+function throwOnConsole(page: Page) {
+  const typesToCheck = ['error', 'warning'];
+
+  const ignoreMessages = [
+    // This mismatch warning looks like a React 18 bug to me
+    'Warning: Prop `%s` did not match. Server: %s Client: %s%s className "null" ""',
+
+    // TODO this fetch error message is unexpected and should be fixed
+    //  it's already happening in main branch
+    'Failed to load resource: the server responded with a status of 404 (Not Found)',
+
+    // TODO looks like a legit hydration bug to fix
+    'Warning: Prop `%s` did not match. Server: %s Client: %s%s href "/docs/configuration" "/docs/configuration?docusaurus-theme=light"',
+
+    // TODO weird problem related to KaTeX fonts refusing to decode?
+    //  on http://localhost:3000/docs/markdown-features/math-equations
+    'Failed to decode downloaded font: http://localhost:3000/katex/fonts/',
+    'OTS parsing error: Failed to convert WOFF 2.0 font to SFNT',
+  ];
+
+  page.on('console', (message) => {
+    if (!typesToCheck.includes(message.type())) {
+      return;
+    }
+    if (ignoreMessages.some((msg) => message.text().includes(msg))) {
+      return;
+    }
+    throw new Error(`Docusaurus site page unexpectedly logged something to the browser console
+Type=${message.type()}
+Text=${message.text()}
+Location=${message.location().url}`);
+  });
+}
+
 function createPathnameTest(pathname: string) {
   test(`pathname ${pathname}`, async ({page}) => {
+    throwOnConsole(page);
     const url = siteUrl + pathname;
     await page.goto(url);
     await page.waitForFunction(waitForDocusaurusHydration);
@@ -102,6 +145,10 @@ function createPathnameTest(pathname: string) {
   });
 }
 
+// Allow parallel execution within a single test file
+// See https://playwright.dev/docs/test-parallel
+test.describe.configure({mode: 'parallel'});
+
 test.describe('Docusaurus site screenshots', () => {
   const pathnames = getPathnames();
   pathnames.forEach(createPathnameTest);

packages/docusaurus-module-type-aliases/package.json

@@ -12,14 +12,13 @@
     "directory": "packages/docusaurus-module-type-aliases"
   },
   "dependencies": {
-    "@docusaurus/react-loadable": "5.5.2",
     "@docusaurus/types": "3.2.1",
     "@types/history": "^4.7.11",
     "@types/react": "*",
     "@types/react-router-config": "*",
     "@types/react-router-dom": "*",
     "react-helmet-async": "*",
-    "react-loadable": "npm:@docusaurus/react-loadable@5.5.2"
+    "react-loadable": "npm:@docusaurus/react-loadable@6.0.0"
   },
   "peerDependencies": {
     "react": "*",

packages/docusaurus-preset-classic/src/index.ts

@@ -89,7 +89,7 @@ export default function preset(
       ),
     );
   }
-  if (isProd && sitemap !== false) {
+  if (sitemap !== false && (isProd || debug)) {
     plugins.push(makePluginConfig('@docusaurus/plugin-sitemap', sitemap));
   }
   if (Object.keys(rest).length > 0) {

packages/docusaurus-theme-classic/src/theme/CodeBlock/Line/index.tsx

@@ -28,7 +28,7 @@ export default function CodeBlockLine({
   });
 
   const lineTokens = line.map((token, key) => (
-    <span key={key} {...getTokenProps({token, key})} />
+    <span key={key} {...getTokenProps({token})} />
   ));
 
   return (

packages/docusaurus-theme-live-codeblock/package.json

@@ -30,7 +30,7 @@
     "@philpl/buble": "^0.19.7",
     "clsx": "^2.0.0",
     "fs-extra": "^11.1.1",
-    "react-live": "^4.1.5",
+    "react-live": "^4.1.6",
     "tslib": "^2.6.0"
   },
   "devDependencies": {

packages/docusaurus/package.json

@@ -46,7 +46,6 @@
     "@docusaurus/cssnano-preset": "3.2.1",
     "@docusaurus/logger": "3.2.1",
     "@docusaurus/mdx-loader": "3.2.1",
-    "@docusaurus/react-loadable": "5.5.2",
     "@docusaurus/utils": "3.2.1",
     "@docusaurus/utils-common": "3.2.1",
     "@docusaurus/utils-validation": "3.2.1",
@@ -85,7 +84,7 @@
     "prompts": "^2.4.2",
     "react-dev-utils": "^12.0.1",
     "react-helmet-async": "^1.3.0",
-    "react-loadable": "npm:@docusaurus/react-loadable@5.5.2",
+    "react-loadable": "npm:@docusaurus/react-loadable@6.0.0",
     "react-loadable-ssr-addon-v5-slorber": "^1.0.1",
     "react-router": "^5.3.4",
     "react-router-config": "^5.1.1",

project-words.txt

@@ -313,6 +313,7 @@ sensical
 setaf
 setext
 setlocal
+SFNT
 shiki
 Shiki
 shortcodes

website/static/katex/fonts/KaTeX_AMS-Regular.ttf

@@ -1639,14 +1639,6 @@
     "@docsearch/css" "3.5.2"
     algoliasearch "^4.19.1"
 
-"@docusaurus/react-loadable@5.5.2":
-  version "5.5.2"
-  resolved "https://registry.yarnpkg.com/@docusaurus/react-loadable/-/react-loadable-5.5.2.tgz#81aae0db81ecafbdaee3651f12804580868fa6ce"
-  integrity sha512-A3dYjdBGuy0IGT+wyLIGIKLRE+sAk1iNk0f1HjNDysO7u8lhL4N3VEm+FAubmJbAztn94F7MxBTPmnixbiyFdQ==
-  dependencies:
-    "@types/react" "*"
-    prop-types "^15.6.2"
-
 "@docusaurus/responsive-loader@^1.7.0":
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/@docusaurus/responsive-loader/-/responsive-loader-1.7.0.tgz#508df2779e04311aa2a38efb67cf743109afd681"
@@ -3489,9 +3481,9 @@
     "@types/webpack-dev-server" "3"
 
 "@types/react-dom@^18.2.7":
-  version "18.2.7"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.7.tgz#67222a08c0a6ae0a0da33c3532348277c70abb63"
-  integrity sha512-GRaAEriuT4zp9N4p1i8BDBYmEyfo+xQ3yHjJU4eiK5NDa1RmUZG+unZABUTK4/Ox/M+GaHwb6Ow8rUITrtjszA==
+  version "18.3.0"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.3.0.tgz#0cbc818755d87066ab6ca74fbedb2547d74a82b0"
+  integrity sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==
   dependencies:
     "@types/react" "*"
 
@@ -13717,12 +13709,12 @@ react-dev-utils@^12.0.1:
     text-table "^0.2.0"
 
 react-dom@^18.0.0:
-  version "18.2.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
-  integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
+  version "18.3.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.3.0.tgz#98a3a1cc4e471d517c2a084f38ab1d58d02cada7"
+  integrity sha512-zaKdLBftQJnvb7FtDIpZtsAIb2MZU087RM8bRDZU8LVCCFYjPTsDZJNFUWPcVz3HFSN1n/caxi0ca4B/aaVQGQ==
   dependencies:
     loose-envify "^1.1.0"
-    scheduler "^0.23.0"
+    scheduler "^0.23.1"
 
 react-error-boundary@^3.1.0:
   version "3.1.4"
@@ -13752,10 +13744,10 @@ react-helmet-async@*, react-helmet-async@^1.3.0:
     react-fast-compare "^3.2.0"
     shallowequal "^1.1.0"
 
-"react-is@^16.12.0 || ^17.0.0 || ^18.0.0", "react-is@^17.0.1 || ^18.0.0", react-is@^18.0.0, react-is@^18.2.0:
-  version "18.2.0"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
-  integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
+"react-is@^16.12.0 || ^17.0.0 || ^18.0.0", "react-is@^17.0.1 || ^18.0.0", react-is@^18.0.0, react-is@^18.3.0:
+  version "18.3.0"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.0.tgz#6c2d9b6cdd4c2cffb7c89b1bcb57bc44d12f1993"
+  integrity sha512-wRiUsea88TjKDc4FBEn+sLvIDesp6brMbGWnJGjew2waAc9evdhja/2LvePc898HJbHw0L+MTWy7NhpnELAvLQ==
 
 react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0:
   version "16.13.1"
@@ -13772,10 +13764,10 @@ react-lite-youtube-embed@^2.3.52:
   resolved "https://registry.yarnpkg.com/react-lite-youtube-embed/-/react-lite-youtube-embed-2.3.52.tgz#7f8125a03e7a940745b63d11abd6821ffe1babe5"
   integrity sha512-G010PvCavA4EqL8mZ/Sv9XXiHnjMfONW+lmNeCRnSEPluPdptv2lZ0cNlngrj7K9j7luc8pbpyrmNpKbD9VMmw==
 
-react-live@^4.1.5:
-  version "4.1.5"
-  resolved "https://registry.yarnpkg.com/react-live/-/react-live-4.1.5.tgz#a4fa4cfdcad763503a209a29bace3339764fdfb1"
-  integrity sha512-ul3Zwvqvh6KTg8j7xGCT26+c8J9vQ+LFUrZCbrrrzEExuVB/39s1GKG3NsywnL+aGAjpfnUTaVCe7KlKIvVPiw==
+react-live@^4.1.6:
+  version "4.1.6"
+  resolved "https://registry.yarnpkg.com/react-live/-/react-live-4.1.6.tgz#6d9b7d381bd2b359ca859767501135112b6bab33"
+  integrity sha512-2oq3MADi3rupqZcdoHMrV9p+Eg/92BDds278ZuoOz8d68qw6ct0xZxX89MRxeChrnFHy1XPr8BVknDJNJNdvVw==
   dependencies:
     prism-react-renderer "^2.0.6"
     sucrase "^3.31.0"
@@ -13788,13 +13780,12 @@ react-loadable-ssr-addon-v5-slorber@^1.0.1:
   dependencies:
     "@babel/runtime" "^7.10.3"
 
-"react-loadable@npm:@docusaurus/react-loadable@5.5.2":
-  version "5.5.2"
-  resolved "https://registry.yarnpkg.com/@docusaurus/react-loadable/-/react-loadable-5.5.2.tgz#81aae0db81ecafbdaee3651f12804580868fa6ce"
-  integrity sha512-A3dYjdBGuy0IGT+wyLIGIKLRE+sAk1iNk0f1HjNDysO7u8lhL4N3VEm+FAubmJbAztn94F7MxBTPmnixbiyFdQ==
+"react-loadable@npm:@docusaurus/react-loadable@6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@docusaurus/react-loadable/-/react-loadable-6.0.0.tgz#de6c7f73c96542bd70786b8e522d535d69069dc4"
+  integrity sha512-YMMxTUQV/QFSnbgrP3tjDzLHRg7vsbMn8e9HAa8o/1iXoiomo48b7sk/kkmWEuWNDPJVlKSJRB6Y2fHqdJk+SQ==
   dependencies:
     "@types/react" "*"
-    prop-types "^15.6.2"
 
 react-medium-image-zoom@^5.1.6:
   version "5.1.6"
@@ -13845,13 +13836,13 @@ react-shallow-renderer@^16.15.0:
     react-is "^16.12.0 || ^17.0.0 || ^18.0.0"
 
 react-test-renderer@^18.0.0:
-  version "18.2.0"
-  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-18.2.0.tgz#1dd912bd908ff26da5b9fca4fd1c489b9523d37e"
-  integrity sha512-JWD+aQ0lh2gvh4NM3bBM42Kx+XybOxCpgYK7F8ugAlpaTSnWsX+39Z4XkOykGZAHrjwwTZT3x3KxswVWxHPUqA==
+  version "18.3.0"
+  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-18.3.0.tgz#579dec2312b9841f7a0cafc1dfbdfdc582be0ea4"
+  integrity sha512-eFnJU8sSYq9I6VI8ISrXDm+7F0igeFlTc0Ngq2XCkVasR5AsyJRg8SuwcD9D5E+VvDS2NrYGZ+gKpO43/wIDHw==
   dependencies:
-    react-is "^18.2.0"
+    react-is "^18.3.0"
     react-shallow-renderer "^16.15.0"
-    scheduler "^0.23.0"
+    scheduler "^0.23.1"
 
 react-waypoint@^10.3.0:
   version "10.3.0"
@@ -13864,9 +13855,9 @@ react-waypoint@^10.3.0:
     react-is "^17.0.1 || ^18.0.0"
 
 react@^18.0.0:
-  version "18.2.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
-  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
+  version "18.3.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.3.0.tgz#84386d0a36fdf5ef50fa5755b7812bdfb76194a5"
+  integrity sha512-RPutkJftSAldDibyrjuku7q11d3oy6wKOyPe5K1HA/HwwrXcEqBdHsLypkC2FFYjP7bPUa6gbzSBhw4sY2JcDg==
   dependencies:
     loose-envify "^1.1.0"
 
@@ -14539,10 +14530,10 @@ saxes@^6.0.0:
   dependencies:
     xmlchars "^2.2.0"
 
-scheduler@^0.23.0:
-  version "0.23.0"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
-  integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==
+scheduler@^0.23.1:
+  version "0.23.1"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.1.tgz#ef964a7936d7cbe8f7bc0d38fc479a823aed2923"
+  integrity sha512-5GKS5JGfiah1O38Vfa9srZE4s3wdHbwjlCrvIookrg2FO9aIwKLOJXuJQFlEfNcVSOXuaL2hzDeY20uVXcUtrw==
   dependencies:
     loose-envify "^1.1.0"