React 18 #7617

pettinarip · 2022-08-29T14:09:24Z

Upgrade react to v18.

Description

Upgraded:

react & react-dom to v18
gatsby to v4.21.1
- Replaced Location with useLocation hook on PageMetadata
  - https://reach.tech/router/api/useLocation
gatsby-plugin-image to v2.21.0
gatsby-plugin-sharp & gatsby-transformer-sharp to v4.21.1
@chakra-ui/react to v2
embla-carousel-react to v7
gatsby-plugin-mdx to v3
- v3 is react 18 compatible
- Note: there is a v4 already that supports mdx v2 but there are so many breaking changes that I have decided not to include it here
gatsby-plugin-sitemap & gatsby-remark-autolink-headers we are already using the latest major: v5
- Bumped to new minor version v5.21.0
focus-trap-react bumped to v10
- There are breaking changes but none of them impact our implementation. Nothing has changed from our side

Not upgraded:

gatsby-theme-i18n has not been upgraded yet
react-intl keeping current v3
- TODO: create a new card/PR to tackle this upgrade to v6
- https://formatjs.io/docs/react-intl/upgrade-guide-4x
  - FormattedHTMLMessage now is included in FormattedMessage
react-select keep using v4, no breaking changes with React v18 (only the peer dep warning)
- v5 built with Typescript
- https://react-select.com/upgrade
@types/react-instantsearch-dom has not been upgraded yet, removing the old one to avoid TS errors
react-helmet
- one of its dependency react-side-effect has not been updated yet. They are still using an old version that only supports react 17.

Other fixes:

FeedbackWidget - mismatch in hydration step
Emoji - the underlying lib react-emoji-render has a mismatch issue in hydration step
- Couldn’t find a solution yet, will raise an issue on the repo but it is not maintained anymore I think.
- Check for alternatives. Self hosted options.
- Note: perhaps we could use the flag suppressHydrationWarning in the meanwhile

vercel · 2022-08-29T14:09:27Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
ethereum-org-website	✅ Ready (Inspect)	Visit Preview	Aug 29, 2022 at 5:53PM (UTC)

gatsby-cloud · 2022-08-29T14:46:14Z

Gatsby Cloud Build Report

ethereum-org-website-dev

🎉 Your build was successful! See the Deploy preview here.

Build Details

View the build logs here.

🕐 Build time: 29m

pettinarip · 2022-08-29T16:29:26Z

package.json

@@ -92,7 +92,6 @@
    "minimist": "^1.2.6",
    "prettier": "^2.2.1",
    "pretty-quick": "^3.1.0",
-    "react-test-renderer": "^17.0.1",


not used anymore

pettinarip · 2022-08-29T16:31:07Z

src/components/CalloutBanner.tsx

