Expo start yields blank screen in browser

cdcv commented 5 years ago

Description

Command: expo start Result: brings up browser at http://localhost:19002/ with black screen only

Expected Behavior

expo start -> expo UI screen appears on localhost in browser (the screen that you get when you press 'd' for devtools, and that normally comes up automatically, and shows the bundler, QR code, settings, etc).

Observed Behavior

Black screen appeared. No error msg. No console log in browser. Clearly expo is still working, because if I hit 'w' in the terminal, I still get the app to appear correctly in a browser, and I can still open the app using the mobile expo client on a device (using the local server url, eg exp://192.168.0.109:19000). Many hours get spent uninstalling and reinstalling things.

Examples of things that don't solve the problem: Running in different 'clean' browser. expo start -c, expo start --web. uninstall reinstall expo-cli, node, npm, change node version. Things had previously been working fine, and there were no obvious intentional changes made to anything... it just stopped working all of a sudden. Same app. Same install. Same machine. Etc. As I mentioned, expo is clearly still running, and serving the app, it just isn't showing up in the web browser. Some kind of cache somewhere?

Error message: inky blackness that makes you feel deep inside that your project is dying at the hands of Expo tools

Here is the web page that's rendered where the 'normal' page, which doesn't really have a title, but says Metro Bundler in the top left, is supposed to be rendered:

Expo Developer Tools

Environment

Please run expo diagnostics in the project folder and copy the output here: Expo CLI 2.21.2 environment info: System: OS: macOS 10.14.1 Shell: Unknown - /usr/local/bin/fish Binaries: Node: 11.4.0 - /usr/local/bin/node npm: 6.4.1 - /usr/local/bin/npm IDEs: Android Studio: 3.2 AI-181.5540.7.32.5056338 Xcode: 10.1/10B61 - /usr/bin/xcodebuild npmPackages: @storybook/react-native: ^5.1.3 => 5.1.3 @types/react: ^16.8.23 => 16.8.23 @types/react-native: ^0.60.0 => 0.60.0 expo: ^33.0.0 => 33.0.5 react: 16.8.3 => 16.8.3 react-native: https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz => 0.59.8 react-navigation: ^3.0.9 => 3.9.1 npmGlobalPackages: expo-cli: 2.21.2

Also specify: None relevant, but code running correctly on Pixel 3XL during this problem.

Reproducible Demo

Close your eyes and imagine that you will never see light ever again.

hodgef commented 5 years ago

I initially thought there was something wrong with Chrome, but now I see that other people are having the same issue.

Hope it gets fixed soon!

Expo CLI 2.21.2 environment info:
    System:
      OS: Windows 10
    Binaries:
      Yarn: 1.13.0 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
      npm: 6.9.0 - C:\Program Files\nodejs\npm.CMD

AdamJNavarro commented 5 years ago

Hey all,

Can you try updating to the latest version of expo cli (At the time of this post that would be 3.0.4). I've been unable to reproduce this on either 3.0.3 or 3.0.4.

Cheers, Adam

Saganic commented 5 years ago

Hey all,

Can you try updating to the latest version of expo cli (At the time of this post that would be 3.0.4). I've been unable to reproduce this on either 3.0.3 or 3.0.4.

Cheers, Adam

Reporting the same issue. I can't upgrade until the team at vue-native upgrade to expo 3.0.3 or 3.0.4 - is there are work around for older versions of expo? (2.21.2)

hodgef commented 5 years ago

I can confirm that this is fixed in expo cli 3.0.4. Thanks expo team for the quick fix !

mikasjoman commented 5 years ago

upgrading to 3.0.4 fixed it :)

flieks commented 5 years ago

i have CLI 3.0.10 and also have the problem (chrome). Restarted pc which didn't help. running via CLI (to send to phone) still works but screen is black

ParAnton commented 5 years ago

I have cli 3.0.10 and get the same behaviour as @flieks
running expo sdk 34

ericwestbrook commented 5 years ago

upgrading fixed for me as well. thanks!

ParAnton commented 5 years ago

