feat: Expose MetroConfig type directly from @react-native/metro-config

[tjzel]

Summary:

React Native app template provided by the CLI currently uses metro-config directly for MetroConfig type.
However, it doesn't have metro-config as neither a dependency or dev dependency, which can lead to version mismatches.

While this is obviously a mistake on the template repo side, metro-config versions aren't matched with react-native versions. Therefore, getting the correct version of metro-config from @react-native/metro-config would require reflecting on @react-native/metro-config's package.json etc. which is far from ideal. In my opinion it's would be much better to expose MetroConfig type from @react-native/metro-config directly.

Version mismatching can happen in a monorepo setup. Say we have the monorepo structure using Yarn Modern:

.
├── RN75-app (workspace)
├── RN76-app (workspace)
│   ├── metro.config.js
│   └── node_modules
│       └── @react-native
│           └── metro-config (0.76)
│               └── node_modules
│                   └── metro-config (version for 0.76)
└── node_modules
    ├── @react-native 
    │   └── metro-config (0.75)
    └── metro-config (version for 0.75)

react-native@0.75 gets hoisted to the monorepo root while react-native@0.76 sits in an RN 0.76 app workspace.

Say we have the following RN76-app/metro.config.js contents:

const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');

/**
 * Metro configuration
 * https://reactnative.dev/docs/metro
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);

In this case, require('@react-native/metro-config') would resolve to RN76-app/node_modules/@react-native/node_modules/metro-config since @react-native/metro-config is a (dev) dependency of the App.

However import('metro-config).MetroConfig would resolve to node_modules/metro-config since it's not a direct dependency.

This is how we have a mismatch - imported functions come from different packages than imported type.

Changelog:

[GENERAL] [ADDED] - Expose MetroConfig type directly from @react-native/metro-config.

Test Plan:

yarn build to generate dist for @react-native/metro-config, see it has the export of MetroConfig.

Notes

If this PR gets approved, I'll submit relevant one to the CLI template.

[robhogan]

LGTM, thanks @tjzel

[facebook-github-bot]

@robhogan has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

[facebook-github-bot]

@robhogan merged this pull request in cc6d1eb.

[react-native-bot]

This pull request was successfully merged by @tjzel in cc6d1eb

^{When will my fix make it into a release? | How to file a pick request?}

[react-native-bot]

This pull request was successfully merged by @tjzel in 273ad9c

^{When will my fix make it into a release? | How to file a pick request?}