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

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?

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.

CRA - Failed to register a ServiceWorker, unsupported MIME type ('text/html')

I am getting the following error when publishing my create react app but the error doesn't appear locally. I recently updated my React version and a load of packages too. I'm guessing it's possibly something to do with that as I've never had this issue before?
Error during service worker registration: DOMException: Failed to register a ServiceWorker for scope ('https://**subdomain**.azurewebsites.net/') with script ('https://**subdomain**.azurewebsites.net/service-worker.js'): The script has an unsupported MIME type ('text/html').
Any input on this will be greatly appreciated. The error doesn't appear to be breaking anything from what I can see but I'd rather not push this to production with any kind of errors
So turns out the issue was because I updated the react version. CRA doesn't have service workers out of the box anymore. The project was returning 'unsupported MIME type ('text/html')' because it was hitting 404 looking for a file that doesn't exist.
The fix was relativly simple.
I replaced the registerServiceWorker() in my index.js file with reportWebVitals(). I then added reportWebVitals.js to my src folder. (I just created a temp react project and pulled the file from that). After I did that it started to work for me. I think I also had to npm install web-vitals.

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

Karma Istanbul fix to work with new version of Chrome

In my AngularJs application I'm using Jasmine and Karma for my unit tests.
Recently, after a chrome update (now on 72.0.3626.81) my unit tests starting failing locally (with no change to code). I believe the error is a result of my coverage tool Instanbul.
Sometimes the error appears like this:
An error was thrown in afterAll Uncaught ReferenceError: __cov_iuQO6FdumXRPLjSMopb0JQ is not defined thrown
Other times it will appear within a specific unit test (not sure why).
I searched my application and the only file this __cov_ variable could come from is the return of a function within the Instanbul package, generateTrackerVar() within instrumenter.js.
As no code changes were made I assume that the issue is with the new version of Chrome, perhaps the security settings.
My question what permissions would karama-coverage/istanbul require? OR if anyone suspects the issue isn't security based, then what could be causing this error?
Thanks
EDIT:
I have tried to disable web security in my gulpfile like so:
browsers: [ 'Chrome_without_security' ],
customLaunchers: {
Chrome_without_security: {
base: 'Chrome',
flags: ['--disable-web-security']
}
},
But this didn't solve the issue. Is there a way to set the chrome version in this config?
I managed to solve this by figuring out the hashcode after __cov_ was related to a test file that was throwing an error. I don't know why the error didn't just appear as it normally would, that will be another problem to solve.
For now I managed to figure out the file by logging in instrumenter.js within the instanbul package. Then by removing my coverage tool I figured out the source of the issue. Simply removing the coverage tool would give me a different error but not tell me which file so I needed to do both.

AngularJS loaded twice with Rails asset pipeline

I have set up rails to use bower according to the following guide: http://joelencioni.com/blog/2014/01/03/integrating-bower-with-rails/
I have installed AngularJS and included it in my application.js file.
Now, when I run rake assets:precompile, I get the following error in the console:
WARNING: Tried to load angular more than once.
But my application continues to (seemingly) work fine. When I run rake assets:clobber, I no longer get the error.
I read through the many StackOverflow questions and answers relating to this error and still couldn't find a solution. ng-app is only declared once, there are no errors with my templates and how I include them, turbolinks is removed, etc.
What could cause this error when I compile my assets?
UPDATE: Some strange behaviour here... running the app in production with Passenger, the above error doesn't show up.

Resources