strange when I start expo as an npm script $ npm run start which triggers "start": "expo start", I get a blackscreen in my browser but running $ npm expo start everything works fine

elektronik2k5 commented 5 years ago

@ParAnton perhaps you have expo-cli as a dependency. npm scripts run locally installed dependencies first, if they are installed, and otherwise fallback to global packages.

JackDavidson commented 5 years ago

I'm getting this issue on and off with expo-cli 3.1.1

The expo developer tools page shows up correctly about 1/10th of the times I run 'npm start' but 9/10 times, I get the black screen. I'm on a clean install of ubuntu 19.04, with a clean download of node from https://nodejs.org/dist/v10.16.3/node-v10.16.3-linux-x64.tar.xz, and I just ran expo init to create a new app, so its a fresh react native project too. I can still run the project on my phone by just pressing 'a' or on web with 'w' (after following the workaround at https://github.com/expo/expo/issues/5727).

arrygoo commented 5 years ago

The issue is back in 3.1.2

danielcolgan commented 5 years ago

@arrygoo I run expo login and after re-login started expo process with expo start and everything worked!

EvanBacon commented 5 years ago

Closing as duplicate of this https://github.com/expo/expo-cli/issues/739

Innovativeappz commented 5 years ago

i uninstall node 12.12.0 & install 10.13.0 version. now no black screen appear & app run on my physical android device.

adir1661 commented 4 years ago

@AdamJNavarro my expo version is: >expo --version 3.15.5 and i still have a black screen in my browser (chrome, firefox) I also tried downgrading expo cli to 3.0.4 and it didnt work. also tried to upgrade node and npm.

sanaiftikhar commented 4 years ago

Same issue how to resolve ???

Expo CLI 3.11.9 environment info: System: OS: Windows 10 Binaries: Yarn: 1.21.0 - ~\AppData\Roaming\npm\yarn.CMD npm: 6.13.4 - C:\Program Files\nodejs\npm.CMD

destinybonavita commented 4 years ago

I'm running into the same issue. I think this should be reopened

mikescott commented 4 years ago

Also getting this in Expo 3.21.9. Everything has been working fine for days, with no changes, then suddenly a new project will only display a black screen in the browser.

keypuncherlabs commented 4 years ago

I just updated to version 37 of the SDK and I'm getting the same screen "Error loading DevTools" is all that appears in the browser.

brentvatne commented 4 years ago

@star-scraper can you open up chrome dev tools and show us the logs that you see?

keypuncherlabs commented 4 years ago

Nvm @brentvatne I just re-installed the expo-cli again and that fixed it, sorry for the confusion, but I appreciate the help ;)

diegolaciar commented 4 years ago

+1

just upgrade from expo 37 to expo 38.

I get the same black screen with message "Error loading DevTools" No error on the terminal. I removed node_modules, re-installed all and the same issue.

expo-cli@3.22.0

brentvatne commented 4 years ago

@diegolaciar - can you open up chrome dev tools and show us the logs that you see? after that, can you try closing it and clearing the chrome cache, then reopening?

alexborton commented 4 years ago

@brentvatne I also have this problem as described by @diegolaciar.

Only occurs when running in Expo 38 - the app itself seems to run correctly. No logs in the console for Expo Developer Tools- just the display of onscreen message Error loading DevTools

The debug from the application could shed some light;

DevTools failed to load SourceMap: Could not load content for http://localhost:19001/debugger-ui/debuggerWorker.cff11639.js.map: HTTP error: status code 500, net::ERR_HTTP_RESPONSE_CODE_FAILURE

This displays immediately as a warning.

diegolaciar commented 4 years ago

@brentvatne

Yes, as @alexborton say, there is no logs on the devtool console

brentvatne commented 4 years ago

if you npm uninstall -g expo-cli and then npm i -g expo-cli does that fix it?
if you clear your cache in chrome, does that fix it?

dominik992 commented 4 years ago

Same problem. If I run with expo start -c I get "Error loading DevTools" error. However if I remove -c flag, it works

JorgeOsorio97 commented 4 years ago

