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

This reverts commit 51f7f25.
redwoodjs · Jan 30, 2023 · 5a2c717 · 5a2c717
1 parent a89f8d0
commit 5a2c717
Show file tree

Hide file tree

Showing 39 changed files with 511 additions and 541 deletions.
diff --git a/...0118153725_create_post_user/migration.sql → ...0101120000_create_post_user/migration.sql b/...0118153725_create_post_user/migration.sql → ...0101120000_create_post_user/migration.sql
diff --git a/...230118153843_create_contact/migration.sql → ...220102120000_create_contact/migration.sql b/...230118153843_create_contact/migration.sql → ...220102120000_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": "4.0.0",
     "humanize-string": "2.1.0",
     "prop-types": "15.8.1",
-    "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react": "17.0.2",
+    "react-dom": "17.0.2"
   },
   "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,18 +24,14 @@ const ProfilePage = () => {
           </tr>
         </thead>
         <tbody>
-          <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>
+          {Object.keys(currentUser).map((key) => {
+            return (
+              <tr key={key}>
+                <td>{key.toUpperCase()}</td>
+                <td>{currentUser[key]}</td>
+              </tr>
+            )
+          })}
 
           <tr key="isAuthenticated">
             <td>isAuthenticated</td>

diff --git a/babel.config.js b/babel.config.js
@@ -38,47 +38,9 @@ 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 { hydrateRoot, createRoot } from 'react-dom/client'
+import ReactDOM from 'react-dom'
 
 import App from './App'
 /**
@@ -31,11 +31,9 @@ import App from './App'
 const rootElement = document.getElementById('redwood-app')
 
 if (rootElement.hasChildNodes()) {
-  hydrateRoot(redwoodAppElement, <App />)
+  ReactDOM.hydrate(<App />, rootElement)
 } else {
-  const root = createRoot(redwoodAppElement)
-  root.render(<App />)
-}
+  ReactDOM.render(<App />, rootElement)
 ```
 
 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,6 +27,12 @@
     "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",
@@ -55,7 +61,8 @@
     "@playwright/test": "1.30.0",
     "@replayio/playwright": "0.3.16",
     "@testing-library/jest-dom": "5.16.5",
-    "@testing-library/react": "13.4.0",
+    "@testing-library/react": "12.1.5",
+    "@testing-library/react-hooks": "8.0.1",
     "@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,9 +30,10 @@
     "@auth0/auth0-spa-js": "1.22.6",
     "@babel/cli": "7.20.7",
     "@babel/core": "7.20.12",
-    "@types/react": "18.0.27",
+    "@testing-library/react-hooks": "8.0.1",
+    "@types/react": "17.0.53",
     "jest": "29.4.1",
-    "react": "18.2.0",
+    "react": "17.0.2",
     "typescript": "4.9.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'
+import { renderHook, act } from '@testing-library/react-hooks'
 
 import { CurrentUser } from '@redwoodjs/auth'
 

diff --git a/packages/auth-providers/azureActiveDirectory/web/package.json b/packages/auth-providers/azureActiveDirectory/web/package.json
@@ -30,10 +30,11 @@
     "@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": "18.0.27",
+    "@types/react": "17.0.53",
     "jest": "29.4.1",
-    "react": "18.2.0",
+    "react": "17.0.2",
     "typescript": "4.9.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'
+import { renderHook, act } from '@testing-library/react-hooks'
 
 import { CurrentUser } from '@redwoodjs/auth'
 

diff --git a/packages/auth-providers/clerk/web/package.json b/packages/auth-providers/clerk/web/package.json
@@ -31,9 +31,10 @@
     "@babel/core": "7.20.12",
     "@clerk/clerk-react": "4.9.0",
     "@clerk/types": "3.25.0",
-    "@types/react": "18.0.27",
+    "@testing-library/react-hooks": "8.0.1",
+    "@types/react": "17.0.53",
     "jest": "29.4.1",
-    "react": "18.2.0",
+    "react": "17.0.2",
     "typescript": "4.9.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'
+import { renderHook, act } from '@testing-library/react-hooks'
 
 import { CurrentUser } from '@redwoodjs/auth'
 

diff --git a/packages/auth-providers/dbAuth/web/package.json b/packages/auth-providers/dbAuth/web/package.json
@@ -32,9 +32,10 @@
     "@babel/cli": "7.20.7",
     "@babel/core": "7.20.12",
     "@simplewebauthn/typescript-types": "6.2.1",
-    "@types/react": "18.0.27",
+    "@testing-library/react-hooks": "8.0.1",
+    "@types/react": "17.0.53",
     "jest": "29.4.1",
-    "react": "18.2.0",
+    "react": "17.0.2",
     "typescript": "4.9.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'
+import { renderHook, act } from '@testing-library/react-hooks'
 
 import { CurrentUser } from '@redwoodjs/auth'
 

diff --git a/packages/auth-providers/firebase/web/package.json b/packages/auth-providers/firebase/web/package.json
@@ -29,10 +29,11 @@
   "devDependencies": {
     "@babel/cli": "7.20.7",
     "@babel/core": "7.20.12",
-    "@types/react": "18.0.27",
+    "@testing-library/react-hooks": "8.0.1",
+    "@types/react": "17.0.53",
     "firebase": "9.16.0",
     "jest": "29.4.1",
-    "react": "18.2.0",
+    "react": "17.0.2",
     "typescript": "4.9.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'
+import { renderHook, act } from '@testing-library/react-hooks'
 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,10 +29,11 @@
   "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": "18.0.27",
+    "@types/react": "17.0.53",
     "jest": "29.4.1",
-    "react": "18.2.0",
+    "react": "17.0.2",
     "typescript": "4.9.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'
+import { renderHook, act } from '@testing-library/react-hooks'
 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,9 +29,10 @@
     "@babel/cli": "7.20.7",
     "@babel/core": "7.20.12",
     "@supabase/supabase-js": "1.35.7",
-    "@types/react": "18.0.27",
+    "@testing-library/react-hooks": "8.0.1",
+    "@types/react": "17.0.53",
     "jest": "29.4.1",
-    "react": "18.2.0",
+    "react": "17.0.2",
     "typescript": "4.9.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'
+import { renderHook, act } from '@testing-library/react-hooks'
 
 import { CurrentUser } from '@redwoodjs/auth'
 

diff --git a/packages/auth-providers/supertokens/web/package.json b/packages/auth-providers/supertokens/web/package.json
@@ -29,9 +29,10 @@
   "devDependencies": {
     "@babel/cli": "7.20.7",
     "@babel/core": "7.20.12",
-    "@types/react": "18.0.27",
+    "@testing-library/react-hooks": "8.0.1",
+    "@types/react": "17.0.53",
     "jest": "29.4.1",
-    "react": "18.2.0",
+    "react": "17.0.2",
     "typescript": "4.9.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'
+import { renderHook, act } from '@testing-library/react-hooks'
 
 import { CurrentUser } from '@redwoodjs/auth'
 

diff --git a/packages/auth/package.json b/packages/auth/package.json
@@ -24,13 +24,14 @@
   "dependencies": {
     "@babel/runtime-corejs3": "7.20.13",
     "core-js": "3.27.2",
-    "react": "18.2.0"
+    "react": "17.0.2"
   },
   "devDependencies": {
     "@babel/cli": "7.20.7",
     "@babel/core": "7.20.12",
     "@testing-library/jest-dom": "5.16.5",
-    "@testing-library/react": "13.4.0",
+    "@testing-library/react": "12.1.5",
+    "@testing-library/react-hooks": "8.0.1",
     "jest": "29.4.1",
     "msw": "0.49.3",
     "typescript": "4.9.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'
+import { renderHook, act } from '@testing-library/react-hooks'
 import '@testing-library/jest-dom/extend-expect'
 import { graphql } from 'msw'
 import { setupServer } from 'msw/node'
@@ -711,7 +711,9 @@ describe('Custom auth provider', () => {
       </AuthProvider>
     )
 
-    await waitFor(() => expect(mockedForgotPassword).toBeCalledWith('username'))
+    await waitFor(() => mockedForgotPassword.mock.calls.length === 1)
+
+    expect.assertions(1)
   })
 
   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": "4.0.0",
     "@redwoodjs/web": "4.0.0",
     "prop-types": "15.8.1",
-    "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react": "17.0.2",
+    "react-dom": "17.0.2"
   }
 }
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": "13.4.0",
+    "@testing-library/react": "12.1.5",
     "@testing-library/user-event": "14.4.3",
     "@types/pascalcase": "1.0.1",
-    "@types/react": "18.0.27",
-    "@types/react-dom": "18.0.10",
+    "@types/react": "17.0.53",
+    "@types/react-dom": "17.0.18",
     "@types/testing-library__jest-dom": "5.14.5",
     "graphql": "16.6.0",
     "jest": "29.4.1",
     "nodemon": "2.0.20",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
     "typescript": "4.9.4"
   },
   "peerDependencies": {
     "graphql": "16.6.0",
-    "react": "18.2.0"
+    "react": "17.0.2"
   },
   "gitHead": "3905ed045508b861b495f8d5630d76c7a157d8f1"
 }
diff --git a/packages/prerender/package.json b/packages/prerender/package.json
@@ -46,8 +46,8 @@
     "typescript": "4.9.4"
   },
   "peerDependencies": {
-    "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react": "17.0.2",
+    "react-dom": "17.0.2"
   },
   "externals": {
     "react": "react",