BUG REPORT: Empty props obj breaks published app

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. :scream: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 :stuck_out_tongue_winking_eye:future readers may find it helpful.

1 Like

Ok gotcha, thanks for the info Evan!

1 Like

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.