An error occurred while deploying online [500 This page is temporarily unavailable.]

[lxccc812]

Describe the bug

I tested it locally without any error messages, but when I deployed it to an online server, a problem occurred when I accessed the page again.

package.json:

{
    "name": "",
    "version": "2.0.0",
    "private": true,
    "packageManager": "pnpm@8.6.11",
    "scripts": {
        "build": "nuxi build --dotenv .env.prod",
        "build:test": "nuxi build --dotenv .env.test",
        "dev": "nuxi dev --dotenv .env.dev",
        "dev:pwa": "VITE_PLUGIN_PWA=true nuxi dev",
        "start": "node .output/server/index.mjs",
        "typecheck": "vue-tsc --noEmit",
        "lint": "eslint .",
        "postinstall": "nuxi prepare",
        "generate": "nuxi generate",
        "clean": "rm -rf .nuxt dist .output",
        "start:generate": "npx serve .output/public"
    },
    "devDependencies": {
        "@nuxt/devtools": "^0.7.4",
        "@nuxtjs/device": "^3.1.0",
        "@nuxtjs/eslint-config": "^12.0.0",
        "@nuxtjs/eslint-config-typescript": "^12.0.0",
        "@nuxtjs/google-fonts": "^3.0.2",
        "@unocss/eslint-config": "^0.54.1",
        "@unocss/nuxt": "^0.54.1",
        "@vite-pwa/nuxt": "^0.1.0",
        "@vueuse/nuxt": "^10.3.0",
        "consola": "^3.2.3",
        "eslint": "^8.46.0",
        "eslint-config-prettier": "^8.10.0",
        "eslint-plugin-nuxt": "^4.0.0",
        "eslint-plugin-prettier": "^4.2.1",
        "nuxt": "^3.7.0",
        "nuxt-og-image": "^2.0.28",
        "nuxt-simple-sitemap": "^3.2.9",
        "prettier": "^2.8.8",
        "sass": "^1.66.1",
        "sass-loader": "^13.3.2",
        "typescript": "^5.1.6",
        "vue-tsc": "^1.8.8"
    }
}

Tests I conducted

# local
pnpm dev

# Analog online
pnpm build
pnpm start

The online server uses pm2 to manage nuxt projects
ecosystem.config.js

module.exports = {
    apps: [
        {
            name: '',
            port: '3000',
            exec_mode: 'fork',
            instances: 'max',
            script: './.output/server/index.mjs',
        },
    ],
}

Reproduction

I can't provide a replica because the local tests were all fine

System / Nuxt Info

Nuxt: 3.7.1
Nitro: 2.6.3
nuxt-og-image: 2.0.28

Linux: CentOS Linux release 7.9.2009 (Core)
pm2: 5.2.2

[harlan-zw]

Hi @lxccc812, are you able to share the live URL or the stack trace thrown by the 500?

[lxccc812]

This is the log information recorded by pm2 @harlan-zw

[nuxt] [request error] [unhandled] [500] Cannot find module '@resvg/resvg-js-linux-x64-gnu'
Require stack:
- /home/centos/project/frontend/.output/server/node_modules/@resvg/resvg-js/js-binding.js
- /home/centos/project/frontend/.output/server/node_modules/@resvg/resvg-js/index.js
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
at Module.Hook._require.Module.require (/usr/local/nodejs16/lib/node_modules/pm2/node_modules/require-in-the-middle/index.js:81:25)
at require (node:internal/modules/cjs/helpers:102:18)
at Object. (./.output/server/node_modules/@resvg/resvg-js/js-binding.js:1:3494)
at Module._compile (node:internal/modules/cjs/loader:1105:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at Module.Hook._require.Module.require (/usr/local/nodejs16/lib/node_modules/pm2/node_modules/require-in-the-middle/index.js:101:39)

[harlan-zw]

Thanks for the log, sorry for the delay.

Not sure what's going on here exactly, you should have the binary installed for you. Can you confirm what package manager you're using and what version (to install the deps).

You can see more about the issue here: yisibl/resvg-js#153

[lxccc812]

pnpm 8.7.1 package manager
What does it mean I should install the binaries and what else do I need to do

[harlan-zw]

Hm maybe you can try manually including the dependency

pnpm add @resvg/resvg-js-linux-x64-gnu

[lxccc812]

Excessive stack depth comparing types 'NuxtModule' and 'NuxtModule',Type instantiation is excessively deep and possibly infinite.

When I tried to use the above method to solve the problem, a new problem arose. When I installed the latest version of nuxt-og-image (2.2.1) and installed it into modules, an error like this was thrown.

But I didn't get this error when using 2.0.28.

nuxt: 3.7.1
nitro: 2.6.3
pnpm: 8.6.7
nuxt-og-image: 2.1.1

After my testing, I found that the version of nuxt-og-image seems to be somewhat incompatible.
nuxt(3.7.1) is incompatible with nuxt-og-image(2.1.1)
nuxt(3.7.4) is compatible with nuxt-og-image(2.1.1)
nuxt(3.7.1) is compatible with nuxt-og-image(2.0.28)
nuxt(3.7.4) is compatible with nuxt-og-image(2.0.28)

Problem solving reference Nuxt#13897

In the case of incompatibility, a stack error will occur, and I'm not sure whether this is a bug.

In addition, thank you for your answer. After installing resvg, the problem was solved. However, I think it is a problem that requires me to manually install resvg. Do you have any ideas of merging it into nuxt-og-image?

[lxccc812]

A new problem has arisen 😫, and what is generated is not an image

pm2 log

template component

<template>
    <img src="@/assets/img/og-image.jpg" />
</template>

It's already the easiest thing to use.

nuxt: 3.7.4
nuxt-og-image: 2.1.1

[Extarys]

Same issue here when deploying for production on a VPS. I use a docker alpine/node image and copy the .output directory then launch node.

[nuxt] [request error] [unhandled] [500] Cannot find module '@resvg/resvg-js-linux-x64-musl'
Require stack:
- /usr/src/app/server/node_modules/@resvg/resvg-js/js-binding.js
- /usr/src/app/server/node_modules/@resvg/resvg-js/index.js
  at Module._resolveFilename (node:internal/modules/cjs/loader:1090:15)  
  at Module._load (node:internal/modules/cjs/loader:934:27)  
  at Module.require (node:internal/modules/cjs/loader:1157:19)  
  at require (node:internal/modules/helpers:119:18)  
  at Object.<anonymous> (./server/node_modules/@resvg/resvg-js/js-binding.js:1:3256)  
  at Module._compile (node:internal/modules/cjs/loader:1275:14)  
  at Module._extensions..js (node:internal/modules/cjs/loader:1329:10)  
  at Module.load (node:internal/modules/cjs/loader:1133:32)  
  at Module._load (node:internal/modules/cjs/loader:972:12)  
  at Module.require (node:internal/modules/cjs/loader:1157:19)

I confirmed the package @resvg/resvg-js-linux-x64-musl is in server/node_modules. It works locally but not on the VPS. Quite strange. I'll try and disable nuxt-og-image in nuxt config for now.

[harlan-zw]

There's a couple of things being pointed out in this issue:

• Image issues, please see https://nuxtseo.com/og-image/guides/icons-and-images (you can't use bundled images, load from the public dir relative or use absolute)
• ReSVG binary resolution failing, this is fixed in the v3

Feel free to open a new issue if you're still having issues.