main.jsbundle does not exist. this must be a bug with + echo 'react native

Question

I tried to archive my react native project using Product > Archive on XCode9.2. But Xcode produce this error:

File /Users/louis/Library/Developer/Xcode/DerivedData/Scavenger-evyvzocndqoghkclcbwewolywniz/Build/Products/Release-iphoneos/Scavenger.app/main.jsbundle does not exist. This must be a bug with


My Environment:
  OS: macOS Sierra 10.12.6
  Node: 9.3.0
  npm: 5.5.1
  Watchman: 4.7.0
  Xcode: Xcode 9.2 Build version 9C40b
  Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed)
  react: ^16.0.0 => 16.2.0
  react-native: ^0.50.3 => 0.50.4

I also tried to run on terminal
react-native bundle --entry-file='index.ios.js' --bundle-output='./ios/Scavenger/main.jsbundle' --dev=false --platform='ios' --assets-dest='./ios'but ended up with error Loading dependency graph... Unexpected end of JSON input

XCode error.

Answer 1

In my case, it started happening in an old app after I installed a new version of Node (18). Switching to Node 16 before creating a build solved the issue.

Answer 2

For those who switched from a bare-workflow, to a managed workflow, ensure you register your appplication with registerComponent. expo-register-component

Answer 3

If you are using Typescript then leave your project level index.js as it is without changing it to index.ts.

This solved the release build issues with me. Check this reference in here react-native docs

Answer 4

I have an entry file called index.tsx. So in my case, I had to update the Bundle React Native code and images script by adding a line:

export ENTRY_FILE=index.tsx

This fixed the issue for me

Answer 5

In new version of React Native, maybe need to remove react-native-cli in global. So you should use this command:

    npx react-native bundle --entry-file='index.js' --bundle-output='./ios/main.jsbundle' --dev=false --platform='ios'

Answer 6

I have react-native 0.69.6, node v14.21.3, xcode 14.3 and M1 Chip Mac.

First i created this clean.js script and added it to scripts folder to be able to clean the code.

const exec = require('shell-utils').exec
const path = require('os').tmpdir()

run()

function run() {
  exec.killPort(8081)
  exec.execSync(`watchman watch-del-all || true`)
  exec.execSync(
    `rm -rf ios/build && (killall Xcode || true) && cd ios && xcrun -k && xcodebuild -alltargets clean && cd ..`
  )
  exec.execSync(`rm -rf node_modules`)
  exec.execSync(`rm -rf ~/.rncache`)
  exec.execSync(`rm -rf "$(getconf DARWIN_USER_CACHE_DIR)/org.llvm.clang/ModuleCache"`)
  exec.execSync(`rm -rf "$(getconf DARWIN_USER_CACHE_DIR)/org.llvm.clang.$(whoami)/ModuleCache"`)
  exec.execSync(`rm -rf ~/Library/Developer/Xcode/DerivedData/`)
  exec.execSync(`rm -fr ~/Library/Caches/com.apple.dt.Xcode/`)
  exec.execSync(`rm -rf ios/DerivedData/*`)
  exec.execSync(`rm -rf ios/Pods`)
  exec.execSync(`rm -rf ios/build`)
  exec.execSync(`rm -rf android/build`)
  exec.execSync(`rm -rf lib/android/build`)
  exec.execSync(`rm -rf android/app/build`)
  exec.execSync(`rm -rf lib/android/app/build`)
  exec.execSync(`rm -rf ${path}/react-native-packager-cache-*`)
  exec.execSync(`rm -rf ${path}/metro-*`)
  exec.execSync(`rm -rf ${path}/react-*`)
  exec.execSync(`rm -rf ${path}/haste-*`)
  exec.execSync(`npm i`)
}

I added this code to package.json into scripts

"clean": "node ./scripts/clean",

I run this script via npm run clean

then cd ios/ and pod install

After this clean up I restarted my computer and resolved this issue.

Answer 7

This issue take me some days to fix. I got this issue when running the build on travis-ci. Here is my fix:

Add this line to scripts in your package.json file.

"build:ios": "react-native bundle --entry-file='index.js' --bundle-output='./ios/main.jsbundle' --dev=false --platform='ios'"

