Error when adding seo package to Nuxt Application setup on Firebase infrastructure.

[davemg3]

Describe the bug

Hi, Nuxt Project set up with Firebase as per https://nuxt.com/deploy/firebase and running locally as on Firebase server For reminding, step to deploy on Firebase :

1. npm run build -- --preset=firebase
2. cd .output\server
3. npm install
4. firebase deploy

Adding nuxt-seo package "@nuxtjs/seo": "^2.0.0-rc.10", and using OgImage locally everything is fine. Tested with nuxt dev tool.

Trying to deploy,

• bunch of repeating warnings at step 2 :

(node:33208) [DEP0166] DeprecationWarning: Use of deprecated double slash resolving ".//index.json" for module request ".//index.json" matched to "./*" in the "exports" field module resolution of the package at C:\Users...\landing-page\app\node_modules\@unocss\preset-wind\package.json imported from C:\Users...\landing-page\app\node_modules\nuxt-seo-experiments\dist\node_modules.

• error at step 3, with following message :

npm ERR! Cannot set properties of null (setting 'peer')

=> Impossible to deploy the project in production using nuxt-seo package.

Is there already a similar bug open? Any clue?

Reproduction

Currently it happens, on my machine at least, with new nuxt projet, one single page and firebase/vite/boostrap + nuxt-seo used together

System / Nuxt Info

 Nuxt 3.11.2 with Nitro 2.9.6                                                                                                                                                                                 
 Using Nitro server preset: firebase                                                                                                                                                                       
 vite v5.2.8 ...
Shell
System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 13th Gen Intel(R) Core(TM) i7-1360P
    Memory: 432.58 MB / 15.69 GB
  Binaries:
    Node: 20.13.1 - C:\Program Files\nodejs\node.EXE
    npm: 10.5.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (125.0.2535.92)
    Internet Explorer: 11.0.22621.3527

[davemg3]

This error happening when using only Ogimage, i have tried with nuxt-og-image package only and not nuxt-seo package Still an error but with different message and only happening at step 4 "deployment" while still having a lot of warning at step 2.

i functions: updating Node.js 20 (2nd Gen) function server(europe-west1)... Build failed with status: FAILURE and message: npm error code EBADPLATFORM npm error notsup Unsupported platform for @css-inline/css-inline-win32-x64-msvc@0.14.1: wanted {"os":"win32","cpu":"x64"} (current: {"os":"linux","cpu":"x64"}) npm error notsup Valid os: win32 npm error notsup Actual os: linux npm error notsup Valid cpu: x64 npm error notsup Actual cpu: x64

so being aware of following github issue : https://github.com/nuxt/nuxt/issues/26735, https://github.com/nuxt/nuxt/issues/26735 and https://github.com/unjs/nitro/issues/1367 I went to see the package.json created on Nitro server for Firebase. It was as per following : ...

