Bump RN CLI, add @react-native/metro-config to template

[huntie]

Summary:
Changelog:
[General][Changed] - The default metro.config.js in apps now extends @react-native/metro-config, and should be updated in existing apps.

Context

React Native Metro config → React Native repo (#36502)

We (the React Native team) are aiming to relocate the default Metro config for React Native out of react-native-community/cli-plugin-metro and into the React Native repo + app template as a new react-native/metro-config package.

This is the first (and minimum viable) phase we can ship to separate the release process of Metro from RN CLI in order to reduce coupling and iterate faster for our users.

See full motivation, design, and test plan (which previewed the CLI bump) here: #36502

Changes

This is part 2/2 of the @react-native/metro-config changes, now that react-native-community/cli#1875 is merged.

• Upgrade react-native-community/cli to 11.0.0, upgrade all metro packages to 0.76.0 (version distributed in this CLI release).
• Remove hotfix Hotfix: Lock RN CLI to 11.0.0-alpha.0 in template #36631.
• Update the metro.config.js file in packages/react-native/template/.
  • Now merges defaults from @react-native/metro-config, and can be used with CLI >= 11.0.0.
• Update the metro.config.js files for packages/react-native/ and packages/rn-tester/ (these are integration test locations).
  • Now merges defaults from @react-native/metro-config, and can be used with CLI >= 11.0.0.

Changes to @react-native/metro-config — 0.72.1 (prepared but not depended on yet):

• Export mergeConfig util (removing direct metro-config dependency in consuming projects).
• Explicitly depend on metro-react-native-babel-transformer and metro-runtime (transitively included today).

Reviewed By: cortinico, blakef

Differential Revision: D44099691

[facebook-github-bot]

This pull request was exported from Phabricator. Differential Revision: D44099691

[github-actions]

	Warnings
⚠️	🔒 package.json - Changes were made to package.json. This will require a manual import by a Facebook employee.

Generated by 🚫 dangerJS against 2d734d8

[facebook-github-bot]

This pull request was exported from Phabricator. Differential Revision: D44099691

[facebook-github-bot]

This pull request was exported from Phabricator. Differential Revision: D44099691

[huntie]

🛠️ This commit should resolve failing CircleCI tests on main.

This appears to have happened because we expected to have bumped RN CLI to 11.0.0 in this commit — however we'd already been using the version specifier "11.0.0-alpha.2", where Yarn globs the portion of the specifier after '-'.

react-native/packages/react-native/package.json

Line 82 in 8c9c8ba

"@react-native-community/cli": "11.0.0-alpha.2",

(Incidentally, v11.0.0-alpha.1 was the most recent prerelease — v11.0.0-alpha.2 had been unpublished from npm.)

Since the template/ folder does not have a yarn.lock, and our CI tests depend on this, when the RN CLI release was published yesterday our CircleCI tests brought in the new major version of RN CLI automatically, despite the exact-looking version specifier.

Update: Actual cause was unpinned interdependencies within RN CLI (+ the lack of lockfile use in tests), now mitigated for future:

• fix: Pin exact versions of RN CLI dependencies react-native-community/cli#1893

---

Technically, a subset of this commit could have been merged earlier this week, that would have implemented the "this stack, before new CLI is merged" test case — and therefore have been forward-compatible in the event of an automatic bump, however I was waiting on:

• Fixed script for Packager.sh in RNTester #36582

---

TLDR; the automatic major bump of RN CLI on main was not expected, and we should see what we can do to bring lockfile-equivalent behaviour to CI (but this was also an unfortunate mistake on my part for trusting the exact version specifier in package.json). cc @cortinico @cipolleschi

• (Note: I understand why we don't have a lockfile in the template, but this is inherently variable for CI!)

[analysis-bot]

Platform	Engine	Arch	Size (bytes)	Diff
android	hermes	arm64-v8a	8,539,007	+20,125
android	hermes	armeabi-v7a	7,855,290	+20,128
android	hermes	x86	9,018,143	+20,127
android	hermes	x86_64	8,874,311	+20,127
android	jsc	arm64-v8a	9,138,965	-1,366
android	jsc	armeabi-v7a	8,331,182	-1,360
android	jsc	x86	9,192,631	-1,364
android	jsc	x86_64	9,451,727	-1,352

Base commit: 8c9c8ba
Branch: main

[NickGerleman]

(Note: I understand why we don't have a lockfile in the template, but this is inherently variable for CI!)

I agree we should avoid anything non-deterministic where we can. There is also value in testing the real flow of users building a new app though. E.g. if this was a change in the NPM ecosystem which broke more RN versions than 0.72, folks trying to generate a new app, without an existing lockfile, could be broken the same way.

I think it is better to do something deterministic for diffs/PRs, but I think there would be value in continuing to test live dependencies in some continuous test.

[NickGerleman]

For where we do want determinism, could we just copy the repo lockfile into the template and do a yarn install? Any dependencies unique to the template would still be live, but then all of the ones defined in the main RN repo would be used otherwise.

[facebook-github-bot]

This pull request was exported from Phabricator. Differential Revision: D44099691

[facebook-github-bot]

This pull request was exported from Phabricator. Differential Revision: D44099691

[facebook-github-bot]

This pull request was exported from Phabricator. Differential Revision: D44099691

[facebook-github-bot]

This pull request was exported from Phabricator. Differential Revision: D44099691

[huntie]

Because I'd temporarily deleted my react-native fork, GitHub isn't updating the "Files changed" tab or triggering CircleCI on this PR. #36697 is a copy of this PR to verify CircleCI stability. The Meta-internal commit is the source of truth.

All Tests are passing for huntie@ad7c99f:

#36697

• We still have some internal CI quirks to resolve in order to merge.
• In the meantime, @cipolleschi cherry picked all contents of this PR onto 0.72-rc yesterday.

[facebook-github-bot]

This pull request was exported from Phabricator. Differential Revision: D44099691

[facebook-github-bot]

This pull request was exported from Phabricator. Differential Revision: D44099691

[facebook-github-bot]

This pull request has been merged in c5a47ab.

[huntie]

🎉