Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Upgrade to React 18 #1659

Draft
wants to merge 6 commits into
base: master
Choose a base branch
from
Draft

Upgrade to React 18 #1659

wants to merge 6 commits into from

Conversation

tsibley
Copy link
Member

@tsibley tsibley commented Mar 30, 2023 •
edited
Loading

Testing an upgrade to React 18 in order to use some new features in downstream projects.

The version spec should potentially be something like ^16 | ^18 so that Auspice can be flexible and let downstream integrations take their pick. This would avoid forcing all downstream integrations to upgrade.

Todos

  • See XXX TODO comments added in this branch
  • Review breaking changes in React 17 (one set, another set) and React 18 (one ref)
  • Review changes, esp. breaking ones, in any direct dependency which got a major version upgrade (i.e. as identified by the package.json diff).

Testing

@nextstrain-bot nextstrain-bot temporarily deployed to auspice-react-18-hcajemawwmrei March 30, 2023 17:49 Inactive
@jameshadfield
Copy link
Member

jameshadfield commented Mar 30, 2023 •
edited
Loading

Nice! Auspice uses a bunch of class methods that are removed in React 18 (at least, that's my understanding from these release notes) which is why I've been holding off doing this but it would be great to upgrade here.

@tsibley tsibley changed the title wip! Upgrade to React 18 Upgrade to React 18 Mar 30, 2023
@nextstrain-bot nextstrain-bot had a problem deploying to auspice-react-18-dodm3aq80epbl March 30, 2023 21:43 Failure
@tsibley tsibley temporarily deployed to auspice-react-18-dodm3aq80epbl March 30, 2023 21:45 Inactive
@tsibley
Copy link
Member Author

tsibley commented Mar 30, 2023

@victorlin I just pushed what I had in progress. It resolves all peer deps like react ^16 and so npm is now happy, finally. However, I wouldn't rule out packages with peer deps like react >=16 actually not working on 18. Compilation with Webpack still fails, as only packages have been updated, not our usage of them.

I'm going to put this down now, so please feel free to pick it up if you'd like!

@tsibley
Copy link
Member Author

tsibley commented Mar 31, 2023

Also, to clarify, I don't need this upgrade in order to prototype the thing I need React 18 for in nextstrain.org.

tsibley and others added 5 commits February 7, 2024 15:58
@tsibley @jameshadfield
wip! Upgrade to React 18
249a45f 
A bunch of peer dependencies are now failing.
@tsibley @jameshadfield
wip! blindly upgrade a bunch of things with problematic peer deps on …
83ff183 
…react

All of these had peer deps on react that evaluated to <18.  Upgrades for
most were available, often major version bumps so they may come with
breaking changes.  A couple things were not available and we need to
switch to alternatives.  Our calling code for libraries has not been
updated, so it's unlikely to compile or run.  But npm is now happy!
@jameshadfield
WIP. Disable react-18 incompatible parts
1b14006 
Auspice builds and is usable without crashing, but a number of features are disabled
@jameshadfield
WIP upgrade how react is initialised
eeba9d8 
Without this we're essentially using react 17
@jameshadfield
WIP upgrade redux
3e0799f 
Reading the changelogs shows our usage shouldn't be affected, and (brief) testing supports this

Release notes <https://github.com/reduxjs/redux-toolkit/releases>, <https://github.com/reduxjs/react-redux/releases>
@jameshadfield
Copy link
Member

Rebased onto master & moved this forward a little bit.

auspice build and auspice develop work well for me locally. CI only failing due to bundlesize & linting.

Auspice uses a bunch of class methods that are removed in React 18 ... which is why I've been holding off doing this but it would be great to upgrade here.

We had already renamed these lifecycle methods to UNSAFE_ and there's seemingly no timeline for when these will be removed, so this is not a blocker.

Remaining tasks:

  • Upgrade redux packages (react-redux 7.2.9 → 9.1.0, @reduxjs/toolkit 1.9.7 → 2.1.0)
  • Reinstate hot reloading (using the new-but-still-experimental fast-refresh approach)
  • CSSTransitionGroup. Used for notification styling. Could be changed completely, no need to restore prior behaviour exactly.
  • react-virtualized Without this the react-select menu is (was) slow, and we render (hundreds of) thousands entries here.
  • A bunch more testing!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
No open projects
Nextstrain planning (archived)
Status: New
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@tsibley @jameshadfield @nextstrain-bot