Getting Hydration Failed errors in shopify when building the first app - shopify-app

I am learning how to code an Shopify app. I wanted to build first app and I started following this tutorial : https://shopify.dev/apps/getting-started/create
I used npm init #Shopify/app#latest to create first app, then moved to that directory using cd .\first-app\ then I used npm run dev App looks and works fine with UI but on console I am getting lots of errors. Here are few of them.
Hydration failed because the initial UI does not match what was rendered on the server.
There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.
vendors-node_modules_bugsnag_js_browser_notifier_js-node_modules_shopify_monorail_lib_monorai-fdaebc-b7c7bc61031d801d7cdf29f30133708999e0fe454a161247422ecc3e28c64ef8.js:2
Uncaught (in promise) Error: Error completing request. A network failure may have prevented the request from completing. Error: TypeError: Failed to fetch
And few more, I did set up the ngrok tunnel and it is working fine.
I might be missing something, any help or pointing me to right direction is appriciated
Trying to build my first app on Shopify going through their documentation using : https://shopify.dev/apps/getting-started/create

Related

SwiftUI previews error: Connecting to launched interactive agent

I received the above error when using the SwiftUI previews feature and can't figure out why this happens. The error always looks something like this:
GenericHumanReadableError: unexpected error occurred
messageRepliedWithError("Connecting to launched interactive agent 1894", Optional(Error Domain=com.apple.dt.xcodepreviews.service Code=17 "connectToPreviewHost: Failed to connect to 1894: (null)" UserInfo={NSLocalizedDescription=connectToPreviewHost: Failed to connect to 1894: (null)}))
I managed to figure out a good way to debug this, please see below
If you head into /Users/USERNAME/Library/Logs/DiagnosticReports you will see the latest crash reports. Open the most recent one (should start with your app name), and it should tell you the reason the app crashed. It'll look something like this:
Application Specific Information:
Fatal error: This request requires an authenticated account: file /Users/USERNAME/Work/AppName/Models/CloudKitAlbumManager.swift, line 101
In my case, it was a fatalError i threw in development for debugging. The previews loads your app and thus call your whole stack and will crash if you like me throws fatalErrors for debugging.
I hope this helps

"~" symbol created automatically after running project with service worker

My project is a simple login page. I am using asp.net core with MVC.
Everything was working well and I wanted to add service worker to my project. I followed the known steps. Add a manifest.json file in wwwroot, fill it correctly and add this function services.AddProgressiveWebApp(); after services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);.
When others do these steps, service worker works properly. When I run it (IIS Express), service worker produces an error: "Uncaught (in promise) TypeError: Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script."
Then I realized this thing: https://localhost:44331/~/serviceworker.
The ~ symbol is created automatically and I am not knowing how to remove it.
The following https://localhost:44331/serviceworker works.
Help?
It is solved.
I updated the version from v1.0.42 to v.1.0.33 and it worked.
v1.0.42 has a bug.

“No map found” error when running NativeScript Angular 2 app

I’ve got a really weird error when trying to run an app built with NativeScript and Angular 2. Here’s the error:
CONSOLE ERROR file:///app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js:342:26:
Unhandled Promise rejection: No map found ; Zone: angular ; Task: Promise.then ; Value: No map found undefined
CONSOLE ERROR file:///app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js:344:22:
Error: Uncaught (in promise): No map found
The error occurs when the app starts up. I’m using nativescript-angular version 1.1.2 and I’m including zone.js version 0.6.21 in my devDependencies. Here’s my full package.json: https://github.com/tjvantoll/nativescript-photos-near-me/blob/6a201b05e91687618670a79e0a56ababc71572d7/package.json.
Any idea what might be up? I’m not actually using zones explicitly in my app, so I’m very curious why I’m getting this app here but not in new NativeScript Angular apps I start from scratch.
Any help would be appreciated.
So as soon as I posted this I figured this out. The problem was an innocuous looking call to the Mapbox plugin’s unhide() method.
I assumed “map” was referring to some RxJS or Array value, when it was actually referring to an actual map. Who knew?

Laravel - how to show errors on terminal rather than log file?

I'm watching TDD by Example Laracast and I see whenever he runs phpunit and a fatal error or an uncaught exception is thrown, it gets logged in the terminal like this:
MyControllerTest::test_it_shows_create_form
InvalidArgumentException: View [mycontroller.create] not found
But whenever I run phpunit and get a fatal error or an uncaught exception, it just get logged directly to storage/logs/laravel.log instead of showing it in the terminal, which makes it harder and slower to do TDD.
Is there a configuration I might be missing that's causing me this issue?
Edit:
My console outputs this
MyControllerTest::test_it_shows_create_form
Failed to assert 200 equals 500
The failed assertion is a $this->assertResponseOk(), and since something is wrong (an uncaught exception maybe) http response code is 500.
But as you can see, it won't show me what the error is
Testing with PHPUnit, Behat, etc. runs your application in a different environment. So basically you should enable debugging for the environment that your test suite is using. If I recall correctly, test suites run your application in the testing environment. In that case you should create a .env.testing file in your root directory and enable debug option there.

Why is my meteor app getting these errors on firefox but not other browsers?

The web app that I am building in meteor works in chrome and I.E.(Other than a UI bug in I.E.) but it starts acting strange in Firefox. When I run it on my localhost and on the deployment to meteor.com, I don't get any errors in the console in the browsers' developer tools.
When I run it in Firefox, things start acting weird. On Mac OSX, if I run the app on my localhost and open it in FF it is just fine. However, when I open up the app that deployed to meteor.com via meteor deploy [my-app-url].com, I get the following errors but I can still use everything in my app:
Error 1:
mutating the [[Prototype]] of an object will cause your code to run very slowly;
instead create the object with the correct initial [[Prototype]] value using Object.create
Error 2:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource
at https://ddp--3071-[my-app-url].com/sockjs/info?cb=v9pygo9mzn.
(Reason: CORS request failed).
While right now I am not able to figure out what is causing the first error, I am mostly worried about the second error.
When I open up the app from it's deployment in FF on Windows 8, I get the first error once, and then I get the second error repeatedly and the app never loads(it just stays on my loading template from the iron router). My deployed app runs just fine on Chrome and I.E.
I don't send any kind of request to another server in my app, so I am not sure why I am getting a CORS request error. I have not set up SSL or began to make a certificate yet, so I am not sure if this could be causing this kind of error in FF as I got another exception on my login page in FF on my localhost saying that I shouldn't have password elements when I'm not using https.
Does anyone know what could be causing this?
Sorry that I provide any code, as I don't know what code I would post to solve this problem since I don't actually request anything from another server in code that I have written.
Thanks in advance for any responses!
If anyone is interested, it seems as if my combination of the aldeed:collectio2 package and one of my other packages was the cause of my problems. I removed this package and my issues went away.

Resources