feat(react): Upgrade to React 18

__fixtures__/test-project/web/package.json

@@ -19,8 +19,8 @@
     "@redwoodjs/web": "3.2.0",
     "humanize-string": "2.1.0",
     "prop-types": "15.8.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
   },
   "devDependencies": {
     "autoprefixer": "^10.4.13",

__fixtures__/test-project/web/src/pages/ProfilePage/ProfilePage.tsx

@@ -24,14 +24,18 @@ const ProfilePage = () => {
           </tr>
         </thead>
         <tbody>
-          {Object.keys(currentUser).map((key) => {
-            return (
-              <tr key={key}>
-                <td>{key.toUpperCase()}</td>
-                <td>{currentUser[key]}</td>
-              </tr>
-            )
-          })}
+          <tr>
+            <td>ID</td>
+            <td>{currentUser.id}</td>
+          </tr>
+          <tr>
+            <td>ROLES</td>
+            <td>{currentUser.roles}</td>
+          </tr>
+          <tr>
+            <td>EMAIL</td>
+            <td>{currentUser.email}</td>
+          </tr>
 
           <tr key="isAuthenticated">
             <td>isAuthenticated</td>

babel.config.js

@@ -38,9 +38,47 @@ module.exports = {
       },
     ],
     '@babel/preset-react',
+    /**
+     *  TODO(pc): w/ '@babel/plugin-transform-typescript' in plugins now, is '@babel/typescript' preset still needed?
+     *
+     * - Plugins run before Presets.
+     * - Plugin ordering is first to last.
+     * - Preset ordering is reversed (last to first).
+     *
+     * https://babeljs.io/docs/en/plugins/#plugin-ordering
+     */
     '@babel/typescript',
   ],
   plugins: [
+    /**
+     * NOTE
+     * Needed for react@18
+     *
+     * ```
+     * ✖  @redwoodjs/router:build
+     *  SyntaxError: /code/redwood/packages/router/src/location.tsx: TypeScript 'declare' fields must first be transformed by @babel/plugin-transform-typescript.
+     *  If you have already enabled that plugin (or '@babel/preset-typescript'), make sure that it runs before any plugin related to additional class features:
+     *   - @babel/plugin-proposal-class-properties
+     *   - @babel/plugin-proposal-private-methods
+     *   - @babel/plugin-proposal-decorators
+     *    25 |   // When prerendering, there might be more than one level of location
+     *    26 |   // providers. Use the values from the one above.
+     *  > 27 |   declare context: React.ContextType<typeof LocationContext>
+     *       |   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+     *    28 |   HISTORY_LISTENER_ID: string | undefined = undefined
+     *    29 |
+     *    30 |   state = {
+     * ```
+     */
+    [
+      '@babel/plugin-transform-typescript',
+      {
+        allowDeclareFields: true,
+        /** needed in order build `packages/web/dist/entry/index.js` */
+        isTSX: true,
+        allExtensions: true,
+      },
+    ],
     /**
      * NOTE
      * Experimental decorators are used in `@redwoodjs/structure`.

docs/docs/custom-web-index.md

@@ -19,7 +19,7 @@ yarn rw setup custom-web-index
 This generates a file named `index.js` in `web/src` that looks like this:
 
 ```jsx title="web/src/index.js"
-import ReactDOM from 'react-dom'
+import { hydrateRoot, createRoot } from 'react-dom/client'
 
 import App from './App'
 /**
@@ -31,9 +31,11 @@ import App from './App'
 const rootElement = document.getElementById('redwood-app')
 
 if (rootElement.hasChildNodes()) {
-  ReactDOM.hydrate(<App />, rootElement)
+  hydrateRoot(redwoodAppElement, <App />)
 } else {
-  ReactDOM.render(<App />, rootElement)
+  const root = createRoot(redwoodAppElement)
+  root.render(<App />)
+}
 ```
 
 This's actually the same file Redwood uses [internally](https://github.com/redwoodjs/redwood/blob/main/packages/web/src/entry/index.js).

docs/package.json

@@ -29,8 +29,8 @@
     "@docusaurus/preset-classic": "2.2.0",
     "@mdx-js/react": "1.6.22",
     "clsx": "1.2.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-player": "2.11.0"
   },
   "devDependencies": {

docs/yarn.lock

@@ -4637,8 +4637,8 @@ __metadata:
     "@mdx-js/react": 1.6.22
     "@tsconfig/docusaurus": 1.0.6
     clsx: 1.2.1
-    react: 17.0.2
-    react-dom: 17.0.2
+    react: 18.2.0
+    react-dom: 18.2.0
     react-player: 2.11.0
     typescript: 4.7.4
   languageName: unknown
@@ -8447,16 +8447,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-dom@npm:17.0.2":
-  version: 17.0.2
-  resolution: "react-dom@npm:17.0.2"
+"react-dom@npm:18.2.0":
+  version: 18.2.0
+  resolution: "react-dom@npm:18.2.0"
   dependencies:
     loose-envify: ^1.1.0
-    object-assign: ^4.1.1
-    scheduler: ^0.20.2
+    scheduler: ^0.23.0
   peerDependencies:
-    react: 17.0.2
-  checksum: 51abbcb72450fe527ebf978c3bc989ba266630faaa53f47a2fae5392369729e8de62b2e4683598cbe651ea7873cd34ec7d5127e2f50bf4bfe6bd0c3ad9bddcb0
+    react: ^18.2.0
+  checksum: 66dfc5f93e13d0674e78ef41f92ed21dfb80f9c4ac4ac25a4b51046d41d4d2186abc915b897f69d3d0ebbffe6184e7c5876f2af26bfa956f179225d921be713a
   languageName: node
   linkType: hard
 
@@ -8608,13 +8607,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react@npm:17.0.2":
-  version: 17.0.2
-  resolution: "react@npm:17.0.2"
+"react@npm:18.2.0":
+  version: 18.2.0
+  resolution: "react@npm:18.2.0"
   dependencies:
     loose-envify: ^1.1.0
-    object-assign: ^4.1.1
-  checksum: 07ae8959acf1596f0550685102fd6097d461a54a4fd46a50f88a0cd7daaa97fdd6415de1dcb4bfe0da6aa43221a6746ce380410fa848acc60f8ac41f6649c148
+  checksum: b562d9b569b0cb315e44b48099f7712283d93df36b19a39a67c254c6686479d3980b7f013dc931f4a5a3ae7645eae6386b4aa5eea933baa54ecd0f9acb0902b8
   languageName: node
   linkType: hard
 
@@ -9023,13 +9021,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"scheduler@npm:^0.20.2":
-  version: 0.20.2
-  resolution: "scheduler@npm:0.20.2"
+"scheduler@npm:^0.23.0":
+  version: 0.23.0
+  resolution: "scheduler@npm:0.23.0"
   dependencies:
     loose-envify: ^1.1.0
-    object-assign: ^4.1.1
-  checksum: b0982e4b0f34f4ffa4f2f486161c0fd9ce9b88680b045dccbf250eb1aa4fd27413570645455187a83535e2370f5c667a251045547765408492bd883cbe95fcdb
+  checksum: b777f7ca0115e6d93e126ac490dbd82642d14983b3079f58f35519d992fa46260be7d6e6cede433a92db70306310c6f5f06e144f0e40c484199e09c1f7be53dd
   languageName: node
   linkType: hard
 

package.json

@@ -27,11 +27,13 @@
     "test-ci": "lerna run test --concurrency 2 -- --colors --maxWorkers"
   },
   "resolutions": {
-    "@types/react": "17.0.53",
+    "@testing-library/react": "13.4.0",
+    "@types/react": "18.0.27",
+    "@types/react-dom": "18.0.10",
     "microtime": "3.1.1",
     "prop-types": "15.8.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "typescript": "4.7.4",
     "vscode-languageserver": "6.1.1",
     "vscode-languageserver-protocol": "3.15.3",
@@ -61,8 +63,7 @@
     "@playwright/test": "1.29.2",
     "@replayio/playwright": "0.3.15",
     "@testing-library/jest-dom": "5.16.5",
-    "@testing-library/react": "12.1.5",
-    "@testing-library/react-hooks": "8.0.1",
+    "@testing-library/react": "13.4.0",
     "@testing-library/user-event": "14.4.3",
     "@tsd/typescript": "4.9.4",
     "@types/babel__generator": "7.6.4",
@@ -104,6 +105,7 @@
     "rimraf": "3.0.2",
     "terminal-link": "2.1.1",
     "typescript": "4.7.4",
+    "typescript-transform-paths": "3.4.4",
     "zx": "7.1.1"
   },
   "packageManager": "[email protected]",

packages/auth-providers/auth0/web/package.json

@@ -30,10 +30,9 @@
     "@auth0/auth0-spa-js": "1.22.6",
     "@babel/cli": "7.20.7",
     "@babel/core": "7.20.12",
-    "@testing-library/react-hooks": "8.0.1",
-    "@types/react": "17.0.53",
+    "@types/react": "18.0.27",
     "jest": "29.3.1",
-    "react": "17.0.2",
+    "react": "18.2.0",
     "typescript": "4.7.4"
   },
   "peerDependencies": {

packages/auth-providers/auth0/web/src/__tests__/auth0.test.tsx

@@ -4,7 +4,7 @@ import type {
   GetTokenSilentlyVerboseResponse,
   User,
 } from '@auth0/auth0-spa-js'
-import { renderHook, act } from '@testing-library/react-hooks'
+import { renderHook, act } from '@testing-library/react'
 
 import { CurrentUser } from '@redwoodjs/auth'
 

packages/auth-providers/azureActiveDirectory/web/package.json

@@ -30,11 +30,10 @@
     "@azure/msal-browser": "2.32.2",
     "@babel/cli": "7.20.7",
     "@babel/core": "7.20.12",
-    "@testing-library/react-hooks": "8.0.1",
     "@types/netlify-identity-widget": "1.9.3",
-    "@types/react": "17.0.53",
+    "@types/react": "18.0.27",
     "jest": "29.3.1",
-    "react": "17.0.2",
+    "react": "18.2.0",
     "typescript": "4.7.4"
   },
   "peerDependencies": {

packages/auth-providers/azureActiveDirectory/web/src/__tests__/azureActiveDirectory.test.tsx

@@ -3,7 +3,7 @@ import type {
   PublicClientApplication as AzureActiveDirectoryClient,
   RedirectRequest,
 } from '@azure/msal-browser'
-import { renderHook, act } from '@testing-library/react-hooks'
+import { renderHook, act } from '@testing-library/react'
 
 import { CurrentUser } from '@redwoodjs/auth'
 

packages/auth-providers/clerk/web/package.json

@@ -31,10 +31,9 @@
     "@babel/core": "7.20.12",
     "@clerk/clerk-react": "3.5.1",
     "@clerk/types": "2.21.0",
-    "@testing-library/react-hooks": "8.0.1",
-    "@types/react": "17.0.53",
+    "@types/react": "18.0.27",
     "jest": "29.3.1",
-    "react": "17.0.2",
+    "react": "18.2.0",
     "typescript": "4.7.4"
   },
   "peerDependencies": {

packages/auth-providers/clerk/web/src/__tests__/clerk.test.tsx

@@ -4,7 +4,7 @@ import {
   EmailAddressResource,
   ActiveSessionResource,
 } from '@clerk/types'
-import { renderHook, act } from '@testing-library/react-hooks'
+import { renderHook, act } from '@testing-library/react'
 
 import { CurrentUser } from '@redwoodjs/auth'
 

packages/auth-providers/dbAuth/web/package.json

@@ -32,10 +32,9 @@
     "@babel/cli": "7.20.7",
     "@babel/core": "7.20.12",
     "@simplewebauthn/typescript-types": "6.2.1",
-    "@testing-library/react-hooks": "8.0.1",
-    "@types/react": "17.0.53",
+    "@types/react": "18.0.27",
     "jest": "29.3.1",
-    "react": "17.0.2",
+    "react": "18.2.0",
     "typescript": "4.7.4"
   },
   "gitHead": "3905ed045508b861b495f8d5630d76c7a157d8f1"

packages/auth-providers/dbAuth/web/src/__tests__/dbAuth.test.ts

@@ -1,4 +1,4 @@
-import { renderHook, act } from '@testing-library/react-hooks'
+import { renderHook, act } from '@testing-library/react'
 
 import { CurrentUser } from '@redwoodjs/auth'
 

packages/auth-providers/firebase/web/package.json

@@ -29,11 +29,10 @@
   "devDependencies": {
     "@babel/cli": "7.20.7",
     "@babel/core": "7.20.12",
-    "@testing-library/react-hooks": "8.0.1",
-    "@types/react": "17.0.53",
+    "@types/react": "18.0.27",
     "firebase": "9.16.0",
     "jest": "29.3.1",
-    "react": "17.0.2",
+    "react": "18.2.0",
     "typescript": "4.7.4"
   },
   "peerDependencies": {

packages/auth-providers/firebase/web/src/__tests__/firebase.test.tsx

@@ -1,4 +1,4 @@
-import { renderHook, act } from '@testing-library/react-hooks'
+import { renderHook, act } from '@testing-library/react'
 import type FirebaseAuthNamespace from 'firebase/auth'
 import { User, OperationType, OAuthProvider, Auth } from 'firebase/auth'
 

packages/auth-providers/netlify/web/package.json

@@ -29,11 +29,10 @@
   "devDependencies": {
     "@babel/cli": "7.20.7",
     "@babel/core": "7.20.12",
-    "@testing-library/react-hooks": "8.0.1",
     "@types/netlify-identity-widget": "1.9.3",
-    "@types/react": "17.0.53",
+    "@types/react": "18.0.27",
     "jest": "29.3.1",
-    "react": "17.0.2",
+    "react": "18.2.0",
     "typescript": "4.7.4"
   },
   "peerDependencies": {

packages/auth-providers/netlify/web/src/__tests__/netlify.test.tsx

@@ -1,4 +1,4 @@
-import { renderHook, act } from '@testing-library/react-hooks'
+import { renderHook, act } from '@testing-library/react'
 import * as NetlifyIdentityNS from 'netlify-identity-widget'
 
 import { CurrentUser } from '@redwoodjs/auth'

packages/auth-providers/supabase/web/package.json

@@ -29,10 +29,9 @@
     "@babel/cli": "7.20.7",
     "@babel/core": "7.20.12",
     "@supabase/supabase-js": "1.35.7",
-    "@testing-library/react-hooks": "8.0.1",
-    "@types/react": "17.0.53",
+    "@types/react": "18.0.27",
     "jest": "29.3.1",
-    "react": "17.0.2",
+    "react": "18.2.0",
     "typescript": "4.7.4"
   },
   "peerDependencies": {

packages/auth-providers/supabase/web/src/__tests__/supabase.test.tsx

@@ -1,5 +1,5 @@
 import type { SupabaseClient, User } from '@supabase/supabase-js'
-import { renderHook, act } from '@testing-library/react-hooks'
+import { renderHook, act } from '@testing-library/react'
 
 import { CurrentUser } from '@redwoodjs/auth'
 

packages/auth-providers/supertokens/web/package.json

@@ -29,10 +29,9 @@
   "devDependencies": {
     "@babel/cli": "7.20.7",
     "@babel/core": "7.20.12",
-    "@testing-library/react-hooks": "8.0.1",
-    "@types/react": "17.0.53",
+    "@types/react": "18.0.27",
     "jest": "29.3.1",
-    "react": "17.0.2",
+    "react": "18.2.0",
     "typescript": "4.7.4"
   },
   "peerDependencies": {

packages/auth-providers/supertokens/web/src/__tests__/supertokens.test.tsx

@@ -1,4 +1,4 @@
-import { renderHook, act } from '@testing-library/react-hooks'
+import { renderHook, act } from '@testing-library/react'
 
 import { CurrentUser } from '@redwoodjs/auth'