Hi! I just spent the last few hours trying to meticulously figure out why my app was working perfectly well locally, but white screening when published to Expo. (Would be nice if I could enable errors).
Not sure why this is, but I finally figured out what was causing it. One of my component files was defined as follows:
import React from "react";
import { Text } from "react-native";
const MyComponent = ({}) => {
return <Text>noprop</Text>;
};
export default MyComponent;
Rendering this causes absolutely no issues locally, but silently white screens when published.
After a few hours of just guess and check alterations, I figured out that the issue was passing an empty props object. I think this is a perfectly legal way of destructuring an object in ES6. Running let {} = {a:1}; produces no errors for me in the browser console for instance.
Both of the following two solutions solved the issue when published: const MyComponent = (emptyPropsObject) => {
or const MyComponent = ({fakeProp}) => {
You can test how it will run in production be using: exp start --no-dev --minify or with expo-cli.
But to avoid hitting these errors you should be checking the props with: prop-types, or flow
Awesome, thanks for the command Evan, wasnât aware of that one!
I donât use flow and Iâm not really sure how prop-types would solve this issue?
Iâm expecting no props and I passed no props to the component. The issue was declaring the component with props of ({}) which should be perfectly legal JS.
How would you write MyComponent.propTypes = {} in a way that would prevent this ahead of time?
I think you are correct, I thought you meant âreceiving no propsâ is the issue. Iâm not 100% certain where/when strict mode is applied (maybe always?).
Ahh, sorry I was vague. I meant âwhite-screenâ as in it crashes the app (I think this itâs the default err screen after publishing, instead of the red one with err text).
Is there some sort of linting process that happens when you run exp publish? Would be helpful to get an error message in the console saying that a certain syntax you used might break the app.
When you run exp start --no-dev --minify that generates the exact version that you get in prod, sorry itâs kinda vague at the moment. In the new expo-cli there is a clear toggle that makes this more apparent.
Is there some sort of linting process that happens when you run exp publish? Would be helpful to get an error message in the console saying that a certain syntax you used might break the app.
It wouldnât really make sense to add that warning as you would need to run heavy processes each time it reloads. You could use a linter in VSCode.
I also think snack.expo.io might show it, as it has a pretty aggressive linter.
But it seems like you are already aware of all these methods future readers may find it helpful.