search

nuxt-modules / og-image

Generate OG Images with Vue templates in Nuxt.
https://nuxtseo.com/og-image
360 stars 23 forks source link

Replace emojis instead of blocking render #187

Open jeannen opened 2 months ago

jeannen commented 2 months ago

Hey!

Seems like there is an issue with the twemoji module used to generate images from emojis.

Maxcdn , the CDN used to fetch the images is offline. https://github.com/twitter/twemoji/issues/580 Anytime an emoji is used in the OG image title or description it crashes it (error below)

I'm not sure if MaxCDN being offline is permanent or just a bug, but it would be nice to ignore emojis if it blocks render, else it's impossible to deploy the app without disabling OG-Images

 ERROR  Can't load image https://twemoji.maxcdn.com/v/14.0.2/svg/1f44b.svg: fetch failed                                                                          9:55:04 AM

  ├─ /blog/my-journey/__og_image__/og.png (7728ms)                                                                                                          nitro 9:55:04 AM
  │ ├── Error: [500] Failed to create og image: Image size cannot be determined. Please provide the width and height of the image.
  │ └── Linked from /blog/my-journey
harlan-zw commented 2 months ago

Hey, can you make sure you're using v3? We no longer use the twemoji package

jeannen commented 2 months ago

Hey, can you make sure you're using v3? We no longer use the twemoji package

It works but it generate a new issue now, seems like it require a NPM auth token? I can't deploy on Cloudflare pages anymore The issue stops if I roll back to 2.2.4 version or uninstall nuxt-og images

18:59:47.843    Installing project dependencies: npm clean-install --progress=false
19:00:01.577    npm ERR! code E401
19:00:01.585    npm ERR! Incorrect or missing password.
19:00:01.587    npm ERR! If you were trying to login, change your password, create an
19:00:01.593    npm ERR! authentication token or enable two-factor authentication then
19:00:01.598    npm ERR! that means you likely typed your password in incorrectly.
19:00:01.599    npm ERR! Please try again, or recover your password at:
19:00:01.599    npm ERR!     https://www.npmjs.com/forgot
19:00:01.599    npm ERR! 
19:00:01.599    npm ERR! If you were doing some other operation then your saved credentials are
19:00:01.599    npm ERR! probably out of date. To correct this please try logging in again with:
19:00:01.599    npm ERR!     npm login
19:00:01.600    
19:00:01.605    npm ERR! A complete log of this run can be found in: /opt/buildhome/.npm/_logs/2024-04-10T09_59_48_545Z-debug-0.log
19:00:01.623    Error: Exit with error code: 1
19:00:01.628        at ChildProcess.<anonymous> (/snapshot/dist/run-build.js)
19:00:01.631        at Object.onceWrapper (node:events:652:26)
19:00:01.633        at ChildProcess.emit (node:events:537:28)
19:00:01.636        at ChildProcess._handle.onexit (node:internal/child_process:291:12)
19:00:01.641    Failed: build command exited with code: 1
19:00:08.458    Failed: error occurred while running build command
jeannen commented 2 months ago

@harlan-zw any chance you had a look at this? 👀 Still can't deploy anything that includes the new version

harlan-zw commented 2 months ago

This does not seem related to the module, you should be using version 3.0.0-rc.52 if you want to use the latest v3.

If you're using this please paste the complete log and / or make a reproduction. I don't think you'll be able to though as StackBlitz demo works (https://stackblitz.com/edit/nuxt-starter-pxs3wk?file=pages/index.vue) and https://github.com/harlan-zw/nuxt-og-image-playground deploys on Cloudflare without issue :thinking: