Updating Metro in a React Native project

Opening this to track an issue raised in https://github.com/facebook/metro/issues/1#issuecomment-1462815504 - currently, there's no good way to update Metro independently of React Native. When people try to do this it's unlikely to work as expected, but there's no clear indication as to why.

(This mainly relates to "vanilla" React Native installs that use @react-native-community/cli, but there might be some overlap with Expo setups)

Adding a metro dependency to your package.json

⚠️ This approach generally will not work. ⚠️

@lgibso34 apologies for going off-topic but where exactly did you bump/modify the default metro version that comes with React Native?

For my app I was able to yarn install metro which added an entry in my package.json and overrode the one that RN installs within its node_modules.

This won't work because your packager (eg Yarn) will respect that your project and react-native specify dependencies on different versions of Metro, and install both. Your project's dependency will be installed at node_modules/metro, but react-native and @react-native-community/cli-plugin-metro will retain their own copies of Metro deeper within node_modules. When you run start, the latter will be used - not the version you installed.

On top of this, having multiple versions of Metro installed can cause bugs, such as in https://github.com/facebook/metro/issues/857#issuecomment-1276253449

Workaround

We don't recommend using a version of Metro other than the one specified by React Native and its dependencies. But, if you want to try anyway, the only correct way to force a different version of an indirect dependency is to override it at the packager level. With Yarn classic, you can use resolutions, NPM (and PNPM) have overrides. You should override every Metro package, i.e. all of these. If folks get this working and would like to share their config here, please do!

Future plans

There's some work ongoing between the maintainers of Metro, React Native and the CLI to rearrange this dependency relationship so that users can set their Metro version and receive updates. We'll close this issue when that's complete.

Start with the package.json dependency declarations and the Metro packages referenced in the issue; compare how React Native and @react-native-community/cli-plugin-metro resolve them. Done means users can set a Metro version independently and receive updates without duplicate Metro installations.