HELP error index.js: The "id" argument must be of type string. Received undefined.

[walidhousni30]

Description

Since i upgraded my react native app to 0.72 i cant run the app anymore .i ve tried to dedupe the duplicates of metro , but here i am stuck with this error .

React Native Version

0.72.0-rc.6

Output of npx react-native info

System:
OS: macOS 13.4
CPU: (8) arm64 Apple M1
Memory: 126.47 MB / 8.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 20.3.1
path: /opt/homebrew/bin/node
Yarn:
version: 4.0.0-rc.45
path: ~/Desktop/projects/labelvie/fid-mobile-copy/node_modules/.bin/yarn
npm:
version: 9.6.7
path: /opt/homebrew/bin/npm
Watchman:
version: 2023.06.12.00
path: /opt/homebrew/bin/watchman
Managers:
CocoaPods:
version: 1.12.1
path: /Users/walidhousni/.rvm/gems/ruby-3.2.2/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:
- "31"
- "33"
Build Tools:
- 30.0.2
- 30.0.3
- 33.0.0
- 33.0.2
- 34.0.0
System Images:
- android-33 | Google TV Intel x86 Atom
- android-33 | Google APIs ARM 64 v8a
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.19
path: /usr/bin/javac
Ruby:
version: 3.2.2
path: /Users/walidhousni/.rvm/rubies/ruby-3.2.2/bin/ruby
npmPackages:
"@react-native-community/cli":
installed: 10.0.0
wanted: 10.0.0
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.72.0-rc.6
wanted: 0.72.0-rc.6
react-native-macos: Not Found
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: true
newArchEnabled: true
iOS:
hermesEnabled: true
newArchEnabled: false

Steps to reproduce

react-native start --reset-cache

Snack, code example, screenshot, or link to a repository

import { AppRegistry, Platform } from 'react-native';
import App from './src/App';
import { name as appName } from './app.json';

// Here, we require "intl", which is used in @lingui/macro, but not available in Hermes (used for Android)
if (Platform.OS === 'android') {
global.Intl = require('intl');
require('intl/locale-data/jsonp/fr.js');
require('intl/locale-data/jsonp/en.js');
// add more locales
}

AppRegistry.registerComponent(appName, () => App);

[cortinico]

0.72.0-rc.6

What's the reason you're on rc.6 while you should be using 0.72.0?

[cortinico]

Effectively a duplicate of facebook/react-native#34315

[walidhousni30]

and there's literally no answer for that tho

[walidhousni30]

@cortinico i upgraded it to test if there's a fix in the release candidate 6 but no change tho , i dont really know how to solve this issue

[cortinico]

Moving this over to facebook/metro for furhter investigation as I see metro-transform-worker as part of the stacktrace

[walidhousni30]

where did you see metro-transform-worker ??

[huntie]

@walidhousni30 Can you share the contents of your project's metro.config.js file? (Perhaps babelTransformerPath or minifierPath could be unset)

[walidhousni30]

@huntie here's the content of metro.config.js

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
const path = require('path');
/**
 * Metro configuration
 * https://facebook.github.io/metro/docs/configuration
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {
  watchFolders: [path.resolve(__dirname, '../../')],
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
  },
  resolver: {
    sourceExts: ['js', 'jsx', 'ts', 'tsx', 'mjs'],
    resolverMainFields: ['sbmodern', 'react-native', 'browser', 'main'],
  },
};

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

[huntie]

From the line numbers reported in the stack trace, it looks like while you're on metro@0.76.5, you have metro-transform-worker 0.71.1 or older installed.

Please can you run the below and share the result here?

yarn why metro-transform-worker

I also note that you are depending on an old version of React Native CLI — React Native 0.72 requires (and depends on) @react-native-community/cli@11.3.2.

npmPackages:
"@react-native-community/cli":
installed: 10.0.0
wanted: 10.0.0

⬆️ Sometimes, this can be caused by installed libraries which (problematically) depend on react-native directly. It could also be from forced dependency versions (e.g. Yarn resolutions — please revert these).

To be sure your dependencies are as specified, try also:

rm -rf node_modules
yarn

[walidhousni30]

thank you for your clear and consistent answer @huntie

here's the yarn why metro-transform-worker log

├─ metro@npm:0.70.4
│  └─ metro-transform-worker@npm:0.70.4 (via npm:0.70.4)
│
├─ metro@npm:0.73.10
│  └─ metro-transform-worker@npm:0.73.10 (via npm:0.73.10)
│
└─ metro@npm:0.76.5
   └─ metro-transform-worker@npm:0.76.5 (via npm:0.76.5)

[huntie]

@walidhousni30 Great — worth digging up why metro@npm:0.70.4 is there (old version), by trying yarn why metro etc. Really, there should only be one version of Metro (metro@npm:0.76.5) in your project.

[walidhousni30]

@huntie i did yarn why metro but i dont know exactly how to get rid of the duplicates / old versions

log of yarn why metro

├─ @react-native-community/cli-plugin-metro@npm:11.3.2
│  └─ metro@npm:0.76.5 (via npm:0.76.5)
│
├─ flipper-pkg-lib@npm:0.200.0
│  └─ metro@npm:0.70.4 (via npm:^0.70.2)
│
├─ flipper-server@npm:0.200.0
│  └─ metro@npm:0.70.4 (via npm:^0.70.2)
│
├─ metro-config@npm:0.70.4
│  └─ metro@npm:0.70.4 (via npm:0.70.4)
│
├─ metro-config@npm:0.76.5
│  └─ metro@npm:0.76.5 (via npm:0.76.5)
│
├─ metro-transform-worker@npm:0.70.4
│  └─ metro@npm:0.70.4 (via npm:0.70.4)
│
└─ metro-transform-worker@npm:0.76.5
   └─ metro@npm:0.76.5 (via npm:0.76.5)