React-native: iOS main.jsbundle will not create automatically or update without manual react-native bundle

Created on 20 Mar 2018  ·  53Comments  ·  Source: facebook/react-native


React native is not creating a main.jsbundle for ios automatically. One must manually be created, even though the scheme set as release. The code used to create a bundle manually:
react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ios/main.jsbundle --assets-dest ios

Update this exact issue is happening on android now for us as well during our Jenkins build process. We are able to manually bundle using: react-native bundle --entry-file index.js --platform android --dev false --bundle-output android/main.jsbundle --assets-dest android

No errors occur when this is run, and a bundle is created/updated. From this point forward no bundle updates occur. The following is in Bundle React Native code and images:
export NODE_BINARY=node ../node_modules/react-native/scripts/react-native-xcode.sh

Environment


Environment:
OS: macOS High Sierra 10.13.3
Node: 8.9.4
Yarn: 1.3.2
npm: 5.7.1
Watchman: 4.9.0
Xcode: Xcode 9.2 Build version 9C40b
Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed)
react: ^16.3.0-alpha.1 => 16.3.0-alpha.2
react-native: 0.54.2 => 0.54.2

Steps to Reproduce


I have been experiencing this with an existing project. I even created a new react native project, and opened the xcode project. It shows main.jsbundle as a missing file. I modified the project scheme to Release, and from there -> Build. No main.jsbundle was created in the iOS project folder. One can manually be created with the code above without an error message.

Expected Behavior


A new main.jsbundle would update on build when the following is run: build from xcode OR react-native run-ios --configuration Release

Actual Behavior


No main.jsbundle is created/updated

Bug iOS

Most helpful comment

我只想知道为什么明明需要main.jsbundle文件,框架却不自动生成。。。。。

All 53 comments

We still have to manually create our bundle for iOS, Android bundle is working fine.

We had the same issue, the file was checked into the iOS project. We had to remove it & add a new build step Bundle React Native code and images:

export NODE_BINARY=node
../node_modules/react-native/scripts/react-native-xcode.sh

Experiencing the same issue (RN version 0.52.2). Ran into it after removing a package with native dependencies (I just removed Realm). I am still struggling to fix it. react-native-xcode.sh is called properly but the bundle is not created (failing at this line).

Edit:
In my case, my issue was 100% linked to https://github.com/facebook/react-native/issues/17610
I managed to find out by adding an echo command in react-native-xcode.sh to print the bundling command, and I actually saw the error.

I think that this can fail for various reasons BUT it should definitely display the content of the errors on the screen, otherwise we are just lost when this happens... (and people get confused, add completely different resolution steps on bug reports, etc...)

@m-vdb I couldn't realize your workaround. in fact my problem is when I run app on simulator with command react-native run-ios everything works fine but when I try to run the app on real device first I have to create the bundle, because bundle not created automatically and even after creating bundle with command react-native bundle --entry-file='index.js' --bundle-output='./ios/main.jsbundle' --dev=false --platform='ios' --assets-dest='./ios' the static images not shows on ios, although everything works fine in Android devices.

@jsina you must have another problem that prevents the automatic bundling. Try to debug the execution of react-native-xcode.sh to see what is the problem exactly. Maybe you are missing some ios setup with an external library or something like that. Sadly, the same symptom (bundle not created automatically) has a multitude of possible causes.

我只想知道为什么明明需要main.jsbundle文件,框架却不自动生成。。。。。

It is my opinion that this should not be such a widespread issue, and there should be solid documentation to resolving this. I will report back when I have resolved our issue, but currently our CI/CD builds are manually running the bundle script. I've read a bit about some having the wrong path to react-native-xcode.sh, but this has never been the case with our project.

Update - our CI/CD process is now reverting to an old version of the main.jsbundle on android and requires a separate command to create the bundle. We are using react-native bundle --entry-file index.js --platform android --dev false --bundle-output android/main.jsbundle --assets-dest android in this build process to resolve for it at the moment. We will review further and see why bundling has broken on android as well and report back. This may save some folks research time, as it was a bit hidden on our end.