{"name":"nuxt-app-prod","version":"0.0.0","type":"module","private":true,"dependencies":{"@babel/parser":"7.24.7", "@css-inline/css-inline":"0.14.1","@css-inline/css-inline-win32-x64-msvc":"0.14.1", "@jridgewell/sourcemap-codec":"1.4.15","@resvg/resvg-js":"2.6.2", "@resvg/resvg-js-win32-x64- ...

Removing the 2 culprits here manually css-inline and resvg-js-win32 solved the issue and deployment was successful. But unfortunately, in production, the Og image is broken and cannot be displayed (while in local, it works)...

same issue discussed on Reddit : https://www.reddit.com/r/Nuxt/comments/1atxhda/help_ogimage_failure_to_build_on_intel_mac/

[harlan-zw]

Both of these should be fixed in the latest OG Image version.

[davemg3]

Both of these should be fixed in the latest OG Image version.

@harlan-zw , Hi thanks to check out... On version the issue is still existing In package.json generated in .output/server :

    "@css-inline/css-inline-wasm": "0.14.1",
   "@jridgewell/sourcemap-codec": "1.5.0",
   "@resvg/resvg-js": "2.6.2",
   "@resvg/resvg-js-win32-x64-msvc": "2.6.2",

and error during deployment is :

Build failed with status: FAILURE and message: npm error code EBADPLATFORM npm error notsup Unsupported platform for @resvg/resvg-js-win32-x64-msvc@2.6.2: wanted {"os":"win32","cpu":"x64"} (current: {"os":"linux","cpu":"x64"}) npm error notsup Valid os: win32 npm error notsup Actual os: linux npm error notsup Valid cpu: x64 npm error notsup Actual cpu: x64

So this seems to has been resolved for css-inline but not for svg package.

Also i dont know if this is a related issue to og-image package (i am still checking with different former version) but now in nuxt-dev interface, the og-image doesnt appear with following message :

ERROR [nuxt] [request error] [unhandled] [500] a is not iterable at resolveImageData (...landing-page\app\node_modules\satori\src\handler\image.ts:213:31) at s (...landing-page\app\node_modules\satori\src\handler\preprocess.ts:182:49) at Array.map () at preProcessNode (...anding-page\app\node_modules\satori\src\handler\preprocess.ts:182:38) at wl (...landing-page\app\node_modules\satori\src\satori.ts:93:9)

Could you let us know if this is still a minor or major fix needed?

[mbadr2200]

i removed the package that cause the error (in my case @resvg/resvg-js-linux-x64-musl) from the .output/server/package.json and then redeploy without build and it works for me

[davemg3]

i removed the package that cause the error (in my case @resvg/resvg-js-linux-x64-musl) from the .output/server/package.json and then redeploy without build and it works for me

Hi @mbadr2200 , indeed removing this svg package but it doesnt help as og-image is not generated in production. It doesnt even work in dev-tool anymore, the reason why i alerted @harlan-zw . Do you manage to generate any image in dev as in prod?

[harlan-zw]

How are you deploying the code? You should be using a similar environment that you're deploying to, to build your Nuxt app.

The bug itself is because resvg needs to resolve the binary for the platform you're using, each platform has a different binding and downloading the bindings for every environment is too expensive I guess. There isn't really a way to solve this, switching to using the wasm only build will cause other issues.

[davemg3]

@harlan-zw i am using a windows laptop to deploy to Firebase linux server (https://nuxt.com/deploy/firebase) so indeed not same environment locally and remotely. If such restriction, might be worth to put a warning in readme for others.

A solution might be to use a docker and deploy from docker to Firebase server? (i will try after figuring out how to set Firebase token on docker)

[harlan-zw]

Have you considered using a GitHub actions to deploy or nuxt generate?

[davemg3]

I didnt consider nuxt generate as my view was :

nuxt build: Build your application with webpack and minify the JS & CSS (for production) (used for SSR) nuxt generate: Build the application and generate every route as a HTML file (used for static hosting)

But good advice, Github actions might be the solution compared to struggling to feed my docker container with firebase token. Will try that (my issue was on 'deploy' to Firebase but before i was able to preview with nuxt dev og-image locally on win laptop. Not the case anymore with nuxt-og package update. so still interested to know if someone meet the same issue)

[davemg3]

Have you considered using a GitHub actions to deploy or nuxt generate?

Hi @harlan-zw After trying with github actions to deploy Nuxt project with og-package to Firebase, similar errors happen :

npm error code EBADPLATFORM
npm error notsup Unsupported platform for @resvg/resvg-js-linux-x64-musl@2.6.2: wanted "os":"linux","cpu":"x64","libc":"musl" (current: "os":"linux","cpu":"x64","libc":"glibc")
npm error notsup Valid os: linux
npm error notsup Actual os: linux
npm error notsup Valid cpu: x64
npm error notsup Actual cpu: x64
npm error notsup Valid libc: musl
npm error notsup Actual libc: glibc

This constraint "using a similar environment that you're deploying to" limits severely the use of this package especially if we dont own/have direct access to the server we are deploying too. So a warning might be needed in the doc.

Observations summarized to save some time to readers : seems og-image package cannot be implemented when deployment from a windows laptop to Firebase server or from Github to Firebase server.