React Native Bug Squasher | UMaine New Media

🐞 Unexpected token

This is usually a delimiter (punctuation mark) out of place.

Check to ensure there is an opening and closing version for each (...) [...] {...} in your code.
Look for missing commas in your objects, including styles.
Click Prettier and check for correct indenting. Every function definition should start with a { and end with a } at the same horizontal distance from the left edge. Functions at the "root" level should have their delimiters all the way to the left. ⚠️ If you make a significant error, it may prevent Prettier from working, but you can still check the indenting by hand.
Make sure you haven't mixed up a colon (:) for a semicolon (;). For example, the end of every function definition may have a semicolon after the final }.
If the error message flags the last line of your code, it's still very possible the missing delimiter occurred earlier and the computer only realized it was missing when it reached the end.

🐞 Constructor requires new...

That usually means you didn't import a needed component, custom or default.

Check your import statement/s at top. StyleSheet is a common component to forget.

🐞 Maximum update depth exceeded

This can happen when a component is stuck refreshing the screen endlessly.

Go to the component that triggers this error when loaded, then comment out the entire contents of return. Add bits back one at a time until you identify the code that's generating the infinite loop.

🐞 Module not definedor Unable to resolve module or Expected component but found object

This usually means you forgot to define or export a component. Or you might not have used the exact same name--with identical capitalization and spelling--for the component in its various occurrences. (Watch out for plurals inside camelCase words, eg petScreen versus petsScreen.) Check your naming consistency in:

The function definition (const WelcomeScreen = () => {...})
The export statement (export default WelcomeScreen)
The component's file name (WelcomeScreen.js)
Any import statements (import WelcomeScreen from "./WelcomeScreen")
Your navigation stack (component={ WelcomeScreen }).

🐞 Minified error #...

A "minified" error is too long to fit in the phone screen, but includes a URL you can load in a separate browser window. The component that threw the error is often listed at the end (eg, Input[]).

Copy and paste the associated URL (https://reactjs.org/docs/error-decoder.html/?....) into a browser to see an "error decoder" page, or search for the error number in Google.
See the specific examples (#130, #152, etc.) listed in this document.

🐞 Minified React error #31

The URL for this minified error (https://reactjs.org/docs/error-decoder.html?invariant=31....) leads to an error page that says Objects are not valid as a React child. This can sometimes mean you tried passing the wrong kind of attribute to a child component. For example, you can't pass an object or an attribute directly inside JSX tags.

If you meant to render a collection of children, use an array instead
If you meant to pass an attribute like petName, pass props instead, adding a prefix where necessary (eg, props.petName).

🐞 Minified React error #130

The URL for this minified error (https://reactjs.org/docs/error-decoder.html?invariant=130....) leads to an error page that says Element type is invalid: expected a string ... or a class/function ... but got: object.. This is usually the same problem as Module not defined.

🐞 Minified React error #152 (missing content)

The URL for this minified error (https://reactjs.org/docs/error-decoder.html/?invariant=152...) leads an error page that says Nothing was returned from render.

Add a missing return statement around your JSX, eg:


const Card = () => {
	return (
    	<View>
      		<Text>
				...
	)
}

If you really want to return nothing, return null.


const EmptyCard = () => {
	return null
}

🐞 Minified React error #301

The URL for this minified error (https://reactjs.org/docs/error-decoder.html/?invariant=301...) leads to an error page that says Too many re-renders. This error means React is stopping you from creating an infinite loop by re-rendering a condition over and over.

Change a state variable from being always true to being conditionally true.


const [ isLoggedIn, setIsLoggedIn ] = useState(false) ; // This sets an initial state.
// This is always true and will re-render the screen endlessly.
setIsLoggedIn( true ); ❌
// This only re-renders once the user has logged in.
if ( password === "girlboss" ) { setIsLoggedIn( true ) } ; ✅

🐞 Invariant Violation: Text strings must be rendered within a <Text> component

Although this error doesn't always come with a line number, the problem is likely inside a return(...) statement.

Remove JavaScript punctuation inside JSX, eg:


// Bad.
return(
	...
;)
// Good.
return(
	...
);

Remove a JavaScript expression inside JSX that resolves to a string, eg


<View>{ "I'm not supposed to be here!" }</View>

Use a ternary (?) instead of an AND (&&) conditional.


age > 18 && <AdultContent /> ❌
age > 18 ? <AdultContent /> : null ✅

🐞 Your app hangs and you can't click on anything

You could be triggering too many refreshes with useEffect

Use the technique shown in this tutorial to prevent endless updates by adding a second parameter with an empty array to useEffect.

🐞 Adjacent JSX elements must be wrapped in an enclosing tag

This message means you've returned two "sibling" tags instead of a parent to contain them. This error will be at the highest level of one of your return statements.

Wrap your siblings in an arbitrary tag, usually a <View>.
Wrap your siblings in a special JSX fragment <>...</>
Watch out for siblings hiding in the syntax of a ternary conditional. Only tags count, so isLoggedIn below is not a true parent.


// This will fail ❌
{ !isLoggedIn?
	(
		<LoginForm />
	) : (
		<Text> Welcome to My Pet Finder app</Text>
		<SubmitButton whenPressed={() => navigation.navigate('Pets')}>
			See Your pets
		</SubmitButton> 
	)
}
// This will succeed ✅
{ !isLoggedIn?
	(
		<LoginForm />
	) : (
		<View>
			<Text> Welcome to My Pet Finder app</Text>
			<SubmitButton whenPressed={() => navigation.navigate('Pets')}>
				See Your pets
			</SubmitButton> 
		</View>
	)
}

🐞 Component contents aren't appearing

(eg, for a Card):

Check that you remembered to pass your props to your component.
Check for inconsistencies in your property names between the parent and child components, eg


<Card petType = "Bulldog" />
...
const Card = props => {
	return (
		<Text>{ props.petBreed }</Text> ☹️
	)
}

🐞 package.json Failed to resolve dependency ...

This can be a problem with the configuration code you are supposed to import at the top of your file.

Make sure App.js or other relevant components include the dependence (eg, import firebase from "firebase"), and that you have clicked Add the Dependency when prompted (for a Snack).
Also remember that the Expo platform may not have caught up with the latest version of your library. For example, for Firebase to be compatible with Expo Snacks as of spring 2023, change "firebase": "*" to "firebase": "8.0.0" in package.json, eg from this:


{
  "dependencies": {
    "firebase": "*",
    ...
  }
}

to this:


{
  "dependencies": {
    "firebase": "8.0.0",
    ...
  }
}

More generally, Google the error and restrict returns to the last year. Often someone online has figured out the latest version that still works.
For Firebase, also don't forget the ! when checking if Firebase already exists.


if ( !firebase.apps.length ) firebase.initializeApp( firebaseConfiguration ) ;

🐞 Cannot read property 'blah' of undefined ...

Check the button that navigates to your detail screen. If you're navigating to a component (like a detail screen) that depends on custom parameters, you'll need to pass an object containing them as a second argument to navigation.navigate.


<Button onPress={ () => navigation.navigate(
	"Pets", 
	{
		petName,
		petBreed,
		petAge
	}
) }>

This is necessary even if you are using the streamlined useNavigation() hook, but only when the next screen depends on data from the first.

🐞 React Native bug squasher

Search for your error:

Specific error messages

Good coding practices for React Native Back to top ↑

General debugging strategies