Upgrade to React 18 #2847

Juneezee · 2024-02-01T09:46:59Z

Description and Motivation

Closes #1728.

Has this been tested? How?

npm run build
Compare https://healthequitytracker.org/ and http://localhost:3000 side-by-side

Screenshots (if appropriate)

Types of changes

Refactor / chore

New frontend preview link is below in the Netlify comment 😎

Closes #1728. Signed-off-by: Eng Zer Jun <[email protected]>

netlify · 2024-02-01T09:48:10Z

✅ Deploy Preview for health-equity-tracker ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`b103cbf`
🔍 Latest deploy log	https://app.netlify.com/sites/health-equity-tracker/deploys/65bbe1b3155a83000819620e
😎 Deploy Preview	https://deploy-preview-2847--health-equity-tracker.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Juneezee · 2024-02-01T09:48:16Z

frontend/package.json

+    "react-lazyload": {
+      "react": "^18.2.0",
+      "react-dom": "^18.2.0"
+    }


twobin/react-lazyload#400

nice. thanks for the helpful comments!

Juneezee · 2024-02-01T09:49:33Z

frontend/package.json

@@ -17,7 +21,6 @@
    "@mui/icons-material": "^5.15.6",
    "@mui/lab": "^5.0.0-alpha.124",
    "@mui/material": "^5.14.9",
-    "@mui/styles": "^5.14.9",


npm ERR! While resolving: @mui/[email protected] npm ERR! Found: [email protected] npm ERR! node_modules/react npm ERR! react@"^18.2.0" from the root project npm ERR! peer react@">=16.8.0" from @emotion/[email protected] npm ERR! node_modules/@emotion/react npm ERR! @emotion/react@"^11.11.1" from the root project npm ERR! peer @emotion/react@"^11.0.0-rc.0" from @emotion/[email protected] npm ERR! node_modules/@emotion/styled npm ERR! @emotion/styled@"^11.11.0" from the root project npm ERR! 5 more (@mui/lab, @mui/material, @mui/styled-engine, ...) npm ERR! 5 more (@mui/lab, @mui/material, @mui/styled-engine, ...) npm ERR! 33 more (@emotion/styled, ...)

mui/material-ui#32142. We are not using @mui/styles anywhere so this can be removed.

good catch!

Juneezee · 2024-02-01T09:50:36Z

frontend/package.json

-    "use-react-screenshot": "^3.0.0",
+    "use-react-screenshot": "^4.0.0",


npm WARN Could not resolve dependency: npm WARN peer react@"^17.0.2" from [email protected] npm WARN node_modules/use-react-screenshot npm WARN use-react-screenshot@"^3.0.0" from the root project npm WARN ERESOLVE overriding peer dependency npm WARN While resolving: [email protected] npm WARN Found: [email protected] npm WARN node_modules/react-dom npm WARN react-dom@"^18.2.0" from the root project

No changelog provided by the author. Looking at https://github.com/vre2h/use-react-screenshot/commits/master/, there seems to be no breaking changes.

@eriwarr @kccrtv we should see if this fixes #2186 ?

Juneezee · 2024-02-01T09:51:13Z

frontend/src/pages/News/SinglePost.tsx

