False positive metro config warning

[paulschreiber]

Description

When I start my app locally (npm run ios), I get this error:

warn =================================================================================================
warn From React Native 0.73, your project's Metro config should extend '@react-native/metro-config'
warn or it will fail to build. Please copy the template at:
warn https://github.com/facebook/react-native/blob/main/packages/react-native/template/metro.config.js
warn This warning will be removed in future (https://github.com/facebook/metro/issues/1018).
warn =================================================================================================

My metro.config.js looks like this:

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

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

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

Since I am using Expo, I need to extend that, too.

Steps to reproduce

1. Create a new React Native project
2. npx install-expo-modules@latest
3. npm run ios

React Native Version

0.73.4

Affected Platforms

Build - MacOS

Output of npx react-native info

System:
  OS: macOS 14.3.1
  CPU: (10) arm64 Apple M1 Pro
  Memory: 3.58 GB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.9.0
    path: ~/.nvm/versions/node/v20.9.0/bin/node
  Yarn:
    version: 1.22.21
    path: /opt/homebrew/bin/yarn
  npm:
    version: 10.2.5
    path: ~/.nvm/versions/node/v20.9.0/bin/npm
  Watchman:
    version: 2024.01.22.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /Users/paul/.rbenv/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.2
      - iOS 17.2
      - macOS 14.2
      - tvOS 17.2
      - visionOS 1.0
      - watchOS 10.2
  Android SDK:
    API Levels:
      - "27"
      - "29"
      - "30"
      - "33"
      - "34"
    Build Tools:
      - 30.0.3
      - 33.0.0
      - 33.0.1
      - 34.0.0
    System Images:
      - android-33 | Google APIs ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2022.3 AI-223.8836.35.2231.10811636
  Xcode:
    version: 15.2/15C500b
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.9
    path: /opt/homebrew/bin/javac
  Ruby:
    version: 3.2.2
    path: /Users/paul/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.73.4
    wanted: ^0.73.4
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

Stacktrace or Logs

warn =================================================================================================
warn From React Native 0.73, your project's Metro config should extend '@react-native/metro-config'
warn or it will fail to build. Please copy the template at:
warn https://github.com/facebook/react-native/blob/main/packages/react-native/template/metro.config.js
warn This warning will be removed in future (https://github.com/facebook/metro/issues/1018).
warn =================================================================================================

Reproducer

https://github.com/paulschreiber/metro-config-warning

Screenshots and Videos

No response

[cortinico]

Yup this is a valid report as the code to fire this warning lives here: https://github.com/facebook/react-native/blob/87692454774d797cd3d7f26a0c31d53a4c90cfdd/packages/community-cli-plugin/src/utils/loadMetroConfig.js#L83-L109

@huntie do you know what might be going on here?

[huntie]

Interesting. @paulschreiber Your Metro config extends expo/metro-config (rather than @react-native/metro-config), and is being consumed via React Native Community CLI (rather than Expo CLI which would usually be the target for expo/metro-config). This will be the cause.

Resolution: I'd suggest copying the template package.json exactly, and then adding back either 1/ parts of expo/metro-config as necessary, or 2/ all of expo/metro-config and placing it 2nd into the mergeConfig call (shown).

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

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

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

---

As for whether the warning should happen in this case, if extending expo/metro-config only — it's correct, but not ideal. We designed the check to be robust by settting a global __REACT_NATIVE_METRO_CONFIG_LOADED variable, specific to @react-native/metro-config, with the expectation that this should be loaded in every user's config that inputs to CLI.

The warning will also be removed in future once we are confident people have migrated, likely 0.75.

cc @byCedric — Relevant to decision around expo/metro-config not directly extending @react-native/metro-config itself. We can review this, but it's not necessarily the direction we have to go. The above user fix is the valid approach.

[paulschreiber]

@huntie As noted in steps to reproduce, this config file was created by the React Native and Expo scaffolding.

It's unclear from your comment who should make the changes to metro.config.js (I assume package.json is a typo).

• Me? No, this is a dummy/template app.
• Facebook? Let me know which PR is tracking that work
• Expo? Please file a bug agains the expo repo telling them to do this. It'll be much better coming from you than from me.

[huntie]

@paulschreiber Right, this is part of Expo's instructions with npx install-expo-modules@latest, I see now 👍🏻.

https://docs.expo.dev/bare/installing-expo-modules/#optional-use-expo-cli-for-bundling

I'll follow up with @byCedric.

[iamnynvk]

Where is the React native CLI solution ?