Upgrade of react-network to 5.0.0 causing render error

[joshbeckman]

Overview

We upgraded the flow repo to @shopify/react-networkv5.0.0 today and saw rendering errors upon deploy: https://github.com/Shopify/flow/pull/14856

Error: You must provide a network-details value, or have one previously serialized.

Original dependency update: https://github.com/Shopify/flow/pull/14853

Should we see that error? Is there an upgrade path for us? It seems like all that was changed in the 5.x release was a wildcard export (maybe causing this?) and some target node versions....

Consuming repo

https://github.com/Shopify/flow/pull/14856

Area

• Add any relevant Area: <area> labels to this issue

Scope

• Is this issue related to a specific package?

  • Tag it with the Package: <package_name> label.

---

Checklist

• Please delete the labels section before submitting your issue
• I have described this issue in a way that is actionable (if possible)

[joshbeckman]

Relevant PR in this repo that had most of the changes in the release: #2277

[BPScott]

react-network, along with most other react-* packages in quilt use react contexts and you need to make sure that only a single version is present is present in your app otherwise you end up with mismatches between context providers and callers.

Because of this we recommend updating all the packages that come from quilt at the same time, so you don't get bit by transitive dependencies still depending on older versions - in your case @shopify/react-router and other packages still depending on `@shopify/react-network v4.

Your PR added a new version of react-network v5, but you did not update any other other packages or add resolutions to ensure that other usages of v4 were removed. And thus you ended up with multiple versions of the package installed, which lead to context mismatches.

I'm closing this issue because it is not due to code that lies within the quilt repository.

[joshbeckman]

Oh interesting! Thank you. So all packages being used from quilt need to be updated together - they are interdependent and can't be upgraded reliably independently.

[BPScott]

When it comes to major version updates, yes, because for instance if you don't you can end up in a case where:

You depend on @shopify/react-network v5. You depend on @shopify/react-routerv1 - which depends on@shopify/react-network` v4. In your app you render react-network's NetworkProvider react context provider (from v5), and then use react-router's Redirect component, which internally uses the Network context from react-network - except this is react-network v4 - which never had its context provider set up. And then bang a "missing react context" error.

This is one example, but this case of "providers and contexts need to come from the same version" crops up in all the quilt packages that provide react contexts.

[joshbeckman]

Thanks! I'll try upgrading them together.