Now you can run the command to generate main.jsbundle. yarn build:ios or npm run build:ios

Open the Xcode > Select project target > add main.jsbundle to Copy Bundle Resource in Build Phases. (image below).

Answer 8

I have react-native 0.65.3, node v18.15.0 and xcode 14.3. Doing the below seems to solve it for me:

1. Adding "build:ios": "react-native bundle --entry-file='index.js' --bundle-output='./ios/main.jsbundle' --dev=false --platform='ios'" under "scripts" in package.json file
2. Run this export NODE_OPTIONS=--openssl-legacy-provider in terminal before building app

Hope this helps someone with similar env.

Answer 9

try this, go to Xcode and click on the expansion of the target like below image.

see this image

Answer 10

This is completely stupid, but it happened to me, so I will mention it in case it happens to someone else:

This error occurred on Product > Archive because of a missing dependency. Changes to package.json were not pushed with the code using the newly added dependency. x)

True story. (facepalm)

Another instance: import from a JavaScript file that wasn't pushed.

Answer 11

Please Make sure you are using same node version in project and xcode

For me i had installed 2 different nodejs versions. when delete one nodejs it was working fine

Answer 12

PFB the command I ran, which resolves the issue.

1. npm i
2. cd ios
3. pod install

Answer 13

You can just run:

react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ios/main.jsbundle --assets-dest ios

Answer 14

If properties of config file are changing at run time then make sure there is no error in that as well, if property is not set properly then main.bundlejs would not be generated.

For Example :

isSent:false, 
isShow:false

this two properties were setting at run time and found that for a particular record isSent and isShow were not set which made it

isSent:,
isShow:

at run time and caused error.

Answer 15

I was facing this issue after I ejected from the expo to add in-app purchases. I did the following to get it to work

cd <your repo>
npx react-native bundle --entry-file ./index.js --dev false --reset-cache --platform ios --bundle-output ios/main.jsbundle --assets-dest ./ios

After the above commands are run you have to drag and drop the main.jsbundle and the assets into your Xcode and link it by reference and not group

Answer 16

if you update the xcode and get this error then solution is

in terminal of your root project fire following commands

 1. sudo xcode-select --reset

 2. npx react-native bundle --entry-file ./index.js --platform ios --bundle-output ios/main.jsbundle

during second command if you found any error relative to JS then fix it After successfully running second command this error will be gone

Answer 17

For some people like me this is simply an indication of an error in the JavaScript code. I discovered this to be the case after entering the following command: npx react-native bundle --entry-file index.js --bundle-output "bundle.bundle". Android users would need to specify the platform like so: npx react-native bundle --entry-file --platform "ios" index.js --bundle-output "bundle.bundle".

The bundle failed and the syntax error was shown. Any attempt to open the offending code in a simulator would show the error too.

Answer 18

You need to run the following command:

react-native bundle --entry-file ./index.js --platform ios --bundle-output ios/main.jsbundle

After that, the app with the static bundle is installed on the real device. But because the nature of the static file, whenever I modify the source code, I need to run that command again to reflect the changes. (You can see next error in command)

Answer 19

In my case this was caused by a space character in my project path: /users/USER/Projects/Project HousePlants/

That space in Project Houseplants the bundle can not handle and therefore can not find your main.jsbundle

Make sure that you have no whitespace characters in your path and try again.

See this answer

Answer 20

This commnad works for me.

react-native bundle --entry-file ./index.ios.js --platform ios --bundle-output ios/main.jsbundle

Answer 21

In my case, it was caused by the javascript code. The error showed at the Metro Bundler(Command Line). Check the Metro Bundler, Does it have an Error or not.

Answer 22

Recommend to use the latest Xcode and React Native versions. My React Native Version: 0.56 and Xcode 10

Step 1: Change AppDelegate.m file

    //  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#ifdef DEBUG
  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#else
  jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif

Step 2: Change Xcode Build Configuration to "Release"

Goto Products> Scheme> Edit Scheme> change Debug to release

if you are using Xcode 10+ please change Build system to Legacy Build System under File> ProjectWorkSpace Settings> Build System

Step 3: Upgrade your "babel-preset-react-native" to 5.0.1, if it does not exist in your package.json file please add it.

