Warning presented when starting Metro dev server

[szymonrybczak]

Problem

Currently when starting a development server with npm start a warning is produced:

❯ npm start

> new.expensify@9.0.31-12 start
> npx react-native start

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 =================================================================================================
info Welcome to React Native v0.75
info Starting dev server on port 8081...

                        ▒▒▓▓▓▓▒▒
                     ▒▓▓▓▒▒░░▒▒▓▓▓▒
                  ▒▓▓▓▓░░░▒▒▒▒░░░▓▓▓▓▒
                 ▓▓▒▒▒▓▓▓▓▓▓▓▓▓▓▓▓▒▒▒▓▓
                 ▓▓░░░░░▒▓▓▓▓▓▓▒░░░░░▓▓
                 ▓▓░░▓▓▒░░░▒▒░░░▒▓▒░░▓▓
                 ▓▓░░▓▓▓▓▓▒▒▒▒▓▓▓▓▒░░▓▓
                 ▓▓░░▓▓▓▓▓▓▓▓▓▓▓▓▓▒░░▓▓
                 ▓▓▒░░▒▒▓▓▓▓▓▓▓▓▒░░░▒▓▓
                  ▒▓▓▓▒░░░▒▓▓▒░░░▒▓▓▓▒
                     ▒▓▓▓▒░░░░▒▓▓▓▒
                        ▒▒▓▓▓▓▒▒


                Welcome to Metro v0.80.3
              Fast - Scalable - Integrated

It’s because current config uses getDefaultConfig function expo/metro-config which doesn’t assign __REACT_NATIVE_METRO_CONFIG_LOADED property on global object which is then checked inside @react-native/community-cli-plugin package, if not presented the warning is produced.

Solution

Suggested solution from Metro team is to use a getDefaultConfg function from @react-native/metro-config package to extend the config which provides default values for Metro config.

Diff to solve this issue inside metro.config.js file:

@@ -1,10 +1,13 @@
-const {getDefaultConfig} = require('expo/metro-config');
+const {getDefaultConfig: getExpoDefaultConfig} = require('expo/metro-config');
+const {getDefaultConfig: getReactNativeDefaultConfig} = require('@react-native/metro-config');
+
 const {mergeConfig} = require('@react-native/metro-config');
 const defaultAssetExts = require('metro-config/src/defaults/defaults').assetExts;
 const defaultSourceExts = require('metro-config/src/defaults/defaults').sourceExts;
 require('dotenv').config();

-const defaultConfig = getDefaultConfig(__dirname);
+const defaultConfig = getReactNativeDefaultConfig(__dirname);
+const expoConfig = getExpoDefaultConfig(__dirname);

 const isE2ETesting = process.env.E2E_TESTING === 'true';
 const e2eSourceExts = ['e2e.js', 'e2e.ts', 'e2e.tsx'];
@@ -23,4 +26,4 @@ const config = {
     },
 };

-module.exports = mergeConfig(defaultConfig, config);
+module.exports = mergeConfig(defaultConfig, expoConfig, config);

Provided solution also keeps values and properties from default config from expo/metro-config package. By merging them in relevant order we keep the same behavior with proper config creation.

[melvin-bot]

📣 @szymonrybczak! 📣
Please report bugs or suggest features in the #expensify-open-source Slack channel, don't directly open issues in this repo!
Instructions here to join the channel 📖

[melvin-bot]

Triggered auto assignment to @garrettmknight (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[mountiny]

This is mainly to improve developer experience so I think it's worth it to make this change if everything else will remain working the same

[szymonrybczak]

FYI I checked how Metro Config changes after applying proposed diff and there's only one object added related to TerminalReporter and rest properties and values stays the same, so IMO it shouldn't affect anyone.

[melvin-bot]

📣 @szymonrybczak! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>