gtlfjsx model error: memory access out of bounds, Decoding failed - reactjs

I'm facing this error as showen in image while rendering this floating-shoe using gltfjsx example and i don't know the real source of bug, any solution or even a hint.
The model was working 100% then i was working on an other component ib the same app without touching the model code then suddenly the error occured...I tried to reinstall the project file from this repos without any other componenet just the shoe model boilerplate, and the same error occured.
Console error

Related

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

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.

While trying to resolve module `idb`

I have been getting this error since past days,
I have downgraded firebase from 9.8.1 to 9.6.11
but still, it`s been showing the same error
have tried every single solution
but still no progess
enter image description here

How to log errors in browser (error view) instead of blank screen in React

I have a React application which is not created with create-react-app. I would like to add a error handling functionality but I have no idea how:
When there is an error, instead of getting a blank page and errors in console, in development, how do I enable this functionality in a React application
where it shows the error stack in the browser?
Do I have to write the code for it or there is a react configuration that I can just enable or should I use a library to achieve this?
EDIT:
Above image is what I want to see as an error report in my browser when there is an error. It is not an error I am trying to solve.
Try Error Boundaries . Add those in your Root Level to catch all errors inside that.

How can I debug a newly cloned React Native app

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

error trying to load the config "relay" for the macro imported from "babel-plugin-relay/macro"

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?

Resources