Same issue with expo-cli 3.23.3 Node 12.18.3

raniyer commented 4 years ago

I had the same issue with expo-cli 3.23.3 node-14.7.0 browser firefox. But reinstalling node fixed it for me. I also logged out of expo. (I don't know if that helped)

defrex commented 4 years ago

I'm also experiencing this issue. I've noticed something interesting. Here is my graphql websocket log.

{"type":"connection_init","payload":{"clientAuthenticationToken":"[secret, probably]"}}
{"id":"1","type":"start","payload":{"variables":{},"extensions":{},"operationName":"IndexPageQuery","query":"query IndexPageQuery {\n  currentProject {\n    id\n    manifestUrl\n    settings {\n      hostType\n      dev\n      minify\n      __typename\n    }\n    config {\n      name\n      description\n      slug\n      githubUrl\n      __typename\n    }\n    sources {\n      id\n      name\n      messages {\n        count\n        unreadCount\n        nodes {\n          ...MessageFragment\n          __typename\n        }\n        pageInfo {\n          lastReadCursor\n          __typename\n        }\n        __typename\n      }\n      __typename\n    }\n    messages {\n      pageInfo {\n        lastCursor\n        __typename\n      }\n      __typename\n    }\n    __typename\n  }\n  userSettings {\n    id\n    sendTo\n    __typename\n  }\n  projectManagerLayout {\n    id\n    selected {\n      id\n      __typename\n    }\n    sources {\n      id\n      __typename\n    }\n    __typename\n  }\n  processInfo {\n    isAndroidSimulatorSupported\n    isIosSimulatorSupported\n    webAppUrl\n    __typename\n  }\n  user {\n    username\n    __typename\n  }\n}\n\nfragment MessageFragment on Message {\n  id\n  msg\n  time\n  level\n  ... on DeviceMessage {\n    includesStack\n    __typename\n  }\n  __typename\n}\n"}}
{"type":"connection_ack"}
{"type":"error","id":"1","payload":{"message":"Cannot use GraphQLSchema \"[object GraphQLSchema]\" from another module or realm.\n\nEnsure that there is only one instance of \"graphql\" in the node_modules\ndirectory. If different versions of \"graphql\" are the dependencies of other\nrelied on modules, use \"resolutions\" to ensure only one version is installed.\n\nhttps://yarnpkg.com/en/docs/selective-version-resolutions\n\nDuplicate \"graphql\" modules cannot be used at the same time since different\nversions may have different capabilities and behavior. The data from one\nversion used in the function from another could produce confusing and\nspurious results."}}
{"id":"1","type":"stop"}

Notice the error,

Cannot use GraphQLSchema "[object GraphQLSchema]" from another module or realm.

Ensure that there is only one instance of "graphql" in the node_modules
directory. If different versions of "graphql" are the dependencies of other
relied on modules, use "resolutions" to ensure only one version is installed.

https://yarnpkg.com/en/docs/selective-version-resolutions

Duplicate "graphql" modules cannot be used at the same time since different
versions may have different capabilities and behavior. The data from one
version used in the function from another could produce confusing and
spurious results.

I'm using Apollo Client in my app, and thus have the graphql package installed. Is it possible that there is a version incompatibility between my dep and a downstream version used by Expo Dev Tools?

kgorol commented 4 years ago

After the upgrade from Expo 37 to 38 when I run command "npm start" ("start": "expo start") I receive black page with Error loading DevTools message, along with these console logs:

TypeError: can't access property "sources", e is undefined
    NextJS 20
commons.bcfc4fb2e85568d289cc.js:1:163814
TypeError: can't access property "sources", e is undefined
    NextJS 20
commons.bcfc4fb2e85568d289cc.js:1:163814
TypeError: can't access property "sources", e is undefined
    NextJS 20

However, when I run directly `expo start' it works just fine.

actuallymentor commented 4 years ago

To everyone with this issue, I'm not sure which of this fixes anything but try:

Update expo and expo-cli

Run this:

# Tool specific caches
npm cache clean --force || echo "No npm binary found, skipped"
watchman watch-del-all || echo "No watchman binary found, skipped"
jest --clearCache || echo "No jest binary found, skipped"

# Cache directories
rm -rf .expo && echo "Expo cache cleared"
rm -fr $TMPDIR/metro* && echo "Metro cache cleared"

# Dependency reset
rm package-lock.json
rm -rf node_modules
npm i

If your expo preview app is on android: go to the app info ( long press > app info ) force close it and clear cache
Try again

alexborton commented 4 years ago

As an FYI, i found that yarn install would start Expo as expected, whereas (my usual) npm install would fail to run the dev screen in chrome.

I tried all the usual cache clearing, to no avail. I suppose i will be switching to yarn to use Expo 38.0.0 🤷‍♂️

I do unfortunately still have an issue with the DevTools actually running, but that is more as described here.

qwrwed commented 4 years ago

I have the same issue in Firefox 81.0.1. In the console I get the error Firefox can't establish a connection to the server at ws://localhost:19002/1etrArriHP_UwbjDTnHhqbCSmh0GDygAZ_-erKkEDFw/graphql., along with GET requests to the same address with status 400 Bad Request. For some reason, it works in a Private Window and in Google Chrome, but not in a normal Firefox window, even in Safe Mode.

brentvatne commented 4 years ago

hello! this could be related to browser caching. try clearing your browser cache

qwrwed commented 4 years ago

It still happens with cache cleared.

EDIT: I managed to fix my issue by creating a new profile and copying my entire old profile into it.

ghost commented 4 years ago

For me, logout and then login worked.

ghost commented 4 years ago

For me, logout and then login worked.

Well, today this approach does not work.

brentvatne commented 4 years ago

to people experiencing this: do you have expo-cli installed as a dependency of your local project?

defrex commented 4 years ago

@brentvatne yes. I generally avoid global dependencies of any kind.

defrex commented 4 years ago

I can confirm that switching to a globally installed expo-cli (and deleting the local install) fixed the issue for me. 🎉

defrex commented 4 years ago

That said, a global install isn't optimal.

We like to make sure key commands, like starting expo, are in scripts in package.json for discoverability, and also that things in scripts don't require global installs for easy setup.

But perhaps now that the source of the problem is known it'll be easier to fix.

EvanBacon commented 3 years ago

We're working on making expo-cli have more versioned aspects to it, but unfortunately it's a very big project is it's taking a while.

EwenQuim commented 3 years ago

Same problem with expo (3.28.6 and 4.0.1 tested) installed globally or locally with yarn or npm (tried everything uh).

It's very frustrating because there is no error message, just a black screen instead of the usual DevTools, and it worked yesterday until I tried to upgrade my expo version. Expo is still running because the web version works, but the android/ios app can't be used as well as the dev tools.

EDIT: It seems like random usual actions (rebooting, reinstalling the lib) are sufficient to solve the problem

hajeklu commented 3 years ago

Same problem.. Firefox 84.0. Ubuntu 20.04 LTS expo": "~40.0.0", "expo-status-bar": "~1.0.3", "react": "16.13.1", "react-dom": "16.13.1", "react-native-web": "~0.13.12"

wfparrish commented 3 years ago

The solution for me was to NOT ctrl-click the link in the terminal. Just copy the address: http://localhost:19002 Then paste it into the browser. Worked like magic!

amoat7 commented 3 years ago

still having this blank page issue. Done fresh installs still doesn't work.

EDIT: working now. run the link on chrome instead of safari

igormcsouza commented 3 years ago

The solution for me was to NOT ctrl-click the link in the terminal. Just copy the address: http://localhost:19002 Then paste it into the browser. Worked like magic!

Holly!! That worked Pretty Well! Thanks!! :D

I understand is a workaround! The right-clicking should be working tho!

SirMishaa commented 3 years ago

The solution for me was to NOT ctrl-click the link in the terminal. Just copy the address: http://localhost:19002 Then paste it into the browser. Worked like magic!

This is working too for me. Thanks !

expo / expo-cli