Remove NodeModules and package.lock file and add it (npm install or yarn install).

Step 4: Change ".babelrc.js" file

Add " presets: ["module:metro-react-native-babel-preset"]

Step 5: Open Terminal

Open the terminal and navigate to your project directory run this command

"react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ios/main.jsbundle --assets-dest ios/assets"

this will generate a "main.jsbundle" file in iOS folder

Step 6: Add "main.jsbundle" file into Xcode.

Open Xcode and navigate to "Build Phase" under "Copy Bundle Resource" add "main.jsbundle" file.

Clean your project also clear your derived data in Xcode. This will build your project in Release mode.

For "Archive" error

Add this dependency into your "pod file"

pod 'React', :path => '../node_modules/react-native', :subspecs => [
    'CxxBridge'
  ]
pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'
pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'

Remove pod and pod.lock and add again. (pod install)

Happy Coding :)

Answer 23

Simply cleaning the project in Xcode helped me

Answer 24

In my case I got this error at archive after updating from RN 0.53.3 to 0.55.4

/Users/<myuser>/Desktop/projects/<myProjectName>mobileapp/index.ios.js: Plugin 0 specified in "/Users/<myUserName>/Desktop/projects/<myProjectName>mobileapp/node_modules/babel-preset-react-native/index.js" provided an invalid property of "default" (While processing preset: "/Users/<myUserName>/Desktop/projects/<myProjectName>mobileapp/node_modules/babel-preset-react-native/index.js")

+ [[ false != true ]]
+ [[ ! -f /Users/<myUserName>/Library/Developer/Xcode/DerivedData/<myProjectName>Mobile-ghzbbftkebcwlvayfocqahvzifbe/Build/Intermediates.noindex/ArchiveIntermediates/<myProjectName>Mobile/BuildProductsPath/Release-iphoneos/<myProjectName>Mobile.app/main.jsbundle ]]
+ echo 'error: File /Users/<myUserName>/Library/Developer/Xcode/DerivedData/<myProjectName>Mobile-ghzbbftkebcwlvayfocqahvzifbe/Build/Intermediates.noindex/ArchiveIntermediates/<myProjectName>Mobile/BuildProductsPath/Release-iphoneos/<myProjectName>Mobile.app/main.jsbundle does not exist. This must be a bug with'
error: File /Users/<myUserName>/Library/Developer/Xcode/DerivedData/<myProjectName>Mobile-ghzbbftkebcwlvayfocqahvzifbe/Build/Intermediates.noindex/ArchiveIntermediates/<myProjectName>Mobile/BuildProductsPath/Release-iphoneos/<myProjectName>Mobile.app/main.jsbundle does not exist. This must be a bug with
+ echo 'React Native, please report it here: https://github.com/facebook/react-native/issues'
React Native, please report it here: https://github.com/facebook/react-native/issues
+ exit 2

A big importance to fix this had the line above the error related to babel-preset-react-native

After many hours of trying several workarounds I found a solution by downgrading babel-preset-react-native from ^5.0.2 to ^4.0.0 to make the archive process work.

Answer 25

This happens when there is no offline bundle file in your project, I had the same problem and this worked for me.

I have added the below line to my package.json file, under scripts section, so I don't have to type it every time I want to generate an offline bundle.

"build:ios": "react-native bundle --entry-file='index.ios.js' --bundle-output='./ios/YourAppName/main.jsbundle' --dev=false --platform='ios' --assets-dest='./ios'"

And then run this command in your application projects folder:

npm run build:ios

After running the above command, new main.jsbundle will be generated in your ios/YourAppName directory.

Next, open your project using XCode, right click on your project name then click Add Files to "YourProjectName", choose the main.jsbundle file that was generated, and then build again.

Now it might be working well.

I am using:

 "react": "16.0.0-alpha.12",
 "react-native": "^0.48.3",

Answer 26

Problem solved after I rewrite shell script. Project > Build Phases > Bundle React Native code and images. There was blank space character in the script.

Answer 27

Comment this line in AppDelegate.m

 jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil]; 

Use this line:-

jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"]; 

After that run this to make jsbundle:-

 react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ios/main.jsbundle --assets-dest ios

Run after this command in xcode . Hope it will make bundle and there is no such error after that ... Thanx