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).

package.json

@@ -27,12 +27,6 @@
     "test-ci": "lerna run test --concurrency 2 -- --colors --maxWorkers"
   },
   "resolutions": {
-    "@types/react": "17.0.53",
-    "microtime": "3.1.1",
-    "prop-types": "15.8.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "typescript": "4.7.4",
     "vscode-languageserver": "6.1.1",
     "vscode-languageserver-protocol": "3.15.3",
     "vscode-languageserver-textdocument": "1.0.8",
@@ -61,8 +55,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",

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'
 

packages/auth/package.json

@@ -24,14 +24,13 @@
   "dependencies": {
     "@babel/runtime-corejs3": "7.20.13",
     "core-js": "3.27.2",
-    "react": "17.0.2"
+    "react": "18.2.0"
   },
   "devDependencies": {
     "@babel/cli": "7.20.7",
     "@babel/core": "7.20.12",
     "@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",
     "jest": "29.3.1",
     "msw": "0.49.3",
     "typescript": "4.7.4"

packages/auth/src/__tests__/AuthProvider.test.tsx

@@ -9,7 +9,7 @@ import {
   waitFor,
   configure,
 } from '@testing-library/react'
-import { renderHook, act } from '@testing-library/react-hooks'
+import { renderHook, act } from '@testing-library/react'
 import '@testing-library/jest-dom/extend-expect'
 import { graphql } from 'msw'
 import { setupServer } from 'msw/node'
@@ -711,9 +711,7 @@ describe('Custom auth provider', () => {
       </AuthProvider>
     )
 
-    await waitFor(() => mockedForgotPassword.mock.calls.length === 1)
-
-    expect.assertions(1)
+    await waitFor(() => expect(mockedForgotPassword.mock.calls.length).toBe(1))
   })
 
   test('proxies resetPassword() calls to client', async () => {

packages/create-redwood-app/template/web/package.json

@@ -17,7 +17,7 @@
     "@redwoodjs/router": "3.2.0",
     "@redwoodjs/web": "3.2.0",
     "prop-types": "15.8.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
   }
 }

packages/forms/package.json

@@ -32,22 +32,22 @@
     "@babel/core": "7.20.12",
     "@testing-library/dom": "8.20.0",
     "@testing-library/jest-dom": "5.16.5",
-    "@testing-library/react": "12.1.5",
+    "@testing-library/react": "13.4.0",
     "@testing-library/user-event": "14.4.3",
     "@types/pascalcase": "1.0.1",
-    "@types/react": "17.0.53",
-    "@types/react-dom": "17.0.18",
+    "@types/react": "18.0.27",
+    "@types/react-dom": "18.0.10",
     "@types/testing-library__jest-dom": "5.14.5",
     "graphql": "16.6.0",
     "jest": "29.3.1",
     "nodemon": "2.0.20",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "typescript": "4.7.4"
   },
   "peerDependencies": {
     "graphql": "16.6.0",
-    "react": "17.0.2"
+    "react": "18.2.0"
   },
   "gitHead": "3905ed045508b861b495f8d5630d76c7a157d8f1"
 }

packages/prerender/package.json

@@ -46,8 +46,8 @@
     "typescript": "4.7.4"
   },
   "peerDependencies": {
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
   },
   "externals": {
     "react": "react",