React 18 (#1064)

## Summary:

~I've got the changes ready, but we need to wait on WB and webapp to be ready before I land this PR and do a release.~ **We're now ready!**

This PR moves this repo to use React 18. There were a few changes that needed to be made to be fully compatible with React 18.

  * Migrate a few tests from the old `ReactDOM.TestUtils` renderer to @testing-library.
  * Update some snapshots as the snapshot renderer seems to have slightly different whitespace settings.
  * Fixes to the `ErrorBoundary` tests as React's `componentDidCatch` provides a different stack trace format (which is irrelevat to our code).
  * Migrate direct uses of `ReactDOM.render()` to `ReactDOMClient.createRoot()` (we hope to move these to use Portals in the future, but I couldn't get them working).
  * Move all `devDependencies` in the root `package.json` to be `dependencies` (`import/no-extraneous-dependencies` was complaining about `@types/react` being in `devDependencies`). Since the root package.json is just a host for the workspace and doesn't build any production code, the distinction between `dependencies` and `devDependencies` is irrelevant.
  * Force Storybook to use `react-docgen` instead of the default `react-docgen-typescript` (`react-docgen` is the default in Storybook 8 so we can revert this once we upgrade).  See [this](storybookjs/storybook#24665 (comment)) comment that pointed to the fix.

Issue: LEMS-1802

## Test plan:

`yarn test` ✅ 
`yarn tsc` ✅
`yarn storybook` ✅ - I sampled many of the stories. I also checked the stories that were affected by the move from `ReactDOM.render()` to `ReactDOMClient.createRoot()`

Author: jeremywiebe

Reviewers: jeresig, jeremywiebe, #perseus, handeyeco

Required Reviewers:

Approved By: jeresig

Checks: ✅ Upload Coverage (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Jest Coverage (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ gerald

Pull Request URL: #1064

Author: jeremywiebe

.changeset/mean-roses-invite.md

@@ -0,0 +1,6 @@
+---
+"@khanacademy/math-input": patch
+"@khanacademy/perseus": patch
+---
+
+Fix: prevent `react` and `react-dom` from being bundled

.changeset/nervous-ads-check.md

@@ -0,0 +1,9 @@
+---
+"@khanacademy/perseus-dev-ui": major
+"@khanacademy/math-input": major
+"@khanacademy/perseus": major
+"@khanacademy/perseus-editor": major
+"@khanacademy/simple-markdown": minor
+---
+
+React 18

.changeset/selfish-buckets-sniff.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/simple-markdown": minor
+---
+
+React 18

.storybook/main.ts

@@ -66,6 +66,9 @@ const config: StorybookConfig = {
         });
     },
 
+    typescript: {
+        reactDocgen: "react-docgen",
+    },
     docs: {
         autodocs: true,
     },

config/test/log-on-fail-reporter.js

@@ -1,6 +1,6 @@
 /* eslint-disable import/no-commonjs */
 /**
- * Only log console statements on when the test errors out.
+ * Only log console statements when the test errors out.
  * From: https://gist.github.com/GeeWee/71db0d9911b4a087e4b2486386168b05
  */
 const {getConsoleOutput} = require("@jest/console");

dev/index.tsx

@@ -2,7 +2,7 @@
 import {RenderStateRoot} from "@khanacademy/wonder-blocks-core";
 import * as React from "react";
 import {useEffect, useReducer} from "react";
-import {render} from "react-dom";
+import {createRoot} from "react-dom/client";
 
 import {setDependencies} from "../packages/perseus/src/dependencies";
 import {storybookTestDependencies} from "../testing/test-dependencies";
@@ -12,11 +12,15 @@ import {Gallery} from "./gallery";
 
 setDependencies(storybookTestDependencies);
 
-render(
+const rootEl = document.getElementById("app-root");
+if (rootEl === null) {
+    throw new Error("No root element found");
+}
+const root = createRoot(rootEl);
+root.render(
     <RenderStateRoot>
         <Router />
     </RenderStateRoot>,
-    document.getElementById("app-root"),
 );
 
 function Router() {

package.json

@@ -13,7 +13,7 @@
     "engines": {
         "node": ">=20"
     },
-    "devDependencies": {
+    "dependencies": {
         "@babel/core": "^7.23.2",
         "@babel/eslint-parser": "^7.22.15",
         "@babel/eslint-plugin": "^7.22.10",
@@ -50,15 +50,16 @@
         "@storybook/react-vite": "^7.6.17",
         "@swc-node/register": "^1.6.6",
         "@swc/core": "^1.3.68",
-        "@testing-library/jest-dom": "^5.15.0",
-        "@testing-library/react": "^12.1.2",
+        "@testing-library/dom": "^10.3.1",
+        "@testing-library/jest-dom": "^6.4.6",
+        "@testing-library/react": "^16.0.0",
         "@testing-library/user-event": "^14.5.2",
         "@types/classnames": "^2.3.1",
         "@types/jest": "29",
         "@types/jquery": "^3.5.16",
         "@types/node": "^18.14.1",
-        "@types/react": "16",
-        "@types/react-dom": "16",
+        "@types/react": "18",
+        "@types/react-dom": "18",
         "@types/underscore": "^1.11.4",
         "@typescript-eslint/eslint-plugin": "^7.3.1",
         "@typescript-eslint/parser": "^7.3.1",
@@ -90,7 +91,7 @@
         "eslint-plugin-react-hooks": "^4.6.0",
         "eslint-plugin-react-native": "^4.1.0",
         "eslint-plugin-storybook": "^0.8.0",
-        "eslint-plugin-testing-library": "^6.2.0",
+        "eslint-plugin-testing-library": "^6.2.2",
         "fast-glob": "^3.2.11",
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
@@ -100,8 +101,8 @@
         "less-loader": "^11.1.3",
         "nyc": "^15.1.0",
         "prettier": "^3",
-        "react": "16.14.0",
-        "react-dom": "16.14.0",
+        "react": "18",
+        "react-dom": "18",
         "react-json-view": "^1.19.1",
         "react-popper": "^2.2.5",
         "react-router": "5.2.1",
@@ -117,17 +118,13 @@
         "sloc": "^0.2.1",
         "storybook": "^7.6.17",
         "style-loader": "^3.3.3",
+        "tiny-invariant": "^1.3.1",
         "typescript": "^5.4.2",
         "typescript-coverage-report": "^0.7.0",
         "vite-plugin-istanbul": "^5.0.0",
         "vite-plugin-turbosnap": "^1.0.3",
         "winston": "^3.7.2"
     },
-    "resolutions": {
-        "@types/jest": "29",
-        "@types/react": "16",
-        "@types/react-dom": "16"
-    },
     "scripts": {
         "gen:parsers": "yarn --cwd packages/kas gen:parsers",
         "prebuild": "yarn gen:parsers",
@@ -151,8 +148,5 @@
         "cypress:ci": "cross-env BABEL_COVERAGE=1 cypress run --component --env CYPRESS_COVERAGE=1",
         "format": "prettier --write .",
         "typecheck": "tsc"
-    },
-    "dependencies": {
-        "tiny-invariant": "^1.3.1"
     }
 }

packages/math-input/package.json

@@ -54,10 +54,10 @@
         "katex": "0.11.1",
         "perseus-build-settings": "^0.4.1",
         "prop-types": "15.6.1",
-        "react": "16.14.0",
-        "react-dom": "^16.8.0",
-        "react-router": "5.2.1",
-        "react-router-dom": "5.3.0",
+        "react": ">= 18",
+        "react-dom": ">= 18",
+        "react-router": "^5.2.1",
+        "react-router-dom": "^5.3.0",
         "react-transition-group": "^4.4.1"
     },
     "peerDependencies": {
@@ -73,10 +73,10 @@
         "jquery": "^2.1.1",
         "katex": "0.11.1",
         "prop-types": "15.6.1",
-        "react": "16.14.0",
-        "react-dom": "^16.8.0",
-        "react-router": "5.2.1",
-        "react-router-dom": "5.3.0",
+        "react": ">= 18",
+        "react-dom": ">= 18",
+        "react-router": "^5.2.1",
+        "react-router-dom": "^5.3.0",
         "react-transition-group": "^4.4.1"
     },
     "keywords": []

packages/math-input/src/components/keypad/__tests__/keypad-button.test.tsx

@@ -1,4 +1,4 @@
-import {render, screen} from "@testing-library/react";
+import {act, render, screen} from "@testing-library/react";
 import {userEvent as userEventLib} from "@testing-library/user-event";
 import * as React from "react";
 
@@ -72,7 +72,9 @@ describe("<KeypadButton />", () => {
         );
 
         // Act
-        screen.getByRole("button", {name: "Right parenthesis"}).focus();
+        act(() =>
+            screen.getByRole("button", {name: "Right parenthesis"}).focus(),
+        );
         await userEvent.keyboard("{enter}");
 
         // Assert

packages/math-input/src/components/keypad/__tests__/keypad-v2-mathquill.test.tsx

@@ -1,4 +1,4 @@
-import {Popover} from "@khanacademy/wonder-blocks-popover";
+import {Popover, PopoverContentCore} from "@khanacademy/wonder-blocks-popover";
 import {color} from "@khanacademy/wonder-blocks-tokens";
 import {render, screen} from "@testing-library/react";
 import {userEvent as userEventLib} from "@testing-library/user-event";
@@ -69,7 +69,7 @@ function V2KeypadWithMathquill(props: Props) {
         <div style={{maxWidth: "400px", margin: "2em"}}>
             <Popover
                 content={
-                    <div>
+                    <PopoverContentCore>
                         <Keypad
                             extraKeys={["a", "b", "c"]}
                             onClickKey={handleClickKey}
@@ -87,7 +87,7 @@ function V2KeypadWithMathquill(props: Props) {
                             }
                             showDismiss
                         />
-                    </div>
+                    </PopoverContentCore>
                 }
                 dismissEnabled
                 opened={keypadOpen}