Why is my Remix app's data fetch request getting cancelled?

[johnmcguin88]

I am in the beginning stages of creating an app. I used the Shopify cli for remix and currently have only two routes. Navigation works completely fine until I try to fetch some data in the loader. It should be noted that I am calling out to a second server. Both are running locally and exposed via ngrok.

When I do try to call out to that server during installation, there is no problem. When I try to call out within the loader, the request gets cancelled and the navigation is prevented. What is strange here is that is I log out the response in the server loader, it logs successfully. If I look at the other server logs, the request is successful with no problem.

I am brand new to Remix but it sure seems like this is a Remix specific issue given the above. To my understanding, that loader should only ever execute on the server, so CORS shouldn't be an issue, but to be safe, I configured the second server for it. I am at a loss for now and have been battling it for a while now. Has anybody seen this? Any ideas as to what might be going on?

[Made4uo-Ribe]

Hi @johnmcguin88,

Have you try to re-start your app? Your auth might be off. You can check the example code for loader use here. 

[johnmcguin88]

Hi, thanks but the app is going through OAuth flow without issues. It is pretty much a stock cli project so that's all set up automatically. The loader is use is correct as I can validate it without hitting the second server, it is behaving as expected. I'm going to try this outside of Shopify and see if I experience a similar issue

[johnmcguin88]

Small update -> I've recreated a remix project with a similar layout with a base route that holds a nav  with <Link>s and an <Outlet> for routing. The reproduction is using the same server as I'm trying to get working within the Shopify app. Both frontend and backend are served up over https via ngrok with the same auth mechanism in place on the backend. This works without issue outside of the Shopify ecosystem. What could be different with this as an embedded app in Shopify? I haven't seen a lot of examples of a separate backend for the domain logic, but I'm assuming at least some other people must have this setup?

[johnmcguin88 · Accepted solution]

For posterity's sake, I got this solved. My dev console had a lot of noise (ended up being due to Brave browser) which prevented me from seeing the signal. I had a client side error around reading from process.env. I have a `config.ts` file that reads from process.env, validates requirements and exports the variables as consts. This was winding up in the client bundle however, so I had to rename the file to `config.server.ts` and the issue went away.