My problem is I've install node with fishshell
I've change the Bundle React Native code and image on Build Phases to:

export NODE_BINARY=$(fish -c 'which node')
../node_modules/react-native/scripts/react-native-xcode.sh

then run react-native bundle --entry-file='index.js' --bundle-output='./ios/main.jsbundle' --dev=false --platform='ios' --assets-dest='./ios'
now actually I have images on real device.

We have the same issue building an android app - building 4 or 5 build types with ./gradlew assembleX where X is dev/int/beta/release etc and often some or all of the builds will have the wrong js bundle (an old one magically reappears from the depths of some cache) or the APK will be e.g. 15MB instead of the usual 40MB (presumably by having no js bundle at all) and just crash on start. I've tried many things starting with running ./gradlew clean before each build and using --reset-cache but nothing seems to help. Even deleting the two build directories, running watchman watch-del-all and deleting everything in /tmp seems to have no effect. It's becoming somewhat infuriating!

It appears the bundler is working correctly, as in the generated js and map files are correct but somehow the APK includes an old bundle (from god knows where) or possible none at all (when we have the APKs that crash instantly).

Build issues like this have now consumed ~100 hours of my life since starting work with RN at the start of the year so I'm dying for a way that will guarantee a 100% fresh build of our dev/int/beta/release builds and for it to be reproducible! If I repeat the build enough times it (usually) eventually works but the fact that it can give completely different output without any code being changed is worrying.

Since 0.56 at least running in dev mode locally seems to have mostly been fixed (just the async storage issue once every 20 or so refreshes) but building APKs remains a big problem (possibly even slightly worse since 0.56 but that's just a gut feeling, I don't have any concrete data).

Just had the APK size issue again where the first build succeeded and the other 3 failed. From diffing the contents of two of the APKs it looks like none of the assets (images) were copied to the failed one. So that's probably a separate issue to the out of date bundle issue...

@m-vdb where do you see the output of react-native-xcode.sh?

Reference:

I managed to find out by adding an echo command in react-native-xcode.sh to print the bundling command, and I actually saw the error.

in the terminal when you build. You can even call the command yourself with the right arguments

Thanks for taking the time to reply. I was building from Xcode and didn't see any of my echo statements in the Xcode console, nor in the terminal that opens for the metro package bundler. Maybe I should have been using react-native run-ios --configuration Release from the terminal and I would have seen the output.

@nickmccally still having the same issue. Using RN 0.57 latest one. I found no main.jsbundle was created so I had to create it manually and after that If any change is made in app.js, it does not reflect in the build unless I create bundle again through the command.

@amirpervaiz086 me too. main.jsbundle didn't create.

how to make main.jsbundle?
I have it node_modules/react-native/scripts/react-native-xcode.sh.

@shinriyo run this command inside project:
react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ios/main.jsbundle --assets-dest ios

Also make sure it is added in copy bundle resources also change this in AppDelegate.m
jsCodeLocation = [[NSBundle mainBundle] URLForResource:@“main” withExtension:@“jsbundle”];

Side note on this issue - I was in the situation where the main.jsbundle wasn't being auto generated on a release build, meaning each time I made a change to my JS I had to re-run the react-native bundle script prior to playing in release (a complete headache to do).

Turns out there is a tick box _"Run script only when installing"_ within Xcode found in '_Build Phases_' > '_Bundle React Native code and images_' section. I have now unticked this.

I must have ticked this to fix some other issue and forgotten about it! But now the main.jsbundle script is getting rebuilt each time I run through Xcode. Win.

In response to @npalethorpe 's solution: Mine was unticked and a bundle was still not being built automatically when the schema was set to Release.

I am on:

  • MacOS Mojave 10.14.1
  • Xcode 10.1
  • React Native 0.56.1

