Bundlejs error on release build in Xcode (react-native) - ios

For some reason I am getting the following error when building a release version of my application via react-native.
*** Terminating app due to uncaught exception 'RCTFatalException: Unhandled JS Exception: t.typeof is not a function. (In 't.typeof("function"==typeof Symbol?Symbol.iterator:"##iterator")', 't.typeof' is undefined) (/Users/../THEAPP.app/main.jsbundle:11)', reason: 'Unhandled JS Exception: t.typeof is not a function. (In 't.typeof("function...'
This is the source of the code that has the above error that I found in my bundlejs file:
!(function(e){"use strict";var r,t=e.babelHelpers={};t.typeof="function"==typeof Symbol&&"symbol"===t.typeof("function"==typeof Symbol?Symbol.iterator:"##iterator")?
I have tried both of these methods of a release build:
Making bundle by editing the Scheme to be a Release bundle
Export a bundle myself by using the following: react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ios/main.jsbundle --assets-dest ios
I get the same error for both of these. And of course, this is after I change my AppDelegate.m to the following:
//jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:#"index" fallbackResource:nil];
jsCodeLocation = [[NSBundle mainBundle] URLForResource:#"main" withExtension:#"jsbundle"];
I also followed someone's response from Github issues and tried the following, but got another separate issue entirely after the fact:
I did:
npm uninstall -g babel-preset-env
npm install --save #babel/preset-env
Added this to my package.json file
"babel": { "presets": ["#babel/preset-env", "react-native"] }
And created a .babelrc file in my root project with:
{ "presets": ["#babel/preset-env", "react-native"] }
Then get this on an Xcode build:
Environment
OS: macOS High Sierra 10.13.4
Node: 9.11.1
npm: 5.6.0
Watchman: 4.9.1
Xcode: Version 9.4 (9F1027a)
react: 16.3.1
react-native: 0.55.4

I solved this by completely restarting my app and using:
react-native init PROJECTNAME

Related

React-native monorepo iOS release build crash

I have a monorepo with this architecture :
├── node_modules
├── packages
├── app # React native project
├── android
└── ios
├── common # TS package
└── web # Next JS project
In common package I have some shared services such as API calls for web front and mobile app.
During development phases, build and run process were working fine for both app and web.
Now I would like to publish my app to the app store but I'm not able to compile a working release ios app.
I have this crash logs when launching the app :
022-06-02 15:33:14.173898+0200 XXXX[33899:2579321] *** Terminating app due to uncaught exception 'RCTFatalException: Unhandled JS Exception: Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect.
This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.', reason: 'Unhandled JS Exception: Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the applica..., stack:
<unknown>#13:289
value#760:3143
<unknown>#760:747
value#760:2538
value#760:719
value#(null):(null)
'
*** First throw call stack:
(0x185361288 0x19e05b744 0x1003c0538 0x10043fd8c 0x10044066c 0x1852e9b24 0x185307610 0x18533e5fc 0x1003d7bd4 0x1003f5e98 0x1003f5ac8 0x184fc6e6c 0x184fc8a30 0x184fd0124 0x184fd0c80 0x184fdb500 0x1f6c240bc 0x1f6c23e5c)
libc++abi: terminating with uncaught exception of type NSException
I follow this article to build monorepo : https://medium.com/#ratebseirawan/react-native-0-63-monorepo-walkthrough-36ea27d95e26.
I have in my xcode project, Build Phases > Bundle React Native code and images :
set -e
export NODE_BINARY=node
export EXTRA_PACKAGER_ARGS="--entry-file packages/app/index.js --reset-cache"
../../../node_modules/react-native/scripts/react-native-xcode.sh "packages/app/index.js"
and in Start packager :
export RCT_METRO_PORT="${RCT_METRO_PORT:=8081}"
echo "export RCT_METRO_PORT=${RCT_METRO_PORT}" > "${SRCROOT}/../../../node_modules/react-native/scripts/.packager.env"
if [ -z "${RCT_NO_LAUNCH_PACKAGER+xxx}" ] ; then
if nc -w 5 -z localhost ${RCT_METRO_PORT} ; then
if ! curl -s "http://localhost:${RCT_METRO_PORT}/status" | grep -q "packager-status:running" ; then
echo "Port ${RCT_METRO_PORT} already in use, packager is either not running or not running correctly"
exit 2
fi
else
open "$SRCROOT/../../../node_modules/react-native/scripts/launchPackager.command" || echo "Can't start packager automatically"
fi
fi
In my AppDelegate.m
- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
#if DEBUG
return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:#"packages/app/index" fallbackResource:nil];
#else
return [[NSBundle mainBundle] URLForResource:#"main" withExtension:#"jsbundle"];
#endif
}
metro.config.js :
const {getDefaultConfig} = require("metro-config");
const path = require('path');
module.exports = (async () => {
const {
resolver: {sourceExts, assetExts}
} = await getDefaultConfig();
return {
projectRoot: path.resolve(__dirname, '../../'),
transformer: {
babelTransformerPath: require.resolve("react-native-svg-transformer"),
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: true,
},
}),
},
resolver: {
assetExts: assetExts.filter(ext => ext !== "svg"),
sourceExts: [...sourceExts, "svg"]
}
};
})();
Env :
react-native 0.67.4
output of npx react-native info :
System:
OS: macOS 12.3.1
CPU: (8) arm64 Apple M1
Memory: 555.95 MB / 16.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 16.14.2 - /usr/local/bin/node
Yarn: 1.22.19 - ~/.yarn/bin/yarn
npm: 8.5.0 - /usr/local/bin/npm
Watchman: Not Found
Managers:
CocoaPods: 1.11.3 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 21.4, iOS 15.5, macOS 12.3, tvOS 15.4, watchOS 8.5
Android SDK: Not Found
IDEs:
Android Studio: 2021.1 AI-211.7628.21.2111.8092744
Xcode: 13.4/13F17a - /usr/bin/xcodebuild
Languages:
Java: 17.0.2 - /usr/bin/javac
npmPackages:
#react-native-community/cli: Not Found
react: Not Found
react-native: Not Found
react-native-macos: Not Found
npmGlobalPackages:
*react-native*: Not Found
I think that the main.js bundle generated is at the wrong place but I don't find the solution, have you any idea ?
Thanks !
in your packages/app/metro.config.js file did you do the changes that are shown in the article?
also and could you share that file.
(The article that you mentioned was specifically supposed to work with ReactNative 0.63, at that time there was little to no tooling to work with React Native on a Monorepo but now we have great tooling and support for it that will solve these annoying issues out of the box, I personally have been using https://nx.dev/guides/react-native)
for your issue tho I can try to help but there might be many things that could cause the error, one might be behind the M1 chip (doesn't have to be tho)
another info that might help, I read the patch notes of RN version 0.65 or 0.66 that they fixed an issue with monorepos where metro doesn't work nicely with symlinks so that might help.
but if I where you, I would clone the NX monorepo template and see their setup and compare with what you have (Files I would look at are metro.config. info.plist. babel.config)
Atm, I found a temporarily workaround :
I added in packages/app/package.json :
"build-prod:ios": "react-native bundle --platform ios --dev false --entry-file ./packages/app/index.js --bundle-output ios/MyAppName/main.jsbundle --assets-dest ios",
in Xcode > Build Phases > Copy Bundle Ressources :
add main.jsbundle
Comment all lines in "Bundle React Native code and images" and "Start packager"
For each new release, I now need to run yarn build-prod:ios before use xcode to build.

React native build failed in iOS - PhaseScriptExecution

I am facing issue in react-native project. It's working fine in android but build failed in iOS version. I have already tried all possible solution, but didn't get any solution.
The main problem is PhaseScriptExecution.
Xcode version - 12.4
Mac OS version - 11.3 (Big Sur)
npm version - 7.10.0
react-native version - 0.64.0
react version - 17.0.1
For mode detail, i am attaching the screenshot.
/Users/mmdev1/Library/Developer/Xcode/DerivedData/PRJ22-edpcityjusyktkdaxtnvzawndbxa/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/FBReactNativeSpec.build/Script-99DF087F7D2E061B36AA638AA7C0AD26.sh: line 4: 16519 Segmentation fault: 11 bash -l -c 'SRCS_DIR=/Users/mmdev1/Documents/RN/PRJ22/node_modules/react-native/scripts/../Libraries CODEGEN_MODULES_OUTPUT_DIR=/Users/mmdev1/Documents/RN/PRJ22/node_modules/react-native/scripts/../React/FBReactNativeSpec/FBReactNativeSpec CODEGEN_MODULES_LIBRARY_NAME=FBReactNativeSpec /Users/mmdev1/Documents/RN/PRJ22/node_modules/react-native/scripts/generate-specs.sh' 2>&1
I was getting the same failure, and I have not been able to pinpoint exactly why this works, but in my package.json I changed
"scripts": {
"ios": "react-native run-ios",
}
to
"scripts": {
"ios": "unset PREFIX && react-native run-ios",
}
As I was seeing some issues regarding the PREFIX env variable when using Node Versioning Manager (nvm).

Is there a work around for the conflict with the cordova-plugin-fcm-with-dependecy-updated and cordova ios

Im creating an Ionic 6.0 Cordova 9.0 project and I'm attempting to add the cordova fcm plugin in addition to the Cordova iOS 5.1.1 but it's failing in the build.
Here is my package json
"cordova": "^8.0.0",
"cordova-android-support-gradle-release": "^3.0.1",
"cordova-ios": "^5.1.1",
"cordova-plugin-device": "^2.0.3",
"cordova-plugin-fcm-with-dependecy-updated": "^7.3.0",
what's odd is Cordova says 8.0.0 which is really
cordova -v
9.0.0 (cordova-lib#9.0.1)
But the real problem is attempting to build the iOS project
** BUILD FAILED **
The following build commands failed:
CompileC /var/root/Library/Developer/Xcode/DerivedData/-fzuncmihunbgyyfsixovlktiuyaf/Build/Intermediates.noindex/app.build/Debug-iphonesimulator/app\ Mingle.build/Objects-normal/x86_64/AppDelegate+FCMPlugin.o /Users/anonymous/project/app-v5/platforms/ios/Heathen\ Mingle/Plugins/cordova-plugin-fcm-with-dependecy-updated/AppDelegate+FCMPlugin.m normal x86_64 objective-c com.apple.compilers.llvm.clang.1_0.compiler
(1 failure)
and then when I attempt to open in xCode I get a similar error in this specific line of code:
- (void)messaging:(nonnull FIRMessaging *)messaging didReceiveRegistrationToken:(nonnull NSString *)deviceToken {
NSLog(#"Device FCM Token: %#", deviceToken);
if(deviceToken == nil) {
fcmToken = nil;
[FCMPlugin.fcmPlugin notifyFCMTokenRefresh:nil];
return;
}
Nullability specifier 'nonnull' conflicts with existing specifier 'nullable'
I don't have an issue with Android, only with iOS and this conflict.
EDIT: As a hot fix, you can delete "nonnull" keyword in the "- (void)messaging:(nonnull FIRMessaging *)messaging didReceiveRegistrationToken:(nonnull NSString *)deviceToken {" error statement. This helped me succeed in building the app.
I followed these steps for a successful build:
cd platforms/ios
pod repo update
pod install
cd ..
cd ..
Now Delete plugins folder, platforms folder and the node_modules folder. (Step 6, 7 and 8)
npm i
ionic cordova platform add ios
ionic cordova build ios
( I know I couldve just said I updated pod repo and re installed node modules, plugins and platform but alot of new devs might have wasted some more time figuring out these commands, so yeah! )

react native ios build succeeds but path to app bundle is wrong

When I run react-native run-ios build succeeds and created build folder under ios. But after build, when installation starts, get the below error. The project runs successfully when I run it through xcode. What I observed is that path beginning 'DerivedData' is wrong. Instead it should be 'build'. When I rename my 'build' folder to 'DerivedData' and re-run 'react-native run-ios' the whole process completes successfully but of course with the previous build.
How can I change the 'DerivedData' to 'build'?
This error occurred immediately after I upgraded from 0.59.9 to 0.60.0.
Error:
info Installing "DerivedData/Build/Products/Debug-iphonesimulator/mobileappname.app"
An error was encountered processing the command (domain=NSPOSIXErrorDomain, code=2):
Failed to install the requested application
An application bundle was not found at the provided path.
Provide a valid path to the desired application bundle.
Print: Entry, ":CFBundleIdentifier", Does Not Exist
error Command failed: /usr/libexec/PlistBuddy -c Print:CFBundleIdentifier DerivedData/Build/Products/Debug-iphonesimulator/mobileappname.app/Info.plist
Print: Entry, ":CFBundleIdentifier", Does Not Exist
. Run CLI with --verbose flag for more details.
Error: Command failed: /usr/libexec/PlistBuddy -c Print:CFBundleIdentifier DerivedData/Build/Products/Debug-iphonesimulator/mobileappname.app/Info.plist
Print: Entry, ":CFBundleIdentifier", Does Not Exist
at checkExecSyncError (child_process.js:616:11)
at Object.execFileSync (child_process.js:634:13)
at runOnSimulator (/Users/armaneker/WebstormProjects/mobileappname/node_modules/#react-native-community/cli-platform-ios/build/commands/runIOS/index.js:189:45)
at process._tickCallback (internal/process/next_tick.js:68:7)
React Native version:
System:
OS: macOS 10.15
Binaries:
Node: 10.15.3 - /usr/local/bin/node
npm: 6.13.1 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 13.0, DriverKit 19.0, macOS 10.15, tvOS 13.0, watchOS 6.0
Xcode: 11.0/11A420a - /usr/bin/xcodebuild
npmPackages:
react: 16.8.6 => 16.8.6
react-native: 0.60.0 => 0.60.0
npmGlobalPackages:
create-react-native-app: 1.0.0
react-native-cli: 2.0.1
react-native-git-upgrade: 0.2.7
Steps To Reproduce
used rn-diff-purge to upgrade from 0.59.9 to 0.60.0
android worked correctly
react-native run-ios build succeeded but installation of
app failed
The solution is not obvious, react-native-cli is trying to guess what xcode build configuration is currently setup on your computer which is what is happening on the function getBuildPath()
function getBuildPath(configuration, appName, isDevice, scheme) {
let device;
if (isDevice) {
device = 'iphoneos';
} else if (appName.toLowerCase().includes('tvos')) {
device = 'appletvsimulator';
} else {
device = 'iphonesimulator';
}
let buildPath = `build/${scheme}/Build/Products/${configuration}-${device}/${appName}.app`; // Check wether app file exist, sometimes `-derivedDataPath` option of `xcodebuild` not works as expected.
if (!_fs().default.existsSync(_path().default.join(buildPath))) {
return `DerivedData/Build/Products/${configuration}-${device}/${appName}.app`;
}
return buildPath;
}
The trick is not to patch this file, but to first setup your xcode configuration correctly Xcode > Preferences > Locations (see picture)
and Xcode > Preferences > Locations > Advanced
Once this is done, you have to cleanup your build folder, otherwise, react-native-cli will still assume that xcode is not behaving as expected, which will keep on producing the same error.
cd ios && rm -rf build
you can now execute npx react-native run-ios and everything should be fine again.
It took me quite some time to figure this out, I think that react-native-cli should output more details on what is going on under the hood for people not to be blocked.
Problem solved. I had to edit a file inside #react-native-community.
If anyone else has the same problem solution is below.
File location:
-> file:
-> node_modules
-> #react-native-community
-> cli-platform-ios
-> build
-> commands
-> runIOS
-> index.js line 314
Change:DerivedData/Build/Products/${configuration}-${device}/${appName}.app
To:build/Build/Products/${configuration}-${device}/${appName}.app
Cheers.

"No bundle url present" error with react-native iOS release mode

I have a native iOS app, and we're using react-native to embed a Facebook-style social feed. To run in debug mode I use the packager server and the following code:
NSURL *jsCodeLocation = [NSURL URLWithString:#"http://X.X.X.X:8081/index.ios.bundle?platform=ios"];
bridgeReactView = [[RCTBridge alloc] initWithBundleURL: jsCodeLocation
moduleProvider: nil
launchOptions:nil];
rootReactView = [[RCTRootView alloc] initWithBridge:bridgeReactView
moduleName:#"SocialFeed"
initialProperties:#{}];
where X.X.X.X is my local IP address. This works fine, but I can't get it to bundle the react code into the release version. From the official docs and other Stack Overflow posts I've gathered that it was originally necessary to manually bundle the code with something like
react-native bundle --entry-file="index.ios.js" --bundle-output="./ios/MyApp/main.jsbundle' --dev=false --platform='ios' --assets-dest="./ios"
and change the jsCodeLocation definition above to
*jsCodeLocation = [[NSBundle mainBundle] URLForResource:#"main" withExtension:#"jsbundle"];
Apparently, in more recent versions of react-native, xCode will bundle the code for you automatically if you choose the release build configuration, in which case you must change the above to
NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:#"index.ios" fallbackResource:nil];
Neither of these methods work for us - in both cases jsCodeLocation gets set to nil, and I get the "No bundle URL present" error:
2017-05-08 15:06:56.738 [fatal][tid:main] No bundle URL present.
Make sure you're running a packager server or have included a .jsbundle file in your application bundle.
Incidentally, I have tried setting the following values in my Info.plist file:
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
<key>NSAllowsArbitraryLoadsInWebContent</key>
<true/>
<key>NSAllowsLocalNetworking</key>
<true/>
</dict>
</key>
You should do the following:
Run the following command:react-native bundle --dev false --platform ios --entry-file index.ios.js --bundle-output ios/main.jsbundle --assets-dest ./ios
Add main.jsbundle and assets directory to xcode by dragging them in your project.
Note: You only have to run step 2 the first time.
Mina M's answer was so close for me but I was getting a File not found: index.ios.js in any of the project roots error when calling the command. The reason behind this was because I no longer have the separate index.js files for Android and iOS - I have 1 (Which I believe it standard practice now?).
Solution - run this in the root of your React Native project (the folder with your android, ios and node_modules folders in):
react-native bundle --dev false --platform ios --entry-file index.js --bundle-output ios/main.jsbundle --assets-dest ./ios
Then you'll have to do step 2 and drag the main.jsbundle file and assets folder that have just been created in your ios folder, into the your project root within Xcode.
In your code you stated that your bundle is in:
http://X.X.X.X:8081/index.ios.bundle?platform=ios
But if it's a local ip or not accessible to outside network rather than your development environment, bundle url may cause such issues.

Resources