React 18

[noahtallen]

This PR updates Calypso to React 18, and updates WordPress packages to the first version which supported React 18 (which is 4-5 months old at this point.)

Note: this does not yet enable the new rendering mode -- that will likely be a follow-up due to the size of this PR!

Prerequisite or split-out work:

• Update packages to versions which include React 18 as peer dependencies #77121
• Migrate away from deprecated react types #78292

Notable breaking changes which impact us (excluding concurrent mode)

• Various React types have been deprecated and changed
  • ReactChild, ReactFragment, and ReactText have been deprecated
  • useCallback now requires types for the callback arguments, which means most of those need to be updated
  • children isn't automatically a prop, so we need to add it, which means everywhere we use children needs to be updated

To do:

• Smoke test everything!

Done: (🤞 )

• SSR does not appear to be working in prod (calypso.live) due to useSyncExternalStore being called without a 3rd argument in use-subscription. (This breaks SSR.)
• Fix an issue where TextEncoder wasn't defined in ReactDOMServer, causing notifications panel to not open.
• Importing parseWithAttributeSchema from @wordpress/blocks crashes the application -- something related to the unlock/lock private APIs. This unfortunately prevents the editor routes from loading. (Will potentially need to fix this in a future WP package update)
• Import react dom server from browser bundles
• Fix issue with SSR and layout effects
• Fix babel issue related to declare context use (breaking docker build)
• Fix unit tests
• Fix all type issues!
• Fix this type issue related to createElement: Argument of type 'ForwardRefExoticComponent<ButtonProps & RefAttributes<any>>' is not assignable to parameter of type 'string | FunctionComponent<BaseButtonProps & _ButtonProps & Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "disabled" | ... 1 more ... | keyof BaseButtonProps> & RefAttributes<...>> | ComponentClass<...>'. (example) -- doesn't seem to happen any more
• Fix type issue related to ExternalLink and useInterpolateElement (punted)
• Add stream browserify to calypso-build and client
• Fix peer dependency violation warnings (doesn't block working on other issues)
• Updated types related to children/ReactNode -- @types/react has changed to be more strict about this.
• Updated some types related to event handlers and useCallback.
• For some components, use ComponentProps< typeof Component > now that prop types aren't directly available for wp components.
• Add the stream package -- apparently this was needed for react-dom? Webpack wouldn't compile without it.
• Updated WordPress components usage to use variant rather than isX. (E.g. variant="tertiary" rather than isTertiary)
• Updated package versions across the repo (React, WordPress, and testing library)
• Tried to stub out global styles so that we can work on other things, until we find a solution for this.
• Added some @types/ packages required by @wordpress/components (See Add some @types packages as proper dependencies WordPress/gutenberg#50231 for more info, but we'll need to do this in Calypso until we get a fix in core.)
• Fix type issue with internal translations related to deprecated ReactChild
• Fix type issue with certain store selectors and actions
• Fix type issues with search results in the help center
• Update stripe packages for compatibility with React 18
• Fix @automattic/global-styles -- it relies extensively on private file imports (e.g. @wordpress/edit-site/build-module/some/deep/path), which have been drastically changed internally.

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-71725

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-71725&env=jetpack

[matticbot]

This PR modifies the release build for wpcom-block-editor

To test your changes on WordPress.com, run install-plugin.sh wpcom-block-editor try-react-18 on your sandbox.

To deploy your changes after merging, see the documentation: PCYsg-l4k-p2

[tyxla]

Great work @noahtallen! 🚀 Thank you!

I think we should first address the peer dep situation in #77121 which is quite complex on its own 😅 I'll devote some time to helping there as well with whatever I can.

[noahtallen]

@tyxla I made a bunch of changes to the yarnrc file, including reworking how we ignore certain warnings. It should both be much more clear what our discard statements are doing, and should also dynamically cover more scenarios that are the same issue. I also documented the packages we're waiting for @wordpress/ to update. I also moved a few of the discard statements into the packageExtensions area, because I think that's a more ideal way to solve errors where that works.

I also ignored the warnings related to the date picker package we decided not to update just yet.

Finally, I also synced our react-virtualized fork (Automattic/react-virtualized#3) and published the update to npm, ultimately incorporating it here.

This means all the violations/warnings happening on yarn install are resolved now!

[noahtallen]

I added a bunch of little commits trying to get some insight into why yarn install is failing in CI and not locally. Here's what's happening. (TeamCity link)

RUN  cat packages/data-stores/package.json && yarn explain peer-requirements p031cd && yarn install && yarn explain peer-requirements p031cd && cat packages/data-stores/package.json

### packages/data-stores/package.json
{
  "name": "@automattic/data-stores",
  ...
   "peerDependencies": {
    ...
     "react": "^17.0.2", ### WTF???
   }
}

### First explain peer requirements (it's fine for some reason?)
YN0000: @automattic/domain-picker@workspace:packages/domain-picker [abd57] provides react-dom@npm:18.2.0 [35689] with version 18.2.0, which satisfies the following requirements:
YN0000: @automattic/data-stores@workspace:packages/data-stores [abd57] → ^18.2.0 ✓

### Yarn install output:
┌ Resolution step
│ @automattic/domain-picker@workspace:packages/domain-picker [abd57] provides react-dom (p031cd) with version 18.2.0, which doesnt satisfy what @automattic/data-stores requests
...

### Second explainer for same ID, now broken!!
@automattic/domain-picker@workspace:packages/domain-picker [abd57] provides react-dom@npm:18.2.0 [441bf] with version 18.2.0, which doesnt satisfy the following requirements:
@automattic/data-stores@workspace:packages/data-stores [abd57] → ^17.0.2 ✘

### packages/data-stores/package.json
{
  "name": "@automattic/data-stores",
  ...
   "peerDependencies": {
    ...
     "react": "^17.0.2", ### incorrect!!!
   }
}

Some of these symptoms are very similar to p9oQ9f-1I5-p2. This is so bizarre

[tyxla]

This means all the violations/warnings happening on yarn install are resolved now!

Glad to hear - nice work!

I added a bunch of little commits trying to get some insight into why yarn install is failing in CI and not locally. Here's what's happening.

For what it's worth I've tried on both my machines to repro it and could not. I wonder if we have some sort of a cache on the TeamCity level that we need to bust 🤔

[noahtallen]

Yeah, if I check the contents of a package.json file outside of the docker build, it is correct and matches the branch. But inside the build, after running COPY . /calypso/, the contents of the file are different. Suggesting that Docker is copying files from something other than the current branch. (The layer cache is not used, and both docker build and my "outside the build file check" run from the same directory. The --no-cache=true flag also makes no difference, which makes sense as the layer cache is not being used here for the COPY step anyways.)

[noahtallen]

Ok, the issue is not happening any more. I rebased the PR and squashed a ton of commits, and the weird CI issue with peer dependency warnings is resolved.

[matticbot]

This PR modifies the release build for notifications

To test your changes on WordPress.com, run install-plugin.sh notifications try-react-18 on your sandbox.

To deploy your changes after merging, see the documentation: PCYsg-elI-p2

[noahtallen]

I did further testing of the Calypso apps like ETK, notifications, and wpcom-block-editor, and these are also working well.

[noahtallen]

Next up, updating WordPress packages to latest: #78711

[a8ci18n]

Translation for this Pull Request has now been finished.