Hi all. We had almost the same problem. We have spend around 5h. And at some point we realize that xCode use old node version. _LOOOL, but excuse me WTF_. Do not ask how and why... I just add $NODE_BINARY -v to ../scripts/react-native-xcode.sh and there was v7.10.0. So we close all apps and just set via nvm normal node version (nvm alias default 10.14.1). Also u may restart your computer. So the problem have gone for now. Maybe this will be useful for someone else :)

I am on:

  • MacOS Mojave 10.14.1
  • Xcode 10.1
  • React Native 0.57.3
  "scripts": {
    ...
    "bundle:ios": "react-native bundle   --entry-file   index.js  --bundle-output ios/bundle/index.jsbundle   --dev  false  --platform ios  --assets-dest  ios",
    "postinstall": "npm run bundle:ios"
  }

change yourself jsbundle file name

in response to @amirpervaiz086 's solution, be sure to restart xcode

@shinriyo run this command inside project:
react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ios/main.jsbundle --assets-dest ios

I'm getting this error.

`Loading dependency graph, done.

App.js: Cannot read property 'bindings' of null

TypeError: Cannot read property 'bindings' of null`

Any workaround for this issue? my "babel-preset-react-native": "^2.1.0. without upgrading??
Xcode 10, React Native: 0.57.0

This works for me and generate the main.jsbundle but when I change something in code, it does not reload.

When I try to enable Debug JS Remotely throw some error

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

Simulator Screen Shot - iPhone 8 - 2019-03-14 at 09 52 08

In my case I was using a different node version for command line.
I had
export PATH="/usr/local/opt/node@8/bin:$PATH"
in my .bash_profile and xcode did not know about this.

using normal node version fixed it for me.

I experienced the same issue but it was due to nvm default version being set to a different version than what is defined in the project folder's .nvmrc file. I would think that this script should honor the version defined in .nvmrc.

It's been a year since this issue had activity. Anything new?

For the last 6 months, our app has been automatically bundling just fine on both platforms. Now suddenly I have to manually create the bundle on both platforms

It's been a year since this issue had activity. Anything new?

For the last 6 months, our app has been automatically bundling just fine on both platforms. Now suddenly I have to manually create the bundle on both platforms

I came across the same issue as well today.. It used to automatically update bundles for me, and it just suddenly doesn't. Have you found a solution?

Facing same issue deleted js.mainbundle from all places i knew of reset cache etc. Still it is somehow using an old version of the js

Hey @VenomApps, here are the solutions that worked for me. First you have to manually create the first bundle file. After that here's what worked for me.

IOS (Add to scripts in package.json file)
"build:ios": "react-native bundle --entry-file='index.js' --bundle-output='./ios/main.jsbundle' --dev=false --platform='ios'"

Android (app/build.gradle file edit project.ext.react to this)

project.ext.react = [
    entryFile: "index.js",
    bundleAssetName: "index.android.bundle",
    bundleInDebug: true,
    bundleInRelease: true
]

Hope it works for you!

I was able to generate the missing main.jsbundle file by running react-native bundle --entry-file='index.js' --bundle-output='./ios/main.jsbundle' --dev=false --platform='ios', but I realized that I had mistakenly tried to double-install node by following the "Installing Dependencies" step of the React Native CLI Quickstart.

When I ran brew install node, per the Quickstart, it broke the existing (non-homebrew) install of node on my computer and all npm commands stopped working. After uninstalling and re-installing node, main.jsbundle is generated automatically again!

$ sudo rm -rf /usr/local/lib/node_modules/npm
$ brew reinstall node

main.jsbundle decided to stop generating during fastlane builds. I updated to Xcode 11.0 last night. I'm unsure if this is the culprit.

I've tried the following:

  • removing any extra node installs that may exist
  • setting the nvm default version to match the project .nvmrc
  • @npalethorpe 's solution

I exactly have the same issue @cspicuzza . Did you found any solution?

@jaumevn My issue turned out to be an error in the babel.config

@jaumevn My issue turned out to be an error in the babel.config

@cspicuzza what was the error? I'm still having the issue and can find anything on Internet...

I've finally made it work by using the solution proposed here https://github.com/facebook/react-native/issues/25522#issuecomment-509036251

