RFC: Add @react-native/metro-config package #36502

huntie · 2023-03-16T16:15:41Z

Summary:

Context

React Native Metro config → React Native repo

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.

Motivation

Today, the Metro config required to use React Native is entangled within react-native-community/cli-plugin-metro and is not readable from within a project. We instead want to relocate the default Metro config into the React Native repo and have users explicitly inherit this config in their projects.

Before	After

	Note: CLI change will be breaking, to explicitly target React Native 0.72 and onwards

Benefits

Allows projects to clearly understand, extend, and override options within their metro.config.js file as the source of truth.
Logically, locates the config for using Metro with React Native within the React Native repo — where we can set baseline defaults that are inherited by other tooling (e.g. both RN CLI and Expo).
The previous setup meant that the resolved Metro configuration was hidden, preventing standalone Metro CLI commands from being runnable.
- e.g. metro get-dependencies, which currently fails in a default React Native or Expo project.
Removes existing noise from the template config.
Moves us closer to shipping Metro updates and bugfixes independent of the CLI.

User-side change: Default metro.config.js file in a new React Native project

We will also signal the need to update existing metro.config.js files in the release blog post.

Before	After

⚠️ Config contains user overrides only, will be overridden by defaults set by React Native CLI.	✅ Complete Metro config is defined by extending `react-native/metro-config`.
⚠️ Config contains stale defaults that were split across the template and RN CLI.	✅ Both RN CLI and `metro` CLI will read the same config.
	✅ Dynamic/extended config will continue to be applied by RN CLI on top of these.
	✅ User-defined config object is cleaned up.

Plan

➡️ This PR: Create a new package within facebook/react-native, @react-native/metro-config, to contain the default Metro config for React Native projects going forward.
Update React Native app template to define an updated metro.config.js extending the new config package.
(Depends on the above two changes) breaking: Update cli-plugin-metro to use defaults in app metro.config.js (RN 0.72) react-native-community/cli#1875

Note: Changes in this repo (1, 2) will be compatible with the current version of RN CLI on main — the only breaking change is that the new CLI will not be able to support RN projects without these changes.

Changes

This PR adds the new @react-native/metro-config package which reproduces all static values previously defined in RN CLI.
- The values not included, which remain in RN CLI, are dynamic values derived from CLI options passed by the user.

Test Plan (all PRs + incoming changes)

E2E expectation: The new config is non-breaking against old CLI, the new CLI is breaking against old config.

Pre-steps

With the relevant repos cloned:

.
└── Development/forks
    ├── react-native     # huntie/react-native@export-D44099692
    └── react-native-cli # huntie/react-native-cli@c53e49b

cd Development/forks/react-native/packages/rn-tester/
Copy over metro.config.js and package.json changes from react-native/template/ (next commit in stack).
Run yarn.

[Base case] React Native @ main (this stack, before new CLI is merged — non-breaking)
(template = new, CLI = old)

yarn start

✅ Works (new complete Metro config is read into RN CLI, and overridden by its previous defaults — for this reason we can't delete ./rn-get-polyfills.js yet!)

yarn metro get-dependencies --entry-file js/RNTesterApp.android.js --platform android

✅ Works (new complete Metro config is available to Metro CLI)

[Release state] React Native 0.72 (new CLI, new config required)
(template = new, CLI = new)

Use (cd ../..; yarn link @react-native-community/cli-plugin-metro) to substitute version of @react-native-community/cli-plugin-metro using cloned react-native-cli directory.
Run yarn.
Update watchFolders (see Metro Local Development Setup).

yarn start

✅ Works (new complete Metro config is read into RN CLI, and merged with sparser defaults in react-native-community/cli#1875)
- (Note console logs)
- Note: At the point this test was run, found a small unrelated bug (post monorepo land) where rn-tester would look for a metro.config.js at the repo root and not inside packages/rn-tester/ — hence an extra /metro.config.js file was added in the above screenshot. This will be re-tested in the commit when we bump RN CLI.

Changelog:
[General][Added] Add react-native/metro-config package

Differential Revision: D44099692

facebook-github-bot · 2023-03-16T16:16:24Z

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

facebook-github-bot · 2023-03-16T16:20:48Z

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

analysis-bot · 2023-03-16T16:44:48Z

Platform	Engine	Arch	Size (bytes)	Diff
android	hermes	arm64-v8a	8,519,193	+0
android	hermes	armeabi-v7a	7,834,776	+0
android	hermes	x86	8,999,081	+0
android	hermes	x86_64	8,854,121	+0
android	jsc	arm64-v8a	9,141,838	+0
android	jsc	armeabi-v7a	8,333,472	+0
android	jsc	x86	9,196,418	+0
android	jsc	x86_64	9,454,245	+0

Base commit: 0eff8d6
Branch: main

huntie · 2023-03-16T16:53:06Z

packages/metro-config/index.js

+  const config = {
+    resolver: {
+      resolverMainFields: ['react-native', 'browser', 'main'],
+      platforms: ['android', 'ios'],


This is the only base config divergence: ['android', 'ios'] here matches the default RN repo setup. As before, this will be overridden by RN CLI based on the platforms CLI argument.

facebook-github-bot · 2023-03-16T17:24:56Z

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

Summary: Changelog: [General][Added] - Add `react-native/metro-config` package Pull Request resolved: #36502 ## 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 here: #36502 ## Changes - This PR adds the new `react-native/metro-config` package, reproduces all static values previously defined in RN CLI. The values which remain in RN CLI are dynamic values derived from CLI options passed by the user. {F906910591} Reviewed By: cortinico Differential Revision: D44099692 fbshipit-source-id: 399bfb21b49200e7d53c9d358c64607f4091847d

facebook-github-bot · 2023-03-20T12:07:16Z

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

huntie · 2023-03-20T13:23:33Z

Changes to metro.config.js files within the template and rn-tester are prepared and will be shipped shortly after this PR (as we need to publish the new package first).

cortinico

LGTM on the React Native side of things

facebook-github-bot · 2023-03-21T11:21:53Z

This pull request has been merged in 745cdb1.

Summary: Changelog: [General][Added] - Add `react-native/metro-config` package Pull Request resolved: #36502 ## 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 here: #36502 ## Changes - This PR adds the new `react-native/metro-config` package, reproduces all static values previously defined in RN CLI. The values which remain in RN CLI are dynamic values derived from CLI options passed by the user. {F906910591} Reviewed By: cortinico Differential Revision: D44099692 fbshipit-source-id: 672a67e19d866ac2c64fc84983b5d82c604918c6

Summary: Pull Request resolved: facebook#36623 Changelog: [General][Changed] - The default `metro.config.js` in apps now extends `react-native/metro-config`, and should be updated in existing apps. ~~`react-native/rn-get-polyfills.js` is removed and should be updated to `react-native/js-polyfills` in existing apps (this is part of the new default config).~~ #publish-packages-to-npm ## Context ### React Native Metro config → React Native repo (facebook#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: facebook#36502 ## Changes NOTE: This PR is pending the inclusion of a bump to `react-native-community/cli`, and will be sequenced after 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). - 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 fbshipit-source-id: c17b52e7794365bb5b9fcdecf84d047f7193b1c1

Summary: Changelog: [General][Added] - Add `react-native/metro-config` package Pull Request resolved: #36502 ## 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 here: #36502 ## Changes - This PR adds the new `react-native/metro-config` package, reproduces all static values previously defined in RN CLI. The values which remain in RN CLI are dynamic values derived from CLI options passed by the user. {F906910591} Reviewed By: cortinico Differential Revision: D44099692 fbshipit-source-id: 672a67e19d866ac2c64fc84983b5d82c604918c6

Summary: Pull Request resolved: facebook#36623 Changelog: [General][Changed] - The default `metro.config.js` in apps now extends `react-native/metro-config`, and should be updated in existing apps. ~~`react-native/rn-get-polyfills.js` is removed and should be updated to `react-native/js-polyfills` in existing apps (this is part of the new default config).~~ #publish-packages-to-npm ## Context ### React Native Metro config → React Native repo (facebook#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: facebook#36502 ## Changes NOTE: This PR is pending the inclusion of a bump to `react-native-community/cli`, and will be sequenced after 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). - 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 fbshipit-source-id: a1a9820af1cd9ad8fb279b8af356f570886b9dee

Co-authored-by: Riccardo Cipolleschi <cipolleschi@fb.com> Co-authored-by: Alex Hunt <alexeh@meta.com> resolved: #36502

Summary: Pull Request resolved: facebook#36623 Changelog: [General][Changed] - The default `metro.config.js` in apps now extends `react-native/metro-config`, and should be updated in existing apps. ~~`react-native/rn-get-polyfills.js` is removed and should be updated to `react-native/js-polyfills` in existing apps (this is part of the new default config).~~ #publish-packages-to-npm ## Context ### React Native Metro config → React Native repo (facebook#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: facebook#36502 ## Changes NOTE: This PR is pending the inclusion of a bump to `react-native-community/cli`, and will be sequenced after 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). - 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 fbshipit-source-id: 86730d2cf1bd2764a5b27d3c307f94f5aec08d68

Summary: Pull Request resolved: facebook#36623 Changelog: [General][Changed] - The default `metro.config.js` in apps now extends `react-native/metro-config`, and should be updated in existing apps. ~~`react-native/rn-get-polyfills.js` is removed and should be updated to `react-native/js-polyfills` in existing apps (this is part of the new default config).~~ #publish-packages-to-npm ## Context ### React Native Metro config → React Native repo (facebook#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: facebook#36502 ## Changes NOTE: This PR is pending the inclusion of a bump to `react-native-community/cli`, and will be sequenced after 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). - 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 fbshipit-source-id: 060e8e0ce58c31c8ec9b24d0ad6ab67d966949c6

Summary: Pull Request resolved: facebook#36623 Changelog: [General][Changed] - The default `metro.config.js` in apps now extends `react-native/metro-config`, and should be updated in existing apps. ~~`react-native/rn-get-polyfills.js` is removed and should be updated to `react-native/js-polyfills` in existing apps (this is part of the new default config).~~ #publish-packages-to-npm ## Context ### React Native Metro config → React Native repo (facebook#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: facebook#36502 ## Changes NOTE: This PR is pending the inclusion of a bump to `react-native-community/cli`, and will be sequenced after 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). - 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 fbshipit-source-id: 7684ea16a16c8e1a98e50231b138f6ddaf4d5117

Summary: Pull Request resolved: facebook#36623 Changelog: [General][Changed] - The default `metro.config.js` in apps now extends `react-native/metro-config`, and should be updated in existing apps. ~~`react-native/rn-get-polyfills.js` is removed and should be updated to `react-native/js-polyfills` in existing apps (this is part of the new default config).~~ #publish-packages-to-npm ## Context ### React Native Metro config → React Native repo (facebook#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: facebook#36502 ## Changes NOTE: This PR is pending the inclusion of a bump to `react-native-community/cli`, and will be sequenced after 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). - 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 fbshipit-source-id: 283f5b4a9df005034e9c671a37a3d75b825f10b8

Summary: Pull Request resolved: #36623 Changelog: [General][Changed] - The default `metro.config.js` in apps now extends `react-native/metro-config`, and should be updated in existing apps. ~~`react-native/rn-get-polyfills.js` is removed and should be updated to `react-native/js-polyfills` in existing apps (this is part of the new default config).~~ #publish-packages-to-npm ## 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 NOTE: This PR is pending the inclusion of a bump to `react-native-community/cli`, and will be sequenced after 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). - 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 fbshipit-source-id: 405635dd69fd50a1e9548279eaeda3c932b5b167

Summary: Changelog: [General][Added] - Add `react-native/metro-config` package Pull Request resolved: facebook#36502 ## Context ### React Native Metro config → React Native repo (facebook#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 here: facebook#36502 ## Changes - This PR adds the new `react-native/metro-config` package, reproduces all static values previously defined in RN CLI. The values which remain in RN CLI are dynamic values derived from CLI options passed by the user. {F906910591} Reviewed By: cortinico Differential Revision: D44099692 fbshipit-source-id: 672a67e19d866ac2c64fc84983b5d82c604918c6

Summary: Pull Request resolved: facebook#36623 Changelog: [General][Changed] - The default `metro.config.js` in apps now extends `react-native/metro-config`, and should be updated in existing apps. ~~`react-native/rn-get-polyfills.js` is removed and should be updated to `react-native/js-polyfills` in existing apps (this is part of the new default config).~~ #publish-packages-to-npm ## Context ### React Native Metro config → React Native repo (facebook#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: facebook#36502 ## Changes NOTE: This PR is pending the inclusion of a bump to `react-native-community/cli`, and will be sequenced after 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). - 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 fbshipit-source-id: 405635dd69fd50a1e9548279eaeda3c932b5b167

Summary: Changelog: [General][Added] - Add `react-native/metro-config` package Pull Request resolved: facebook#36502 ## Context ### React Native Metro config → React Native repo (facebook#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 here: facebook#36502 ## Changes - This PR adds the new `react-native/metro-config` package, reproduces all static values previously defined in RN CLI. The values which remain in RN CLI are dynamic values derived from CLI options passed by the user. {F906910591} Reviewed By: cortinico Differential Revision: D44099692 fbshipit-source-id: 672a67e19d866ac2c64fc84983b5d82c604918c6

Summary: Pull Request resolved: facebook#36623 Changelog: [General][Changed] - The default `metro.config.js` in apps now extends `react-native/metro-config`, and should be updated in existing apps. ~~`react-native/rn-get-polyfills.js` is removed and should be updated to `react-native/js-polyfills` in existing apps (this is part of the new default config).~~ #publish-packages-to-npm ## Context ### React Native Metro config → React Native repo (facebook#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: facebook#36502 ## Changes NOTE: This PR is pending the inclusion of a bump to `react-native-community/cli`, and will be sequenced after 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). - 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 fbshipit-source-id: 405635dd69fd50a1e9548279eaeda3c932b5b167

…41836) Summary: This adds `react-native/metro-config` to the monorepo build tool and emits the missing typescript declarations. Right now, we do have typescript declarations on `metro-config`, but not `react-native/metro-config`. Which makes everything a bit harder extend from "[the default React Native metro config](#36502)" in Expo. > Note, I also added the same `exports` block from `react-native/dev-middleware` for conformity. One open question here is, why aren't we exporting _all_ helper functions from `metro-config`? To me, its a bit weird that we need both `metro-config` _and_ `react-native/metro-config` as `loadConfig` isn't exported. ## Changelog: [INTERNAL] [FIXED] - Emit typescript declaration files for `react-native/metro-config` Pull Request resolved: #41836 Test Plan: Run the build tool, and check if the typescript declarations are emitted for `react-native/metro-config`. ``` yarn build metro-config ``` Reviewed By: hoxyq Differential Revision: D51943453 Pulled By: huntie fbshipit-source-id: cfaffe5660053fc9a9fcbe3dacf7f6ccc2bde01b

Summary: Pull Request resolved: facebook/react-native#36623 Changelog: [General][Changed] - The default `metro.config.js` in apps now extends `react-native/metro-config`, and should be updated in existing apps. ~~`react-native/rn-get-polyfills.js` is removed and should be updated to `react-native/js-polyfills` in existing apps (this is part of the new default config).~~ #publish-packages-to-npm ## Context ### React Native Metro config → React Native repo (facebook/react-native#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: facebook/react-native#36502 ## Changes NOTE: This PR is pending the inclusion of a bump to `react-native-community/cli`, and will be sequenced after 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). - 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 fbshipit-source-id: 405635dd69fd50a1e9548279eaeda3c932b5b167 Original: facebook/react-native@c5a47ab

Summary: Pull Request resolved: facebook/react-native#36623 Changelog: [General][Changed] - The default `metro.config.js` in apps now extends `react-native/metro-config`, and should be updated in existing apps. ~~`react-native/rn-get-polyfills.js` is removed and should be updated to `react-native/js-polyfills` in existing apps (this is part of the new default config).~~ #publish-packages-to-npm ## Context ### React Native Metro config → React Native repo (facebook/react-native#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: facebook/react-native#36502 ## Changes NOTE: This PR is pending the inclusion of a bump to `react-native-community/cli`, and will be sequenced after 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). - 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 fbshipit-source-id: 405635dd69fd50a1e9548279eaeda3c932b5b167 Original-Commit: facebook/react-native@c5a47ab

facebook-github-bot added CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. p: Facebook Partner: Facebook Partner fb-exported labels Mar 16, 2023

huntie commented Mar 16, 2023

View reviewed changes

huntie mentioned this pull request Mar 16, 2023

breaking: Update cli-plugin-metro to use defaults in app metro.config.js (RN 0.72) react-native-community/cli#1875

Merged

cortinico approved these changes Mar 20, 2023

View reviewed changes

facebook-github-bot closed this in 745cdb1 Mar 21, 2023

facebook-github-bot added the Merged This PR has been merged. label Mar 21, 2023

This was referenced Mar 24, 2023

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

Closed

fix: Add runtime error when Metro config cannot be resolved react-native-community/cli#1889

Merged

cipolleschi added a commit that referenced this pull request Mar 28, 2023

Port changes from main into Stable to make the CI green (#36665)

9ffe82e

Co-authored-by: Riccardo Cipolleschi <cipolleschi@fb.com> Co-authored-by: Alex Hunt <alexeh@meta.com> resolved: #36502

huntie mentioned this pull request May 10, 2023

Feature: Add extends config loading support facebook/metro#977

Open

huntie mentioned this pull request Jun 16, 2023

breaking: Remove fallback flow for Metro config defaults (0.73) react-native-community/cli#1972

Merged

huntie mentioned this pull request Jun 29, 2023

[Future task] Remove @react-native/metro-config warning from react-native start facebook/metro#1018

Open

byCedric mentioned this pull request Dec 7, 2023

Move metro-config package into monorepo build, enable TS generation #41836

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

RFC: Add @react-native/metro-config package #36502

RFC: Add @react-native/metro-config package #36502

huntie commented Mar 16, 2023 •

edited

Loading

facebook-github-bot commented Mar 16, 2023

facebook-github-bot commented Mar 16, 2023

analysis-bot commented Mar 16, 2023 •

edited

Loading

huntie Mar 16, 2023

facebook-github-bot commented Mar 16, 2023

facebook-github-bot commented Mar 20, 2023

huntie commented Mar 20, 2023

cortinico left a comment

facebook-github-bot commented Mar 21, 2023

RFC: Add @react-native/metro-config package #36502

RFC: Add @react-native/metro-config package #36502

Conversation

huntie commented Mar 16, 2023 • edited Loading

Context

React Native Metro config → React Native repo

Motivation

Plan

Changes

Test Plan (all PRs + incoming changes)

facebook-github-bot commented Mar 16, 2023

facebook-github-bot commented Mar 16, 2023

analysis-bot commented Mar 16, 2023 • edited Loading

huntie Mar 16, 2023

Choose a reason for hiding this comment

facebook-github-bot commented Mar 16, 2023

facebook-github-bot commented Mar 20, 2023

huntie commented Mar 20, 2023

cortinico left a comment

Choose a reason for hiding this comment

facebook-github-bot commented Mar 21, 2023

huntie commented Mar 16, 2023 •

edited

Loading

analysis-bot commented Mar 16, 2023 •

edited

Loading