importing Amplify throws error "null is not an object (evaluating 'keys.filter)" in react native app

Viewed 189

Any time I import Amplify into my React Native project's App.js file, I get the following error:

TypeError: null is not an object (evaluating 'keys.filter')

Here is how I'm importing it:

enter image description here

I run the project using Expo only. If I comment the import Amplify line out, any other files which use anything related to Amplify cause the same error to occur.

Initially, when I was loading this project for the first time, I had other errors to deal with like first needing to create the aws-exports.js file. I copied this over from an old project (Because this is meant to be a re-do of another project that's already set up). Once I included that file I had to update a few lines in that file because of an improper reference to Linking from expo. Once I fixed that, it throw this error I'm referencing here. Now, even if I delete the aws-exports file it will throw this error as soon as Amplify is imported into the App.js file.

enter image description here

enter image description here

-- Update

I've found where the error is occurring. Some of my code gets executed but the error happens inside of the reactnative.js file when syncing between two memory software.

I've tried to reproduce this error inside a fresh react application by copying the package.js file and then importing Amplify into the App.js file but it doesn't throw this error.

Here is a screenshot of where the error is taking place. I'm still trying to figure out how to pinpoint where in my code this error begins.

enter image description here

2 Answers

According to Expo, you have to follow these steps

it would be best if you imported Amplify

import Amplify from '@aws-amplify/core'

All you need to follow those steps it sees the configuration issue result data is not coming that's why it gives a null value and crashes.

Follow steps below will fix your problem

https://blog.expo.dev/how-to-build-cloud-powered-mobile-apps-with-expo-aws-amplify-2fddc898f9a2

The problem seems to be resolved by changing the slug attribute in the react app.json file. I changed the slug from being a camel case to an all lower case slug. After this the error has gone away for what seems permanent. I've been able to replicate the error in small sample apps. I don't understand why this causes these errors. If someone has a clue, I'd be happy to accept the answer and give the bounty.

Related