Wrong base url leads to error in production

[tmlmt]

I've faced quite a few bugs when implementing nuxt-og-image in dev but haven't been able to create a proper repro and have found my way around things. However I am facing a breaking error in production as I cannot access the /__og_image__/og.png as I can in dev.

I can see the following error in my pm2 logs:

[nuxt] [request error] [unhandled] [500] request to http://www.mywebsite.com:3000/api/og-image-options?path=/en failed, reason: connect ETIMEDOUT 11.22.33.44:3000 (http://www.mywebsite.com:3000/api/og-image-options?path=/en)
  at $fetchRaw2 (/var/www/myproject/.output/server/node_modules/ofetch/dist/shared/ofetch.502a4799.mjs:180:24)  
  at /var/www/myproject/node_modules/nuxt-og-image/dist/runtime/nitro/middleware/og.png.mjs:16:19  
  at Object.handler (/var/www/myproject/.output/server/node_modules/h3/dist/index.mjs:1247:19)  
  at Server.toNodeHandle (/var/www/myproject/.output/server/node_modules/h3/dist/index.mjs:1322:7)

I've correctly set up (I think!) the siteUrl via runtimeConfig with https and no port number, so I'm surprised to see that the url which causes an error is in http and with port 3000. I wonder if the following part of the code has something to do with it?

Using Nuxt 3.3.1 and a freshly installed nuxt-og-image.

[harlan-zw]

Hey @tmlmt

You can try out the v2 beta to see if it works any better 2.0.0-beta.1.

It's not fully tested so you may run into some other issues.

[tmlmt]

Hey @harlan-zw, thanks for tackling this one ! 2.0.0-beta.1 is not working. Get the following error:

[Vue warn]: Unhandled error during execution of setup function                                                                                                                                                                                             22:59:41
  at <[[slug]] onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > >

Seems to be coming from https://github.com/harlan-zw/nuxt-og-image/blob/e08d1e7f1b8ae9a4874ca0a7ec7fc7490ed2bde2/src/runtime/composables/defineOgImage.ts#L29 that you've added. Are you maybe missing an import of useRuntimeConfig, like in 8444dce?

[harlan-zw]

You're absolutely right, I should avoid pushing out releases at 3am..

Please try 2.0.0-beta.2. Need to do some more testing though so sorry if it' not fully fixed yet.

[tmlmt]

Haha ! But thanks for beta.2

We're getting closer (now images get generated in prod) but now it seems there's been a regression, as the siteUrl has disappeared from the og:image tag. So I'd like to keep the issue open :) For instance on my homepage, I get:

<meta property="og:image" content="/__og_image__/og.png">

My nuxt.config.ts contains the following:

runtimeConfig: {
    //...
    public: {
      //...
      siteUrl: "", // I also tried with process.env.NUXT_PUBLIC_SITE_URL instead of ""
    },
  },

And in my .env file:

NUXT_PUBLIC_SITE_URL="https://www.mywebsite.com"

[tmlmt]

Looking forward to your new beta release :))

[harlan-zw]

Please try 2.0.0-beta.4 :)

[tmlmt]

Almost there? Now I strangely get a Nuxt 500 error when I try to access the og.png image of my homepage:

[harlan-zw]

Almost there? Now I strangely get a Nuxt 500 error when I try to access the og.png image of my homepage:

That's a new one! Any reproduction available :pray: ?

[tmlmt]

Hey @harlan-zw, I found out that this was due to one of the <nuxt-img> tags in my custom template. I am having some issues with using images: as this is unrelated to this issue (which you seems to have solved with 2.0.0-beta.7 -- thank you for that :+1:), I will close it and open a new one.

[sandros94]

@tmlmt I was following the issue since I had the same problem (but still didn't have time to test the betas).

Until you create the new issue (I don't understand if you will open it here or on the nuxt-img repo) could you explain what problem did you have with <nuxt-img>? I'm using both of them too, so you got me curious.