feat(react): Upgrade to React 18 (#4992)

* chore: upgrade to react 18 fix(react): param order doc: add missing `}` doc: update `custom-web-index.md` fix: update resolution of @types/react fix: upgrade docs yarn.lock chore(deps): bump react version to latest * chore(@testing-library/react): switch to version 13 style(lint): fix `sort-package-json` violation ran `yarn workspaces foreach --parallel dlx sort-package-json` doc: update to reference RTL's `renderHook` * build(yarn): remove duplicates defined at top level TODO: test this, not sure if this will break things... removing in a separate commit to easily revert * chore(react@18): remove `unstable_batchedUpdates` isn't necessary anymore because batching happens automatically reactwg/react-18#21 (comment) * fix(typescript): cast to get typescript error to go away * fix(typescript): needed to get typescript error to go away chore(babel): add to be able to build * test(unit): skip failing test * chore(test@unit.snapshots): update snapshots * chore(deps): run dedupe * chore(fixtures): update ran `yarn build:test-project --rebuild-fixture` manually updated `__fixtures__/test-project/package.json` * chore(codemods): fix for TypeScript / Auth stuff? see: https://github.com/redwoodjs/redwood/actions/runs/3380341134/jobs/5613032702#step:24:59 * Revert "chore(codemods): fix for TypeScript / Auth stuff?" This reverts commit 9ac1231f45e5eead7e7631ca52381f8e76d64797. * test(unit): skip flakey windows test * doc(📓): correct URL * chore(deps): bump react type * chore(deps): remove stale dep * chore(deps): bump react * chore(deps): alight react type versions * chore(deps): 🤷‍♀️ * chore(deps): bump react-dom types * fix(typescript): for build failure ``` src/web/customRender.tsx(23,14): error TS2742: The inferred type of 'customRenderHook' cannot be named without a reference to '@testing-library/react/node_modules/@testing-library/dom/types/queries'. This is likely not portable. A type annotation is necessary. ``` * chore: bring back commented out tests * chore: favor inline `children` prop definition see: #4992 (comment) * chore(test@ci): fix for failing smoke test ``` ... src/pages/ProfilePage/ProfilePage.tsx(31,21): error TS2322: Type 'unknown' is not assignable to type 'ReactNode'. ... ``` https://github.com/redwoodjs/redwood/actions/runs/3942582022/jobs/6746415523#step:24:82 see: #4992 (comment) * chore(test@ci): fix for failing smoke test ``` ... src/pages/ProfilePage/ProfilePage.tsx(31,21): error TS2322: Type 'unknown' is not assignable to type 'ReactNode'. ... ``` https://github.com/redwoodjs/redwood/actions/runs/3942582022/jobs/6746415523#step:24:82 see: #4992 (comment) * chore(test@ci): fix for failing smoke test ``` ... src/pages/ProfilePage/ProfilePage.tsx(31,21): error TS2322: Type 'unknown' is not assignable to type 'ReactNode'. ... ``` https://github.com/redwoodjs/redwood/actions/runs/3942582022/jobs/6746415523#step:24:82 see: #4992 (comment) * Revert "chore(test@ci): fix for failing smoke test" This reverts commit eb2b72f. * chore: rebuild project fixture ran `yarn build:test-project --rebuild-fixture` * chore: try bumping the default jest timeout * chore: add to all slow tests just in case... * Hardcode currentUser attributes * router.test.tsx: Format source, and increase timeout * yarn.lock * chore(deps): bump `@types/react` * Update packages/auth-providers/auth0/web/package.json * chore: fix failed merge resolve * chore: fix failed merge resolve * chore: remove resolutions * chore: remove typescript-transform-paths * fix: proxies forgotPassword test we need to use expect for waitFor to do its thing, see https://testing-library.com/docs/dom-testing-library/api-async/#waitfor * fix: revert docs react upgrade * fix: use toBeCalledWith instead of toBe on length Co-authored-by: Tobbe Lundberg <tobbe@tlundberg.com> Co-authored-by: Dominic Saadi <dominiceliassaadi@gmail.com>
redwoodjs · Jan 23, 2023 · 51f7f25 · 51f7f25
1 parent 8ed23e3
commit 51f7f25
Show file tree

Hide file tree

Showing 39 changed files with 565 additions and 504 deletions.
diff --git a/...0101120000_create_post_user/migration.sql → ...0118153725_create_post_user/migration.sql b/...0101120000_create_post_user/migration.sql → ...0118153725_create_post_user/migration.sql
diff --git a/...220102120000_create_contact/migration.sql → ...230118153843_create_contact/migration.sql b/...220102120000_create_contact/migration.sql → ...230118153843_create_contact/migration.sql
diff --git a/__fixtures__/test-project/web/package.json b/__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",

diff --git a/__fixtures__/test-project/web/src/pages/ProfilePage/ProfilePage.tsx b/__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>

diff --git a/babel.config.js b/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`.

diff --git a/docs/docs/custom-web-index.md b/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).

diff --git a/package.json b/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",

diff --git a/packages/auth-providers/auth0/web/package.json b/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": {

diff --git a/packages/auth-providers/auth0/web/src/__tests__/auth0.test.tsx b/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'
 

diff --git a/packages/auth-providers/azureActiveDirectory/web/package.json b/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": {

diff --git a/packages/auth-providers/azureActiveDirectory/web/src/__tests__/azureActiveDirectory.test.tsx b/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'
 

diff --git a/packages/auth-providers/clerk/web/package.json b/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": {

diff --git a/packages/auth-providers/clerk/web/src/__tests__/clerk.test.tsx b/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'
 

diff --git a/packages/auth-providers/dbAuth/web/package.json b/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"

diff --git a/packages/auth-providers/dbAuth/web/src/__tests__/dbAuth.test.ts b/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'
 

diff --git a/packages/auth-providers/firebase/web/package.json b/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": {

diff --git a/packages/auth-providers/firebase/web/src/__tests__/firebase.test.tsx b/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'
 

diff --git a/packages/auth-providers/netlify/web/package.json b/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": {

diff --git a/packages/auth-providers/netlify/web/src/__tests__/netlify.test.tsx b/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'

diff --git a/packages/auth-providers/supabase/web/package.json b/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": {

diff --git a/packages/auth-providers/supabase/web/src/__tests__/supabase.test.tsx b/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'
 

diff --git a/packages/auth-providers/supertokens/web/package.json b/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": {

diff --git a/packages/auth-providers/supertokens/web/src/__tests__/supertokens.test.tsx b/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'
 

diff --git a/packages/auth/package.json b/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"

diff --git a/packages/auth/src/__tests__/AuthProvider.test.tsx b/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).toBeCalledWith('username'))
   })
 
   test('proxies resetPassword() calls to client', async () => {

diff --git a/packages/create-redwood-app/template/web/package.json b/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"
   }
 }
diff --git a/packages/forms/package.json b/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"
 }
diff --git a/packages/prerender/package.json b/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",