Enabling Hermes breaks android/iOS builds

Environment

"react": "^17.0.2"
"react-native": "^0.64.2"
"webpack": "^5.44.0"
"@callstack/repack": "^2.0.0-beta.7"

Description

On android, if we enable hermes as seen below, assembling the app fails to execute on task app:bundleReleaseJsAndAssets. However, if we switch back to using the metro bundler, Hermes works fine. We want to keep using repack for the webpack benefits, but also need Hermes for the project.

project.ext.react = [
    entryFile: "index.js",
    enableHermes: true,
    bundleCommand: "webpack-bundle", // removing this line fixes the error
]

Reproducible Demo

1. Create new react native app
2. Follow callstack/repack documentation for installation and setup
3. Copy-paste the webpack config template
4. Enable Hermes for android build and assemble release build

Errors

iOS

▸ Linking beacon.dev

❌  ld: building for iOS Simulator, but linking in dylib built for iOS, file '/Users/stephenlu/Documents/heroai/frontend/app/ios/Pods/hermes-engine/destroot/Library/Frameworks/iphoneos/hermes.framework/hermes' for architecture arm64

❌  clang: error: linker command failed with exit code 1 (use -v to see invocation)

error Failed to build iOS project. We ran "xcodebuild" command but it exited with error code 65. To debug build logs further, consider building your app with Xcode.app, by opening beaconapp.xcworkspace.

** BUILD FAILED **
The following build commands failed:
	PhaseScriptExecution Bundle\ React\ Native\ code\ and\ images /Users/stephenlu/Library/Developer/Xcode/DerivedData/beaconapp-akmcdfwbbupxepbpqfxdjntkinhn/Build/Intermediates.noindex/beaconapp.build/DebugDev-iphoneos/beaconapp.build/Script-00DD1BFF1BD5951E006B06BC.sh
(1 failure)

info Run CLI with --verbose flag for more details.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Android

> Task :app:bundleDevReleaseJsAndAssets FAILED

FAILURE: Build failed with an exception.

* Where:
Script '/Users/stephenlu/Documents/heroai/frontend/app/node_modules/react-native/react.gradle' line: 173

* What went wrong:
Execution failed for task ':app:bundleDevReleaseJsAndAssets'.
> Process 'command '../../node_modules/hermes-engine/osx-bin/hermesc'' finished with non-zero exit value 2

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

Deprecated Gradle features were used in this build, making it incompatible with Gradle 7.0.
Use '--warning-mode all' to show the individual deprecation warnings.
See https://docs.gradle.org/6.5/userguide/command_line_interface.html#sec:command_line_warnings

BUILD FAILED in 32s

[TheMatrixMaster]

Alright, so I was able to successfully run both commands. For future reference, these are the packages that I had to add to the babel loader rules:

/node_modules(.*[/\\])+socket.io-client/
/node_modules(.*[/\\])+engine.io-client/
/node_modules(.*[/\\])+socket.io-parser/

Thanks so much @zamotany for your help!

[ohheyitskartik]

@TheMatrixMaster how did you find out all the dependencies which needed babel transpiling ? if you can explain the process, that would be grt i am stuck in a similar situation