react-native-web@^0.13.0 peer dependency breaks npm install for Expo 43

[bartvanandel]

Bug report

Summary

While upgrading our app from Expo SDK 42 to 43 following the instructions from the official upgrade blog post, I ran into an issue where npm i couldn't proceed due to incompatible requirements for react-native-web. Expo 43 requires 0.17.1, while react-native-maps is currently pinned to ^0.13.0.

After running npm install --force I can run our app just fine, so maybe this specific version pinning is not actually needed. Or just require a peer dependency with a version range instead of one very specific version.

Environment info

npx react-native info output:

info Fetching system and libraries information...
System:
    OS: Windows 10 10.0.19043
    CPU: (12) x64 Intel(R) Core(TM) i7-10750H CPU @ 2.60GHz
    Memory: 15.95 GB / 31.75 GB
  Binaries:
    Node: 16.12.0 - C:\ProgramData\scoop\apps\nvm\current\nodejs\nodejs\node.EXE
    Yarn: Not Found
    npm: 8.1.0 - C:\ProgramData\scoop\apps\nvm\current\nodejs\nodejs\npm.CMD
    Watchman: Not Found
  SDKs:
    Android SDK: Not Found
    Windows SDK: Not Found
  IDEs:
    Android Studio: Not Found
    Visual Studio: 16.11.31702.278 (Visual Studio Community 2019)
  Languages:
    Java: Not Found
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.1 => 17.0.1
    react-native: 0.64.2 => 0.64.2
    react-native-windows: ^0.64.0 => 0.64.25
  npmGlobalPackages:
    *react-native*: Not Found

Output of npm ls --depth=0 (after running npm install --force, before that there is no valid install tree):

<our app>@ <path>
+-- @babel/core@7.15.8
+-- @expo/vector-icons@12.0.5
+-- @react-native-async-storage/async-storage@1.15.9
+-- @react-native-community/datetimepicker@3.5.2
+-- @react-native-community/slider@4.1.7
+-- @react-native-masked-view/masked-view@0.2.5
+-- @react-navigation/bottom-tabs@5.11.15
+-- @react-navigation/native@5.9.8
+-- @react-navigation/stack@5.14.9
+-- @types/react-native@0.64.18
+-- babel-preset-expo@8.5.1
+-- expo-auth-session@3.4.2
+-- expo-constants@12.1.3
+-- expo-crypto@10.0.3
+-- expo-font@10.0.3
+-- expo-haptics@11.0.3
+-- expo-image-picker@11.0.3
+-- expo-linear-gradient@10.0.3
+-- expo-location@13.0.4
+-- expo-notifications@0.13.3
+-- expo-permissions@13.0.3
+-- expo-random@12.0.1
+-- expo-splash-screen@0.13.4
+-- expo-web-browser@10.0.3
+-- expo@43.0.1
+-- jest-expo@43.0.1
+-- moment@2.29.1
+-- prettier@2.4.1
+-- react-dom@17.0.1
+-- react-native-gesture-handler@1.10.3
+-- react-native-map-link@2.8.1
+-- react-native-maps@0.28.0
+-- react-native-markdown-package@1.8.1
+-- react-native-modal@12.0.0
+-- react-native-render-html@5.1.1
+-- react-native-root-modal@5.0.1
+-- react-native-safe-area-context@3.3.2
+-- react-native-screens@3.8.0
+-- react-native-web@0.17.1
+-- react-native-windows@0.64.25
+-- react-native@0.64.2
+-- react@17.0.1
`-- typescript@4.3.5

Steps to reproduce

1. Take project that uses Expo SDK 42
2. Run expo upgrade to upgrade it to Expo SDK 43 (and follow other instructions from the upgrade blog
3. Run npm install

Describe what you expected to happen:

npm install runs without errors

Describe what you actually happens:

npm install produces an error:

$ npm i
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: undefined@undefined
npm ERR! Found: react-native-web@0.17.1
npm ERR! node_modules/react-native-web
npm ERR!   react-native-web@"0.17.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react-native-web@"^0.11" from react-native-maps@0.28.0
npm ERR! node_modules/react-native-maps
npm ERR!   react-native-maps@"0.28.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\me\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\me\AppData\Local\npm-cache\_logs\2021-10-28T11_49_27_157Z-debug.log

NB: I'm aware that Expo 43 doesn't use the very latest version of react-native-maps, but switching to 0.29.3 (current latest version) yields the exact same problem, except it wants 0.13 instead of 0.11

Reproducible sample code

npm i -g expo-cli
mkdir expo-test
expo init                       # and accept all defaults...
cd my-app
expo install react-native-maps  # this errors out due to dependency conflicts,
                                # but it does add the package to package.json
npm install --force             # this resolved it for our situation, no guarantees though

[brentvatne]

fwiw this isn't just an Expo issue, this will occur in any project using a recent version of react-native-web. imo we should change react-native-web peerDependency in this project to >= 0.13 rather than ^0.13

[bartvanandel]

Probably >= 0.11 would be fine just as well. The last update was done in #3930, specifically for Expo compatibility, but other than the peer dependency version spec update no code was modified.