Expo client app stuck at "Building JavaScript bundle... 100%"

[rajat1saxena]

Description

I have scanned the QR code and the console says "Finished building JavaScript bundle in X ms", but my app does not load on the Expo client.

Expected Behavior

It should load my app which shows "Hello World"

Observed Behavior

Expo client stuck at loading screen

If there's an error message, please paste the full terminal output and error message in this code block:

Building JavaScript bundle... 100%

Environment

Please run these commands in the project folder and fill in their results:

• npm ls react-native-scripts: react-native-scripts@1.3.1
• npm ls react-native: react-native@0.47.2
• npm ls expo: expo@20.1.2
  `-- UNMET PEER DEPENDENCY react@>=15.3.1
• node -v: v7.10.0
• npm -v: 4.2.0
• yarn --version: not installed
• watchman version: 4.7.0

Also specify:

1. Operating system: Ubuntu 16.04
2. Phone/emulator/simulator & version: Moto G 1st Gen - Android Lollipop

[fabioespinosa]

Any luck with this?

[jswhisperer]

Same no error, just stuck on 100% on iphone andriod and simulator after upgrading

{ "name": "homeowner-mobile-3", "version": "0.1.0", "private": true, "devDependencies": { "husky": "^0.14.3", "jest-expo": "~21.0.0", "lint-staged": "^4.2.1", "react-native-scripts": "1.3.1", "react-test-renderer": "16.0.0-alpha.12" }, "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js", "scripts": { "start": "react-native-scripts start", "eject": "react-native-scripts eject", "android": "react-native-scripts android", "ios": "react-native-scripts ios", "test": "node node_modules/jest/bin/jest.js --watch", "precommit": "lint-staged" }, "jest": { "preset": "jest-expo" }, "lint-staged": { "*.{js,json}": ["prettier --write", "git add"] }, "dependencies": { "axios": "^0.16.2", "babel-plugin-transform-decorators-legacy": "^1.3.4", "babel-preset-es2015": "^6.24.1", "babel-preset-react-native-stage-0": "^1.0.1", "expo": "^21.0.2", "lodash": "^4.17.4", "mobx": "^3.2.2", "mobx-logger": "^0.6.0", "mobx-react": "^4.2.2", "mobx-remotedev": "^0.2.8", "prettier": "^1.7.0", "react": "16.0.0-alpha.12", "react-native": "https://github.com/expo/react-native/archive/sdk-21.0.2.tar.gz", "react-native-communications": "^2.2.1", "react-native-easy-grid": "^0.1.15", "react-native-elements": "^0.16.0", "react-native-masked-text-fork": "git+https://github.com/gregbenner/react-native-masked-text.git", "react-native-modal": "^4.0.0", "react-native-svg-image": "^2.0.0", "react-native-svg-uri": "^1.2.1", "react-navigation": "^1.0.0-beta.13", "styled-components": "^2.1.2" } }

[afridash]

I had same issue yesterday, but in my case, I had used a view component with a style of display:'none' over other components with styles. Once I took that out, and cleared my npm cache, everything was good. Mine worked on android prior to my discovery of the bug though. Good luck.

[jswhisperer]

I think I found my issue, might have been pause on exception in remote debugging tools.

[chandug4u]

@gregbenner I am having the same issue, can you tell me where to change the setting "pause on exception"

[jswhisperer]

When the remote developer tools open, hit cmd-shift-c to open the console.
https://umaar.com/dev-tips/32-pause-on-exception/
Just untick the box if it is ticked. If it isn't then you probably have a different issue, sometimes I find the best is to create a new app with create-react-native-app and copy paste over your files

[fabioespinosa]

Little embarassing to admit, had same issue, and deliberately was instantiating Expo loading screen instead of app.

[anp]

Hi! Please try on a fresh project with the newest CRNA and Expo -- you should get more feedback from the loading screen now. Report back if you're still having issues and we'll reopen.

[phantodev]

I have the same problem... :-( Any news here?

[jonvuri]

@phantoxe I am getting the same issue. CRNA made roughly >10 days ago and suddenly a few days ago started totally freezing on app startup. I just "fixed" it partially by copying the code to a brand new create-react-native-app. I think someone screwed up a patch update somewhere.....

[brs14ku]

Seems like this might need reopened. This is happening very frequently on a CRNA setup on a new macbook this morning.

[brentvatne]

hi there, we can't help anybody without a way to reproduce this. if you are having this issue then you can do everyone a favor by doing whatever you can to understand the cause and posting more information in a new thread. I don't think there is a reason to keep the issue open unless we have a detailed description of the problem and a way to reproduce it, even if only intermittently

[sambragge]

So I have had nothing but problems with Expo. Is there another way to test my app?

[brentvatne]

@sambragge - sorry to hear that. you can use react-native-cli, although I suspect you will also have problems with that too, but worth a try. if you give more information than maybe someone can help. react-native-cli: https://facebook.github.io/react-native/docs/getting-started.html

[scolestock]

I have found that 5-6 refreshes (where "Build JavaScript bundle:..." after a file save works out great) is about the limit - then it will hang. In the iOS simulator, I usually recover by killing the app (in the simulator) and relaunching with CMD-I in the Expo XDE.

[DamnedScholar]

With a CRNA created today (and hosted at exp://45.33.51.230:19000), I am seeing the console report a successful packaging and my Expo app is stuck on 99.88%

[Balasnest]

"Building javascript bundle... 97.88%" got stuck all the time. Tried both on emulator and android device. I could not able to run the app yet.

Did anyone find the solution?

[taverasmisael]

If it's a brand new project, recently created, not edited yet, I don't know what it could be, but if you had edited something this may help (I've only been using RN for three days now 😅) :

Everything was working just fine till I received a NaN from the color I was using as underlayColor for my TouchableHighlight; I come from React web, so I decided to debug the old way, with a console.log and added the L2:

const underlayColor = color('#fff').darken(0.2).rgb().string()
console.log(undarlayColor) // a console.log outside the scope
const InputWithButton = ({
  onPress, buttonText, editable = true, ...props
}) => ...

Doing so, my code gets stuck at 100%; after spending 2 hours trying figure out what was going on, I removed the console.log and everything went back to normal. Then I debugged using react-devtools and fixed the issue.

So if you're getting stuck compiling at 100% maybe a mistake like this related to your Javascript not compatible with React Native philosophy (An unwrapped text, a bad console.log, things like that). Hope it helps :)

[jugutier]

Having this issue today, error in live inspector tab is:

Failed to load http://10.0.1.57.xip.io:8081/index.delta?platform=ios&dev=true&minify=false: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8081' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
(index):188 Uncaught (in promise) TypeError: Failed to fetch

[psyanite]

When I start up my Android Samsung S8+ device over wifi or Genymotion S8 emulator on the same machine to access the expo project using expo xde, in the Chrome console, I see the following errors:

Failed to load http://192.168.1.6:19004/node_modules/expo/AppEntry.delta?platform=android&dev=true&strict=false&minify=false&hot=false&assetPlugin=G:\Projects\bt\ff\node_modules\expo\tools\hashAssetFiles: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:19004' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Uncaught (in promise) TypeError: Failed to fetch

I believe this could potentially be caused by updating sdkVersion from 24.0.0 to 25.0.0. @brentvatne Do you have any idea? Does anyone not have this issue?

I believe it could be related to this issue reported 9 days ago which seems similar to what @jugutier has:
facebook/react-native#17618

I can't debug and see what's happening on Redux 😭

Okay, I think the CORS error that @jugutier and I are experiencing is different to the original issue...

It won't let me downgrade to 24.0.0 😭

[jugutier]

To add some more information, I was running an ejected app when this happened and on iOS 11.2.2. Didn’t get to see this on expo because I had already ejected, but I’m happy to test if that helps. This was reproducible 100% of the times I tried. Even after creating fresh with react-native-init.

…

On Jan 24, 2018, at 7:34 AM, psyanite ***@***.***> wrote: When I start up my device over wifi to access the expo project, in the Chrome console, I see the following errors: Failed to load http://192.168.1.6:19004/node_modules/expo/AppEntry.delta?platform=android&dev=true&strict=false&minify=false&hot=false&assetPlugin=G:\Projects\bt\ff\node_modules\expo\tools\hashAssetFiles: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:19004' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. Uncaught (in promise) TypeError: Failed to fetch I believe this could potentially be caused by updating sdkVersion from 24.0.0 to 25.0.0. @brentvatne Do you have any idea? Does anyone not have this issue? I believe it could be related to this issue reported 9 days ago which seems similar to what @jugutier has: facebook/react-native#17618 I can't debug and see what's happening on Redux 😭 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[imakin]

please do not close this issue, still occured using the latest expo (exp version 49.0.2) and it is freshly new project using (exp init)

[psyanite]

Maybe we can create a new one?

[dale-french]

See here:

expo/expo#1351

[psyanite]

I've also raised this issue here: #545, but not sure if create-react-native-app is supposed to be responsible, I can't downgrade either :(

[itchgaojian]

Reinstalling Expo fixed the issue of "Finished building JavaScript bundle in X ms" for me.

[sokraflex]

I'm not sure if my issue is related, however, sharing my experience with such behaviour might help you:

I've had problems deploying the app to my android phone. Running on an emulator worked fine; however, when starting the app using the Expo android app (over tunnel), the app on my android phone kept stuck at "Building JavaScript... 100%" without launching the actual app. Tried everything, I installed the expo app 2 days ago (so it cant be an old build or anything like that) - on emulator everything was fine, on phone I could not start the app.

However, for me, reinstalling the Expo android app did the trick. Maybe that helps someone else as well :)

[ricorx7]

I will agree. Reinstalling Expo android app fixed the issue for me.

[imakin]

agree but next time we have an update for Expo this might happen again so please take note on which latest version of Expo (exp) works the best

[El-Sam]

I just had the same issue, and I didn't want to reinstall it again, so I figured out that the issue might have something to so with Expo's cache so I headed to Expo's settings on Android and cleared the cache and data and it works now.

[jorgecolonconsulting]

Reinstalling the Expo app in iOS and pressing R in the terminal to restart the packager and clear the cache did the trick.

[thebisma]

samd here

[gevored]

npm install after create a CRNA worked for me

[moparlakci]

If you have a loading state just check if you don't have a bad check..

if (!this.state.isReady || !this.state.isLoading) { return <Expo.AppLoading />; }

My solution was to change the loading check

if (!this.state.isReady || this.state.isLoading) { return <Expo.AppLoading />; }

haha lol :)

[pascalotti]

I solved this Issue by performing the following steps:

1. Open Developer-Tools in Chrome / Firefox (Browser you are using to debug with Expo / iOS simulator)
2. Press CMD + D in your iOS Simulator and Toggle "Remote Debugging" (Even if it is not activated)
3. Switch to your Browsers Console

This solved my problem.

[bkamrani]

Having the same problem, what helped me was going to the Expo menu (e.g., by shaking the phone on iOS), and there chose the "Debug Remote JS" and then going to the Expo menu again, and chose "Stop Remote Debugging".

After doing this cycle once (or maybe twice) the app was loaded. Hope this helps!

The Expo sdk version is 28.0.0 and client version is 2.7.0.1016186.

[jinhale]

On Android emulators, the way to fix these intermittent errors of complete unresponsiveness is to close the app on the Android emulator then start the build process anew. This menu is available on my emulator by clicking on the square icon near the bottom phone frame and this menu is generally on the right.

Simply restarting the emulator will leave you in the same (broken) saved state.

[dspinellis]

I still face this issue. I think it has to do with the build process modifying a file, which triggers a watch, which restarts the build.

[brentvatne]

@dspinellis - hard to say, everyone's machine has their own quirks. maybe you could try turning off any scanners that may be changing files

[icephonix1111]

don't write expo start instead expo start --android or ios

[ThePiyushAggarwal]

I was facing this issue too. I reinstalled expo go on android phone. Restarted my pc. Cleared app data on phone multiple times. don't know what worked.

[babucarr32]

Uninstalling and installing a new version of expo go from play store worked for me.

[carvalhochris]

npx expo start --clear then go from there

[mimo-10]

i had the same issue, i found that by mistake i did import this module "import { transform } from "typescript"", after i comment it out, the problem gone

[da-war]

The problem may come if you add async in the your screen component function.

Just remove the 'async' keyword

For example

const Home=async()=>{ return( <View> <Text>Home</Text> </View> )}

if not then just npx expo start -c/ yarn start -c

It'll work