So after trying to manually install the main.jsbundle file using react-native bundle --entry-file='index.js' --bundle-output='./ios/main.jsbundle' --dev=false --platform='ios' I would get an error about the scheduler not being found in the haste module map. That led me to believe that the scheduler was the culprit.

React native for some reason was not installing the scheduler, even after removing the node_modules and re-installing. After simply running npm i scheduler it fixed my main.jsbundle.

我只想知道为什么明明需要main.jsbundle文件,框架却不自动生成。。。。。

Google translated to English -

I just want to know why the main.jsbundle file is needed, but the framework is not generated automatically. . . . .

@shinriyo run this command inside project:
react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ios/main.jsbundle --assets-dest ios

It's ingenious. There was an error in my code and due to that my bundle wasn't being generated. Thanks a ton for this!!

After adding main.jsbundle in Resources my app get crashing in real device

Also make sure it is added in copy bundle resources also change this in AppDelegate.m
jsCodeLocation = [[NSBundle mainBundle] URLForResource:@“main” withExtension:@“jsbundle”];

, but adding this is not reflecting changes ...

I am still having this issue. Everything used to work fine, and then I renamed my Xcode project. After doing this, I had to relink the bundle using this command: react-native bundle --entry-file='index.js' --bundle-output='./ios/main.jsbundle' --dev=false --platform='ios'

Ever since running that command, the bundles are no longer automatically updated.

@jbromberg I managed to fix this by adding DEBUG=1 to Build Phases -> Preprocessor Macros -> Debug

Screen Shot 2020-06-18 at 1 38 45 PM

Notice how DEBUG=1 shows up twice? If you double click it, and it's not showing DEBUG=1 in the popover menu then you should add it. Seems to be a glitch of some sort.

Hope this helps!

@almasaeed2010 I have checked and I do not have this bug. I am still having the issue unfortunately. I suppose it may be something related to changing the name of my project. The bundling script may be looking in the wrong directory to create the bundle.

For those still running into issues: you can check the output of the build script in the XCode Report Navigator, all the way at the bottom. For me, when setting up the repository I had renamed the entrypoint from index.js to index.ts, so I could leverage Typescript for my project. As it turns out, the entrypoint is hardcoded and the build script will refuse to run with another entrypoint. Renaming the entrypoint back to index.js solved the issue for me.

TL;DR
If you have renamed your entrypoint to index.ts, change it back to index.js.

For those still running into issues: check your build _CONFIGURATION_, it should not be Debug. _react-native-code.sh_ sets DEV=true only if _CONFIGURATION_ is not Debug.

RN Version : 0.63

https://github.com/facebook/react-native/blob/3c9e5f1470c91ff8a161d8e248cf0a73318b1f40/scripts/react-native-xcode.sh#L33-L55

I generated my own ios/main.jsbundle using react-native bundle as per some of the suggestions in this thread, and for some reason had it listed in Copy bundle resources. Deleting the ios/main.jsbundle file and removing it from Copy bundle resources got react-native-xcode.sh running normally again.

I generated my own ios/main.jsbundle using react-native bundle as per some of the suggestions in this thread, and for some reason had it listed in Copy bundle resources. Deleting the ios/main.jsbundle file and removing it from Copy bundle resources got react-native-xcode.sh running normally again.

@mngyuan - Did you do it in that order? Delete ios/main.jsbundle then remove it from Copy bundle resources? I did the same as you but didn't fix it.

✅ It worked for me.

Open mac settings> network> select your connection> Advanced> Proxies> Automatic Proxy Discoveries (Uncheck).
Captura de Tela 2020-11-30 às 17 20 53

When I run "react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ios/main.jsbundle --assets-dest ios", I can't see this errors
image

Was this page helpful?
0 / 5 - 0 ratings

Related issues

aniss picture aniss  ·  3Comments

lazywei picture lazywei  ·  3Comments

grabbou picture grabbou  ·  3Comments

josev55 picture josev55  ·  3Comments

ghost picture ghost  ·  3Comments