Deploying to CloudFlare pages gives a 500

[mohamnag]

Version

nuxt-medusa: 0.5.0
nuxt: 3.12.2

Reproduction Link

Steps to reproduce

What is Expected?

What is actually happening?

I have an app that is already deployed to CloudFlare Pages and is using useFetch to interact with a Medusa backend.

app is built using npx nuxi build --preset=cloudflare_pages and the resulting dist folder is deployed using wrangler to CloudFlare.

I decided to switch the implementation with this module for a better type support however as soon as this module is activated by calling useMedusaClient on any page, I get a 500 (t.adapter || Rr.adapter) is not a function error back. CloudFlare Pages' function shows no logs so I can't really really see what is wrong.

is this module SSR compatible or is it using Axios underneath?

[Baroshem]

Hey there,

Thanks for reporting this issue! The module is indeed using axios but it comes with both a composable (that works on client side / ssr) and the server utility that is supposed to work specifically in the server side (like api endpoint).

The error you received is quite strange.

I have not updated this package in some time. Maybe that could be the issue to it, but I think that it is the first case in a long time for this module.

Do you maybe have some clue on what could be breaking it?

Can you maybe reproduce the error locally or with a different preset?

[mohamnag]

Sorry for the late response.

Locally its all fine, these just appear after I build and deploy to CloudFlare and I'm not really getting any logs there.

Honestly no idea what could be breaking it and I'm also lacking any deep knowledge about CloudFlare Worker's internals and how they relate to nuxt server runtime. In the mean time I just switched back to using useFetch and $fetch directly which is a bit unfortunate but works pretty well locally as well as in CF.

[Baroshem]

I see, thanks for additional details. I am happy that you have made it work.

I will try to find some time in the next few weeks to investigate it

[IosebAlavidze]

I have a similar issue:

I have my backend deployed and accessible via useFetch on https://api.mydomain.com, the admin is also deployed on that domain on a different path and both I can access form the browser.

In nuxt.config.ts, I have the same backend domain set as my baseUrl per this module docs.

I have set my STORE_CORS inline:

const STORE_CORS = "/*/";

and passed it into the projectConfig for the backend, but when I use the client, Nuxt fails to load the page

With client

With useFetch

When I run a local medusa backend and use the localhost:9000 as the baseUrl everything works.

Still on "@medusajs/medusa": "^1.20.9" by the way.

I should mention that I want to move away from useFetch and rely on the client so any help is appreciated!

[IosebAlavidze]

Seems like this was an expired SSL certificate + cloudlfare proxy issue. BUT with these issues amended, I am now seeing an even weirder behavior:

const client = useMedusaClient();
const { products } = await client.products.list();
console.log(products);

This logs the products before proceeding to make 3 CORS error logs

curl -X GET https://api.mydomain.com/store/products -H "Origin: http://localhost:3000"

This responds with a valid products response.

[IosebAlavidze]

Issue resolved and it was entirely a user error with nginx config not setting CORS headers :)

[Baroshem]

Hey @IosebAlavidze

Thanks for the news. I am gld that it worked!

Just for anyone here. We will be releasing a new version soon (1.0.0) with the support for Medusa 2.0. I hope that it will solve some of the issues you have :)