Update to React 17 and latest WordPress packages #54793
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Link to Calypso live: https://calypso.live?image=registry.a8c.com/calypso/app:build-15041 |
|
This PR modifies the release build for notifications To test your changes on WordPress.com, run To deploy your changes after merging, see the documentation: PCYsg-elI-p2 |
This was referenced Jul 22, 2021
noahtallen
force-pushed
the
update/react-17
branch
from
642627a
to
5393bf3
Compare
1 task
noahtallen
force-pushed
the
update/react-17
branch
2 times, most recently
from
366848f
to
5f29293
Compare
|
There are a large number of sass deprecation warnings in the build log. Unfortunately, they won't be a quick fix. Since @wordpress/scripts updated their sass dependency, our yarn.lock is also updating it to a newer minor version, which I'm guessing includes the deprecation warnings. Moving this into a separate PR: #55304. That PR will need to be merged before this PR works. (Update: this should now be resolved) |
noahtallen
force-pushed
the
update/react-17
branch
from
5f29293
to
6e27943
Compare
|
Here is how your PR affects size of JS and CSS bundles shipped to the user's browser: App Entrypoints (~40573 bytes added 📈 [gzipped]) Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used. Sections (~22350 bytes added 📈 [gzipped]) Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to. Async-loaded Components (~297381 bytes removed 📉 [gzipped]) React components that are loaded lazily, when a certain part of UI is displayed for the first time. Moment.js Locales (~166 bytes removed 📉 [gzipped]) Locale data for moment.js. Unless you are upgrading the moment.js library, changes in these chunks are suspicious. Legend What is parsed and gzip size?Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory. Generated by performance advisor bot at iscalypsofastyet.com. |
noahtallen
force-pushed
the
update/react-17
branch
from
6e27943
to
2813716
Compare
|
This PR modifies the release build for editing-toolkit To test your changes on WordPress.com, run To deploy your changes after merging, see the documentation: PCYsg-mMA-p2 |
noahtallen
force-pushed
the
update/react-17
branch
from
2813716
to
1268ef6
Compare
|
This PR modifies the release build for wpcom-block-editor To test your changes on WordPress.com, run To deploy your changes after merging, see the documentation: PCYsg-l4k-p2 |
|
This PR modifies the release build for o2-blocks To test your changes on WordPress.com, run To deploy your changes after merging, see the documentation: PCYsg-r7r-p2 |
noahtallen
force-pushed
the
update/react-17
branch
from
1268ef6
to
ac4e4ff
Compare
noahtallen
force-pushed
the
update/react-17
branch
3 times, most recently
from
9baa14e
to
c8e5799
Compare
matticbot
added
the
[Status] Needs Review
|
The final issue blocking this PR is related to Storybook, Emotion 11, and WordPress components. The specific problem is that the search storybook build fails trying to resolve
I've found a workaround, which includes updating emotion to v11 for Calypso, and then having the webpack config for storybook resolve v11. Part of this was implemented in e669c1c, but it turns out we also need the emotion update for calypso for that to work. I'm splitting the emotion update into #55736, in hopes that we can do it standalone. |
|
In case it can help, this is the Gutenberg PR for the migration to Emotion 11, which also contains a workaround for Storybook: WordPress/gutenberg#32930 |
|
Edit: dependency issues have now been listed in the PR description. |
noahtallen
force-pushed
the
update/react-17
branch
from
e669c1c
to
e5c0d30
Compare
|
I only get the warnings about newspack. We could hide them until the newspack update is gone, as long as we are confident it won't actually break with React 17 Other than that, looks good to me (GitHub won't let me approve because I was the original author) |
|
I'll do some more testing of that, but the peer dependency warnings are all about react 17. I assume these are being replaced by the latest Gutenberg plugin code once the block lands on wpcom, so I'll verify that assumption before merging. |
noahtallen
force-pushed
the
update/react-17
branch
from
2a32aef
to
00f7703
Compare
|
I'm noticing several deprecated components warnings. We should resolve these as a follow-up task. I think some have been around for a while.
|
|
Current yarn output is: ➜ wp-calypso git:(update/react-17) ✗ yarn
➤ YN0000: ┌ Resolution step
➤ YN0000: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code
➤ YN0000: └ Completed in 0s 467ms
➤ YN0000: ┌ Fetch step
➤ YN0013: │ 3604 packages were already cached
➤ YN0000: └ Completed in 1s 783ms
➤ YN0000: ┌ Link step
➤ YN0000: └ Completed in 2s 425ms
➤ YN0000: Done with warnings in 4s 890msI think this is good, as we will be reminded to resolve and update the peer requirement messages we are discarding |
noahtallen
approved these changes
Sep 16, 2021
noahtallen
force-pushed
the
update/react-17
branch
from
8853432
to
2792dea
Compare
Squashed commit of the following: commit 95ca82b Author: Sergio Cinos <[email protected]> Date: Thu Jul 22 11:27:51 2021 +0200 Add global CSS commit 1e0c99d Author: Sergio Cinos <[email protected]> Date: Thu Jul 22 09:36:36 2021 +0200 Do not import types-patch commit dee6bd6 Author: Sergio Cinos <[email protected]> Date: Thu Jul 22 09:29:26 2021 +0200 Delete unused types patch commit 2465d15 Author: Sergio Cinos <[email protected]> Date: Thu Jul 22 09:18:20 2021 +0200 Fix types
Use @wojtekmaj/enzyme-adapter-react-17
- @types/react had to be pinned to v17 to prevent TSC compilation errors. This is because TSC would sometimes resolve types for react 16, which isn't used by us, but gets included by some dependencies. - jest-haste-map had to be pinned to v27 because a different part of jest was importing from jest-haste-map without having had jest-haste-map in its package.json. As a result, it would resolve an older version of jest-haste-map, which had incorrect types.
noahtallen
force-pushed
the
update/react-17
branch
from
2792dea
to
5af2957
Compare
github-actions
bot
removed
the
[Status] Needs Review
This was referenced Sep 17, 2021
This was referenced Sep 27, 2021
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Changes proposed in this Pull Request
All updates required for React 17 and the latest WP monorepo packages.
Testing instructions:
base-stylesworks properly.ake sure those are ok.
Preparation:
These tasks can be done in
trunkin before merging React 17, as they will reduce the surface area of the React update. CI will fail in this PR until all prep tasks are merged and this PR is rebased.Assorted fixes:
3rd party dependency updates:
chai-enzyme(chore: Drop chai-enzyme dependency #55931)use-memo-one(chore: Update use-memo-one #55928)react-lazily-render(Replace LazyRender with intersection observer library #56154)1st party dependency updates:
social-logos(React 17 social-logos#109)gridicons(Add react 17 as a peer dependency gridicons#318)react-virtualized(Update with latest changes from remote react-virtualized#2)newspack-blocks. (Update wordpress dependencies newspack-blocks#855)isolated-block-editor(Update isolated block editor #56000)newspack-components(Update WordPress dependencies newspack-plugin#1135)Changes in this PR
Dependency updates:
react,react-dom,@types/reactAssorted changes:
@wojtekmaj/enzyme-adapter-react-17for React 17, since the main enzyme adapter has not been updated..yarnrc.yml.@wordpress/composenow that it includes types.global.CSSmock for tests.jest-canvas-mockin a test suite which should have required it already.@types/reactto v17 for all dependencies to fixtsccompilation errors.jest-resolvehas a dependency on the correct version ofjest-haste-mapIgnored dependencies:
The following dependencies have peer deps on react 16, but have not received react 17 updates. They do not break anything, so we are ignoring the warning messages from them. Most are transitive dependencies from 3rd parties, such as storybook.
react-autosize-textareaairbnb-prop-typesreact-datesreact-with-directionreact-simple-code-editorcreate-react-context@reach/router