@@ -90,7 +91,7 @@ const CalloutBanner: React.FC<IProps> = ({
    <Image
      image={image}
      alt={alt}
-      maxImageWidth={maxImageWidth}
+      maximagewidth={maxImageWidth}


I was getting a warning about this prop name and it suggested me to lowercase it.

pettinarip · 2022-08-29T16:32:03Z

src/components/FeedbackWidget.tsx

  const [isOpen, setIsOpen] = useState<boolean>(false)
  const [feedbackSubmitted, setFeedbackSubmitted] = useState<boolean>(false)
  const [isHelpful, setIsHelpful] = useState<boolean | null>(null)

-  const location = typeof window !== "undefined" ? window.location.href : ""


This line was causing hydration problems. On server side this was generating a different output than in client side.

That is why I moved it into the useEffect.

pettinarip · 2022-08-29T16:39:50Z

src/components/PageMetadata.tsx

@@ -3,7 +3,7 @@ import PropTypes from "prop-types"
 import { Helmet } from "react-helmet"
 import { useStaticQuery, graphql } from "gatsby"
 import { useIntl } from "react-intl"
-import { Location } from "@reach/router"
+import { useLocation } from "@reach/router"


Was getting an error on the Location component that was related with React 18.

The types returned by 'render()' are incompatible between these types.

So, I have changed it to use the recommended approach, by using hooks.

pettinarip · 2022-08-29T16:42:33Z

src/components/Accordion.tsx

@@ -83,6 +83,7 @@ const StyledEmoji = styled(Emoji)`
 `

 export interface IProps {
+  children?: React.ReactNode


children was removed from React.FC. DefinitelyTyped/DefinitelyTyped#56210

I'm starting to think about not using React.FC anymore since it doesn't bring any major benefit tbh. (CRA already removed it form their templates facebook/create-react-app#8177)

This is interesting, thanks for dropping that link

nloureiro · 2022-08-30T14:29:37Z

On my side, the bug with theme switching it's fixed with this PR

wackerow

This is looking good to me! Nice job @pettinarip!

Building nicely, code looks good... was hunting and pecking around the site to try and spot any issues and not seeing anything broken.

wackerow · 2022-08-30T18:01:23Z

src/components/Accordion.tsx

@@ -83,6 +83,7 @@ const StyledEmoji = styled(Emoji)`
 `

 export interface IProps {
+  children?: React.ReactNode


This is interesting, thanks for dropping that link

wackerow · 2022-08-30T18:03:46Z

src/components/PageMetadata.tsx

  const intl = useIntl()

  const desc = description || translateMessageId("site-description", intl)

  const siteTitle = translateMessageId("site-title", intl)

+  /* Set canonical URL w/ language path to avoid duplicate content */


Nice, thanks for pulling all this logic out of the return statement

pettinarip · 2022-08-30T19:01:05Z

This is looking good to me! Nice job @pettinarip!

Building nicely, code looks good... was hunting and pecking around the site to try and spot any issues and not seeing anything broken.

Nice, thanks for the review @wackerow. I'll play around a bit more to see if everything is ok and then will merge it.

pettinarip added 8 commits August 27, 2022 01:08

upgrade react 18

b0550d7

upgrade gatsby-plugin-mdx & fix mismatches issues in hydration step

da1b3c3

fix types

f0d06dd

upgrade react types

8ff5f1f

upgrade react types & libs

2ba7def

fix instantsearch types

3c22522

ts ignore react-intl provider

c5efa4b

turn FAST_DEV flag on again

2773463

github-actions bot added dependencies 📦 Changes related to project dependencies review needed 👀 labels Aug 29, 2022

vercel bot deployed to Preview August 29, 2022 14:52 View deployment

pettinarip added 2 commits August 29, 2022 12:50

fix search results

7febb93

more upgrades

348cbf6

pettinarip commented Aug 29, 2022

View reviewed changes

Merge branch 'dev' into react-18

4ccc509

pettinarip marked this pull request as ready for review August 29, 2022 17:37

pettinarip requested review from samajammin, wackerow, corwintines, minimalsm and jmcook1186 as code owners August 29, 2022 17:37

vercel bot deployed to Preview August 29, 2022 17:53 View deployment

This was referenced Aug 29, 2022

Epic: Implement UI library #6374

Closed

[UI lib] Button, Link & ButtonLink components #7438

Merged

wackerow approved these changes Aug 30, 2022

View reviewed changes

corwintines approved these changes Aug 30, 2022

View reviewed changes

pettinarip merged commit fd1bb29 into dev Aug 30, 2022

pettinarip deleted the react-18 branch August 30, 2022 21:30

pettinarip mentioned this pull request Aug 31, 2022

Fix hydration issues #7642

Merged

corwintines mentioned this pull request Sep 1, 2022

Deploy v6.0.0 #7658

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

React 18 #7617

React 18 #7617

pettinarip commented Aug 29, 2022 •

edited

Loading

vercel bot commented Aug 29, 2022 •

edited

Loading

gatsby-cloud bot commented Aug 29, 2022 •

edited

Loading

pettinarip Aug 29, 2022

pettinarip Aug 29, 2022

pettinarip Aug 29, 2022 •

edited

Loading

pettinarip Aug 29, 2022

pettinarip Aug 29, 2022

wackerow Aug 30, 2022

nloureiro commented Aug 30, 2022

wackerow left a comment

wackerow Aug 30, 2022

wackerow Aug 30, 2022

pettinarip commented Aug 30, 2022

React 18 #7617

React 18 #7617

Conversation

pettinarip commented Aug 29, 2022 • edited Loading

Description

vercel bot commented Aug 29, 2022 • edited Loading

gatsby-cloud bot commented Aug 29, 2022 • edited Loading

Gatsby Cloud Build Report

Build Details

pettinarip Aug 29, 2022

Choose a reason for hiding this comment

pettinarip Aug 29, 2022

Choose a reason for hiding this comment

pettinarip Aug 29, 2022 • edited Loading

Choose a reason for hiding this comment

pettinarip Aug 29, 2022

Choose a reason for hiding this comment

pettinarip Aug 29, 2022

Choose a reason for hiding this comment

wackerow Aug 30, 2022

Choose a reason for hiding this comment

nloureiro commented Aug 30, 2022

wackerow left a comment

Choose a reason for hiding this comment

wackerow Aug 30, 2022

Choose a reason for hiding this comment

wackerow Aug 30, 2022

Choose a reason for hiding this comment

pettinarip commented Aug 30, 2022

pettinarip commented Aug 29, 2022 •

edited

Loading

vercel bot commented Aug 29, 2022 •

edited

Loading

gatsby-cloud bot commented Aug 29, 2022 •

edited

Loading

pettinarip Aug 29, 2022 •

edited

Loading