Opening Devtools from iOS emulator crashes app with /open-debugger not found after 5.0.0

[daveskybet]

Describe the bug

When attempting to open Devtools via the iOS emulator (i imagine also on other platforms/devices given the issue) either with the warnings dialogue or dev menu results in the app crashing with the error:

TypeError: this[writeSym] is not a function

Which apart from seemingly being an issue with Pino, digging deeper the underlying error is:

[17:11:45.663Z][DevServer] File open-debugger not found {
  reqId: 'req-12',
  err: {
    type: 'CLIError',
    message: 'File open-debugger not found',
    stack: 'CLIError: File open-debugger not found\n' +
      '    at Compiler.getSource (/Users/david.hales/dev/tbd/apps/bf/native/node_modules/@callstack/repack/dist/commands/rspack/Compiler.js:207:13)\n' +
      '    at async Object.handler (file:///Users/david.hales/dev/tbd/node_modules/@callstack/repack-dev-server/dist/plugins/compiler/compilerPlugin.js:36:31)',
    name: 'CLIError'
  }
}

Even attempting to hit http://localhost:8081/open-debugger?... in browser returns a 404.

v5.0.0 is fine and opens devtools without error, v5.0.1/2 suffer a different error(Conflict: Multiple assets emit different content to the same filename index.bundle) so can't test, but that error is resolved by v5.0.3 where then the above issue appears.

This issue seems consistent across multiple projects, from a large project i'm migrating to your own super-app-showcase

Opening Devtools via j in terminal does succeed however.

System Info

System:
  OS: macOS 14.6.1
  CPU: (10) arm64 Apple M1 Pro
  Memory: 413.83 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 22.14.0
    path: ~/.asdf/installs/nodejs/22.14.0/bin/node
  Yarn:
    version: 3.2.1
    path: ~/.asdf/installs/nodejs/22.14.0/bin/yarn
  npm:
    version: 10.9.2
    path: ~/.asdf/installs/nodejs/22.14.0/bin/npm
  Watchman:
    version: 2025.03.03.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods: Not Found
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.2
      - iOS 17.2
      - macOS 14.2
      - tvOS 17.2
      - watchOS 10.2
  Android SDK:
    API Levels:
      - "31"
      - "33"
      - "33"
      - "34"
    Build Tools:
      - 30.0.3
      - 33.0.0
      - 33.0.1
      - 34.0.0
    System Images:
      - android-31 | Google Play ARM 64 v8a
      - android-34 | Google APIs ARM 64 v8a
      - android-TiramisuPrivacySandbox | Google Play ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2023.1 AI-231.9392.1.2311.11330709
  Xcode:
    version: 15.1/15C65
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.7
    path: /usr/bin/javac
  Ruby:
    version: 3.2.2
    path: /Users/david.hales/.asdf/shims/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react: Not Found
  react-native: Not Found
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: true

Re.Pack Version

5.0.4

Reproduction

https://github.com/callstack/super-app-showcase

Steps to reproduce

git clone super-app-showcase
update @callstack/repack to v5.0.0
pnpm install/pods/start/run:host:ios

Confirm opening devtools from emulator works

update @callstack/repack to v5.0.3 (or v5.0.4)
pnpm install/pods/start/run:host:ios

Opening devtools from emulator crashes app as described.

[szymonrybczak]

Hey @daveskybet,

We did reproduce the issue in showcase and the root cause of that issue is that showcase is still on 0.76, but dev-server package has a direct dependency on higher version of@react-native/dev-middleware:

repack/packages/dev-server/package.json

Line 34 in c37fbcf

"@react-native/dev-middleware": "^0.78.0",

and because of this version mismatch there's a failure when trying to open DevTools.

To resolve this you can add this override to root package.json:

 "mprocs": "^0.7.1"
 },
 "pnpm": {
+ "overrides": {
+   "@react-native/dev-middleware": "CURRENT_REACT_NATIVE_VERSION"
+ },
   "patchedDependencies": {
     "@react-native/community-cli-plugin": "patches/@react-native__community-cli-plugin.patch",
     "react-native-paper": "patches/react-native-paper.patch"

Here's how you can achieve it with Yarn, or npm

CURRENT_REACT_NATIVE_VERSION → as of time of writing is 0.76.6, and after installing packages again it should work.

We'll resolve this properly issue soon so that users won't need to override package's version.

[daveskybet]

Perfect, all works now. Thanks for you quick response @szymonrybczak!