@nuxtjs/seo depends on "nuxt-og-image", which in turn causes deployment issues due to platform-specific dependencies

[alexpilugin]

Describe the bug

I have met the issue with a @nuxtjs/seo package which depends on the "nuxt-og-image" package, which in turn causes deployment issues due to platform-specific dependencies in @css-inline/css-inline and "@resvg/resvg-js" packages.

I cannot deploy my Nuxt 3 app to Firebase with a next error: functions: updating Node.js 18 (2nd Gen) function server(us-central1)... Build failed with status: FAILURE and message: npm error code EBADPLATFORM npm error notsup Unsupported platform for @css-inline/css-inline-darwin-x64@0.14.1: wanted {"os":"darwin","cpu":"x64"} (current: {"os":"linux","cpu":"x64"}) npm error notsup Valid os: darwin npm error notsup Actual os: linux npm error notsup Valid cpu: x64 npm error notsup Actual cpu: x64

The "nuxt-og-image" package depends on "@css-inline/css-inline" and "@resvg/resvg-js" packages: "node_modules/nuxt-og-image" "dependencies": { "@css-inline/css-inline": "0.14.1", "@css-inline/css-inline-wasm": "0.14.1", "@resvg/resvg-js": "^2.6.2", "@resvg/resvg-wasm": "^2.6.2", // ... }

My package.json file: { "name": "nuxt-app", "private": true, "type": "module", "scripts": { "build": "nuxt build", "dev": "nuxt dev", "generate": "nuxt generate", "preview": "nuxt preview", "postinstall": "nuxt prepare" }, "optionalDependencies": { "@css-inline/css-inline-darwin-arm64": "0.14.1", "@css-inline/css-inline-darwin-x64": "0.14.1", "@resvg/resvg-js-darwin-arm64": "2.6.2", "@resvg/resvg-js-darwin-x64": "2.6.2" }, "engines": { "node": ">=18.19.0" }, "dependencies": { "@nuxt/image": "^1.7.0", "@nuxtjs/i18n": "^8.3.1", "@nuxtjs/seo": "^2.0.0-rc.10", "@pinia/nuxt": "^0.5.1", "@vueuse/core": "^10.10.0", "@vueuse/nuxt": "^10.10.0", "firebase": "^10.12.3", "firebase-admin": "^12.2.0", "firebase-functions": "^5.0.1", "nuxt": "^3.11.2", "nuxt-viewport": "^2.1.5", "pinia": "^2.1.7", "vue": "^3.4.27", "vue-router": "^4.3.2" }, "devDependencies": { "autoprefixer": "^10.4.19", "nuxt-icon": "^0.6.10", "postcss": "^8.4.38", "sass": "^1.77.4" } }

Reproduction

Try to deploy the simple project on firebase: https://github.com/alexpilugin/error-nuxt-seo

System / Nuxt Info

System:
    OS: macOS 14.1.2
    CPU: (4) x64 Intel(R) Core(TM) i5-8210Y CPU @ 1.60GHz
    Memory: 72.58 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.19.0 - ~/.nvm/versions/node/v18.19.0/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - ~/.nvm/versions/node/v18.19.0/bin/npm
  Browsers:
    Chrome: 126.0.6478.127
    Safari: 17.1.2

[davemg3]

same above issue.. And if trying to deploy from a Docker container to Firebase, got the following error when using

docker-compose build

lp-xx| ERROR [worker reload] [worker init] Cannot find module '@css-inline/css-inline-linux-x64-musl' lp-xx| Require stack: lp-xx| - /var/www/html/node_modules/@css-inline/css-inline/index.js lp-xx| lp-xx| Require stack: lp-xx| - node_modules/@css-inline/css-inline/index.js lp-xx| at Module._resolveFilename (node:internal/modules/cjs/loader:1144:15) lp-xx| at Module._load (node:internal/modules/cjs/loader:985:27) lp-xx| at Module.require (node:internal/modules/cjs/loader:1235:19) lp-xx| at require (node:internal/modules/helpers:176:18) lp-xx| at Object. (node_modules/@css-inline/css-inline/index.js:177:31) lp-xx| at Module._compile (node:internal/modules/cjs/loader:1376:14) lp-xx| at Module._extensions..js (node:internal/modules/cjs/loader:1435:10) lp-xx| at Module.load (node:internal/modules/cjs/loader:1207:32) lp-xx| at Module._load (node:internal/modules/cjs/loader:1023:12) lp-xx| at cjsLoader (node:internal/modules/esm/translators:356:17)

I would be interested to know how others use this package to avoid these bugs..

[harlan-zw]

This is fixed in 3.0.0-rc.57 of Nuxt OG Image which you can update right now by bumping your lock file, otherwise a Nuxt SEO release will be out soon.

[davemg3]

@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)

[davemg3]

@alexpilugin , could you let us know if this is working from your side?