react-native bundle command fails to find metro.config.js

[DaniyarJakupov]

Environment

System:
  OS: macOS 13.4.1
  CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Memory: 5.42 GB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 16.20.1
    path: ~/.nvm/versions/node/v16.20.1/bin/node
  Yarn:
    version: 1.22.19
    path: ~/Documents/.../ProjectFolder/node_modules/.bin/yarn
  npm:
    version: 8.19.4
    path: ~/.nvm/versions/node/v16.20.1/bin/npm
  Watchman:
    version: 2023.04.10.00
    path: /usr/local/bin/watchman
Managers:
  CocoaPods:
    version: 1.12.1
    path: /Users/daniyarjakupov/.gem/ruby/3.1.0/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 22.4
      - iOS 16.4
      - macOS 13.3
      - tvOS 16.4
      - watchOS 9.4
  Android SDK:
    API Levels:
      - "23"
      - "30"
      - "31"
      - "33"
    Build Tools:
      - 30.0.2
      - 30.0.3
      - 31.0.0
      - 33.0.0
    System Images:
      - android-30 | Intel x86_64 Atom
      - android-30 | Google APIs Intel x86 Atom
      - android-30 | Google Play Intel x86 Atom
      - android-33 | Google APIs Intel x86_64 Atom
      - android-33 | Google Play Intel x86_64 Atom
    Android NDK: Not Found
IDEs:
  Android Studio: 2022.2 AI-222.4459.24.2221.10121639
  Xcode:
    version: 14.3.1/14E300c
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 11.0.20
    path: /usr/bin/javac
  Ruby:
    version: 3.1.0
    path: /Users/daniyarjakupov/.rubies/ruby-3.1.0/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react: Not Found
  react-native:
    installed: 0.72.3
    wanted: 0.72.3
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: false
  newArchEnabled: false

Description

We have a react-native-web project with the following structure:

ProjectFolder
    ->node_modules
    ->packages
            -> mobile
                   -> ios/android/metro.config.js

After upgrading react-native to 0.72.3 react-native bundle command fails with No metro config found in /Users/.../Documents/ProjectFolder.

It happens during bundling phase of codepush release. The command is run from ProjectFolder root directory so --config and some other flags are passed with correct paths:

node node_modules/.bin/react-native bundle --assets-dest .tmp/CodePush --bundle-output .tmp/CodePush/index.android.bundle --dev false --entry-file ./packages/mobile/index.android.js --platform android --config ./packages/mobile/metro.config.js

I tried to debug buildBundle in /cli-plugin-metro/src/commands/bundle/buildBundle.ts and args are there including config:

{
  platform: 'android',
  dev: false,
  bundleEncoding: 'utf8',
  sourcemapUseAbsolutePath: false,
  unstableTransformProfile: 'default',
  resetCache: false,
  readGlobalCache: false,
  generateStaticViewConfigs: true,
  assetsDest: '.tmp/CodePush',
  bundleOutput: '.tmp/CodePush/index.android.bundle',
  entryFile: './packages/mobile/index.android.js',
  config: '/Users/.../ProjectFolder/packages/mobile/metro.config.js'
}

The error happens here when loadMetroConfig is called.
In function loadMetroConfig(ctx, options = {}), options arg is defined:

{
  maxWorkers: undefined,
  resetCache: false,
  config: '/Users/.../packages/mobile/metro.config.js'
}

But then this block happens:

const projectConfig = await resolveConfig(undefined, ctx.root);
  if (projectConfig.isEmpty) {
    throw new CLIError(`No metro config found in ${ctx.root}`);
  }

and here projectConfig.isEmpty is true:

{
  isEmpty: true,
  filepath: '/Users/.../ProjectFolder/metro.config.stub.js',
  config: {}
}

The question is why resolveConfig does not take into account custom path to metro.config.js? In fact options are not even passed to it.

This is @react-native-community/cli version that is installed

{
  "name": "@react-native-community/cli",
  "version": "11.3.5",

[DaniyarJakupov]

So I found a fix, in loadMetroConfig I pass options.config instead of undefined when calling resolveConfig:

const projectConfig = await resolveConfig(options.config, ctx.root);

It works, but the question is why undefined is passed?

[szymonrybczak]

@huntie Do you have any idea? 👀

[DaniyarJakupov]

This is the PR that introduced this change: #1889

[huntie]

@DaniyarJakupov Thanks for spotting this! Note that the result of resolveConfig is used only for the config existence checks, but the actual config loading happens on the final statement within loadMetroConfig (and does consider options.config).

[DaniyarJakupov]

@huntie thank you for the quick response! Yes, as soon as that check passes, bundle works with the correct path to metro.config.js. Will do a patch in our project until this fix lands in a new version.