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:
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.
-- 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.
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.
Related
I am starting to help someone with a new project. This project is React (React Native as is a mobile app).
The project is working fine on her laptop (in her browser), and when I scan the Expo QR code, the app works fine on my Android device.
However, trying to run it in my browser is throwing all these errors:
The 'Can't resolve' error doesn't make sense, because the correct react native files are there. Is this a cache problem? I have tried deleting the .expo/web/cache folder and starting over.
Also, why are there multiple errors in my console, but only one being shown in the information on the actual web page? Does this mean that the single error being shown is causing all the other errors, or it is the only one which needs fixing, or will it show the next error when I fix the one that is being shown?
Thanks
Seems to have been a known problem re babel. See the links below:
https://github.com/babel/babel-loader/issues/173
how to solve this error You may need an appropriate loader to handle this file type
I have tried asking on Super User community before, but didn't get any answers so I'm trying my luck here.
I'm running an Apache web server and decided to host a React application. I have a nano-react-app folder which contains the files shown below. I can render the website in debug mode so I know my code is working properly. But when I go online, I get this error :
Uncaught SyntaxError: Cannot use import statement outside a module (index.js:1)
which points to the line import React from 'react'; in index.js. To be honest, I don't really understand what the error is telling me so I don't know where and how to look. All I could figure out is that my Index.js file — with a capital i — is called from index.html with a lowercase i and it changes nothing locally but on server-side it returns this error when capitalizing i:
GET http://mywebsite/src/Index.js net::ERR_ABORTED 404 (Not Found)
Now.. I have read in another SO question that I should add type="module" when calling index.js in script tag but now I get this error :
Uncaught SyntaxError: Unexpected token '<' (index.js:5)
I would highly appreciate any solutions... Thanks!
Browsers don't support JSX natively. You need to transpile your code to JavaScript by creating a production build. How you do that depends on the toolchain you have selected and is covered in the React documentation.
We are trying to upgrade our react project to latest packages including relay (7.0.0). Our application builds and works but we are getting this error message in the console (during build) on every file where we import graphql from 'babel-plugin-relay/macro'. We are doing exactly like documented here adding relay
The error is "There was an error trying to load the config "relay" for the macro imported from "babel-plugin-relay/macro. Please see the error thrown for more information." It is coming from \node_modules\babel-plugin-macros\dist\index.js in getConfig( ).
To understand how other projects were configured, I downloaded another sample relay project / installed it and it had the same problem. Interesting enough there was this recent post in that app's issues list error loading config
The solution noted worked for me (adding that noted .babel-plugin-macrosrc.yml file with empty relay plugin?) but I am not understanding why this is needed or what was causing this seemingly benign error message?
I have a React app created using Create React App that was running fine until today. Something must have updated the last time I installed a new package. Anyhow, so whenever I try to start the app, it complains that there are .ts files (within node_modules folder) and forces me to install TypeScript.
Is there any way to stop this behaviour? Because currently, installing TypeScript just opens a bottle of worms, where I need to resolve the TypeScript errors that arises.
Also, as the screenshot suggests, removing the tsconfig.json file doesn't resolve the issue, it gets automatically created on every run..
Currently because it's preventing me to work, I've done the following modification until they fix it on the Create React App:
Current solution until they fix the create react app
On the file node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js, find the definition of verifyNoTypeScript() (line 24). Replace the function to the following:
function verifyNoTypeScript() {
return true;
}
I've been having trouble getting react-pdf to work properly in my react app that I created using 'create-react-app'. From various github comments on the react-pdf page, it seems that there's an issue setting up the workerSrc in React applications that were created with 'create-react-app'.
One work around that seemed to solve the issue (temporarily) was to copy the pdf.worker.js file from the node-modules/build/pdfjs-dist/build folder and place it in the public folder of my react app. Then in my index.js file put the following code:
import {pdfjs} from 'react-pdf'
window.PDFJS.workerSrc = process.env.PUBLIC_URL + '/pdf.worker.js'
This worked just fine for a week, until I installed a new module into my application with npm. Now, I'm getting the same error I did in the beginning, and nothing has changed:
index.js:14 Uncaught TypeError: Cannot set property 'workerSrc' of undefined
These were the initial comments that helped me narrow down the error:
https://github.com/facebook/create-react-app/issues/1574#issuecomment-280436498
https://github.com/wojtekmaj/react-pdf/issues/291
but now that it's back I'm kind of at a loss for ideas. Has anyone else experienced this and been able to solve it? Any help would be greatly appreciated!
Based on what I have seen in the docs and in forums, it appears you should be altering the global PDFJS object.
PDFJS.workerSrc, instead of window.workerSrc.
I managed to get this working by loading the worker from CDN.
import { Document, Page, pdfjs } from 'react-pdf';
pdfjs.GlobalWorkerOptions.workerSrc=//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js