React Native - Expo Stuck on "Downloading Javascript Bundle 100%" - javascript

For months I've been working on this project and never once came across this issue.
Suddenly expo does not go beyond the splash screen, I've searched multiple forums and none of the suggested solutions worked.
I've tried:
Uninstalling and reinstalling expo (both mobile and PC)
Clearing expo data on mobile
Stopping remote debugging
Clearing yarn cache
Undoing last known changes.
Updating my Expo CLI
I commented everything and prevented navigation away from the startup page, then tried printing only a text output in a View.
I built a new blank expo project which works, but I'd rather not transfer all of my code to a new project, it doesn't seem like a logical fix since the new project would just become the old once everything is moved.
There are no errors in the code, I can deliberately cause a syntax error and it'll display as usual with the error screen on mobile and in the terminal log, once the error is fixed it goes back to not passing the splash screen again.
Update:
I've commented every line in the project and removed comments one by one to see when the problem occurs. Here is what I've found, it occurs:
When I include import { Ionicons } from "#expo/vector-icons"; but it doesn't cause the same issue when the same import is used in another route.
When I include Stylesheet.create({...}) even though Stylesheet works in other routes.
When I include import * as ImagePicker from 'expo-image-picker'; and this works fine when used in other routes also.
There doesn't seem to be a pattern.

Related

Disable red screen and have actual crash in react-native

I need to get rid of the LogBox screen with the red error while I'm developing React Native in development mode. I should reproduce a real crash (that the app will crash and die), because that red screen is not working for my scenario.
There are several solutions I've tried but they don't work:
I can get a real crash in release mode, yes. But I don't want that because I am working on a very specific scenario based on the crash, so I should be reloading and refreshing code too often. For that, I need to be on development mode.
console.reportErrorsAsExceptions = false;
I tried this code as suggested here, but that does not change anything and I'm still having the red screen.
NativeModules.ExceptionsManager = null;
I also tried this one again suggested here. But that line is causing another error:
Unable to put on NativeModules: Operation unsupported
Disabling JS dev mode, disabling refresh or minifying code do not help either.
I am working on only Android. Therefore, I tried creating a native module and wrote some erroneous code at the Java part, and triggered that on a button click. At the simplest way, this one:
#ReactMethod
public void crash()
{
throw null;
}
But these exceptions are still, caught by the red screen and the are not really crashing the app.
So what I basically need is, simulating a real crash while on development mode. Is there any way to force crash the app in development mode? My react-native version is 0.63.3. Since I am working on only Android, a native solution also works for me. Any help is appreciated, thanks!
You can run your app in release mode with: react-native run-android --variant=release
In this way you can have your real app in a 'development environment'.

My react site shows up blank on mobile browsers

I deployed my react site with netlify here https://clusterfy.netlify.app/ I tried it on my computer and it works, but on my phone it doesn’t. So far I’ve tried to change the basename of Browser router to “/React”. added a homepage element in package.json that points to the root of the site. I got rid of %PUBLIC% and replaced it with the link to my site. Here’s the repo for it https://github.com/andrewpaige1/clusterfy-front-end
I was able to solve this by pushing one component at a time. I ended up figuring out it was an issue with the react-sketch library or jsdom. Not sure which one, but I don’t want to find out
This seems to be working on an iPhone with iOS 13.
As a note, your above Git repo link is either private or on a different account.

Required props undefined in chrome 83

So after installing chrome 83 one of my pages in my app crashes. It says some of my props that's required is undefined. This only happens in chrome. I've tested in IE 11, Edge, Firefox and it works fine in those. It doesn't happen all the time either in chrome. Especially if i restart my localhost it might work a couple of times and then it starts breaking. I've also checked sha1d on master branch couple of weeks back and it also breaks there. This was never an issue before and started just recently. There has been no code changes for weeks related to that page. Any ideas what can cause this in chrome?
Based on what you are saying if problem only started happening recently in chrome, and this could be the failure of the prop-types library, its the library responsible for showing such a warning a required prop is undefined.
To make sure that it is indeed the problem of the prop-types library, you can switch environment to production, as this library should not work in prod. If indeed its the problem of this library you could try the following
Maybe try removing react dev tools and see if problem still happens
clean install of the library
update the library

Angular 7: no compile errors, but blank screen

I've been working on an Angular app for a couple months now, and recently I started seeing a condition where the app compiles without errors, but when it reloads in Chrome there's just a blank screen. Also, no errors in the console. When I look at the markup, I can see the tag for my root component, but nothing else renders. I'm fairly certain I should NOT see the tag for the root component, but rather the rendered HTML, right? So it loads index.html, then craps out without any indication of what the issue could be. I have been attempting to move my components out of app.module and into feature modules to clean things up, but when I reverse those changes I still can't get the app to load. I've tried stopping and restarting the live dev server, but still no joy.
I'd post code here, but there's a ton of code in this app, and I don't know where the problem is. Why would Angular refuse to render without any compile or console errors, or any indication of what I can do to fix this?? If anyone has any idea where I can start to look, I'll be happy to post code.
FYI, I'm using Angular CLI 7.2.3, Angular 7.2.2. I'm developing in Visual Studio Code with the latest updates on a Windows 10 machine. I should also say that this has happened a few times during development, but I was always able to figure out what was causing the problem.
As requested, here is my answer. It's a bit embarrassing, given that I've been doing web development for over 20 years, but I forgot that I had disabled some options in the Chrome debugger settings. So Angular WAS sending errors when I got the blank screens, I just couldn't see those errors because I had disabled them. Once I reset the options to the default for Chrome, I was able to see all of the errors causing the page not to render. I realized this when I loaded the app in IE Edge and was able to see the errors in the console. I figured if IE is showing me the errors, I must have disabled them in Chrome.

ionic2 not loading javascript import in UWP app

I have an ionic2 app that works great in the browser however when I try to run it as a UWP app it fails with the following error:
JavaScript runtime error: Uncaught (in promise): Error: Error in :0:0 caused by: 'Oidc' is undefined
I'm using an oidc library in just one class so I went and looked there and I have the following:
import * as Oidc from 'oidc-client';
This seems to work fine when running the app in the browser but it doesn't seem to get picked up when run as an app. I don't know if this is a ionic build issue/ webpack / or most likely just my ignorance since i'm relying on a lot of pieces I don't fully understand.
I fixed this issue by directly referencing the script in my index.html file:
<script src="oidc-client.min.js"></script>
but that really seems like the wrong solution. Can someone point me in the right direction? I want to understand why my import sometimes works.
edit: Also no errors made it back to ionic cli. I had to load this up in Visual Studio to find the problem
I can't say for sure since I'm not familiar with Oidc, but sometimes doing 'import *' or 'export ' can break things when working with ionic 2 or just straight up angular 2. I think it's more of a webpack related issue. We've had weird build issues or stupid 'X is undefined' issues in our development and oftentimes it's been related to using the wildcards (I think technically they're called barrels?). Also, some libraries don't play nicely with ES6 modules, although that might not be your case since it runs fine in the browser. Once though I had a really small use case for jquery in an angular 2 app, and the only way to get it in the app was by sticking a link in the index.html. But my gut tells me your problem is with the import statement.

Categories