-            {error && (
+            {isError && (


src/pages/News/SinglePost.tsx:143:13 - error TS2322: Type 'unknown' is not assignable to type 'ReactNode'. 143 {error && ( ~~~~~~~~~~~ 144 <img ~~~~~~~~~~~~~~~~~~ ... 150 /> ~~~~~~~~~~~~~~~~ 151 )} ~~~~~~~~~~~~~~

Juneezee · 2024-02-01T09:51:33Z

frontend/src/index.tsx

-ReactDOM.render(
-  <StrictMode>
-    <QueryClientProvider client={queryClient}>
-      <App />
-    </QueryClientProvider>
-  </StrictMode>,
-  document.getElementById('root')
-)
+const container = document.getElementById('root')
+if (container !== null) {
+  const root = createRoot(container)
+  root.render(
+    <StrictMode>
+      <QueryClientProvider client={queryClient}>
+        <App />
+      </QueryClientProvider>
+    </StrictMode>
+  )
+}


https://react.dev/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apis

Juneezee · 2024-02-01T16:23:33Z

The CI doesn't show which exact test is causing the timeout. I ran the E2E locally and got the error:

Error: expect(locator).toBeVisible()

Locator: getByRole('heading', { name: 'Start Your Search', exact: true })
Expected: visible
Received: hidden
Call log:
  - expect.toBeVisible with timeout 90000ms
  - waiting for getByRole('heading', { name: 'Start Your Search', exact: true })

health-equity-tracker/frontend/playwright-tests/guided_tour.ci.spec.ts

Line 18 in 168ab7e

    
           await expect(page.getByRole('heading', { name: 'Start Your Search', exact: true })).toBeVisible();

Video by Playwright:

7577eeb21aff7e4d9304b9fe4ada59fac7829e28.webm

For some unknown reasons, the last step is being shown first instead of the first step, https://deploy-preview-2847--health-equity-tracker.netlify.app/exploredata?mls=1.covid-3.00&mlp=disparity&dt1=covid_cases&onboard=true. I'm looking into this now

Our <Onboarding /> components gets rendered before <MadlibUI /> finishes parsing the query params and selects the "COVID-19" dropdown. This is why the ".covid-dropdown-topic" CSS class is not available initially and gets skipped. Reference: #2847 (comment) Signed-off-by: Eng Zer Jun <[email protected]>

Juneezee · 2024-02-01T16:47:30Z

frontend/src/pages/ExploreData/OnboardingSteps.tsx

-      '.covid-dropdown-topic',
+      '#madlib-box',


The <Onboarding /> components gets rendered before <MadlibUI /> finishes parsing the query params and selects the "COVID-19" dropdown. This is why the .covid-dropdown-topic CSS class is not available initially and gets skipped to the final step.

The madlib-box ID is more consistent because it is already available when the page is rendered.

health-equity-tracker/frontend/src/pages/ExploreData/MadLibUI.tsx

Line 104 in 168ab7e

id='madlib-box'

wow, great work debugging the issue. we really appreciate your help!

Upgrade to React 18

91dee72

Closes #1728. Signed-off-by: Eng Zer Jun <[email protected]>

Juneezee commented Feb 1, 2024

View reviewed changes

Merge branch 'main' into react-18

086f739

Juneezee commented Feb 1, 2024

View reviewed changes

Merge branch 'main' into react-18

b103cbf

benhammondmusic merged commit 9fa507a into SatcherInstitute:main Feb 1, 2024
10 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Upgrade to React 18 #2847

Upgrade to React 18 #2847

Juneezee commented Feb 1, 2024

netlify bot commented Feb 1, 2024 •

edited

Loading

Juneezee Feb 1, 2024

benhammondmusic Feb 1, 2024

Juneezee Feb 1, 2024

benhammondmusic Feb 1, 2024

Juneezee Feb 1, 2024

benhammondmusic Feb 1, 2024

Juneezee Feb 1, 2024

Juneezee Feb 1, 2024

Juneezee commented Feb 1, 2024

Juneezee Feb 1, 2024 •

edited

Loading

benhammondmusic Feb 1, 2024

		"use-react-screenshot": "^3.0.0",
		"use-react-screenshot": "^4.0.0",

Upgrade to React 18 #2847

Upgrade to React 18 #2847

Conversation

Juneezee commented Feb 1, 2024

Description and Motivation

Has this been tested? How?

Screenshots (if appropriate)

Types of changes

New frontend preview link is below in the Netlify comment 😎

netlify bot commented Feb 1, 2024 • edited Loading

✅ Deploy Preview for health-equity-tracker ready!

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Juneezee commented Feb 1, 2024

Juneezee Feb 1, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

netlify bot commented Feb 1, 2024 •

edited

Loading

Juneezee Feb 1, 2024 •

edited

Loading