IPX Internal Server Error

[dextersiah]

I'm deploying my Nuxt onto a Digital Ocean Droplet but I'm receiving the following error in my network tab when fetching the images from IPX.

SVG images seems to be working as normal since SVGs are not "optimized".

Running the build code locally seems to be working fine as well.

I currently have the site behind Nginx Reverse Proxy and the following is in my config file.

Reproduction

https://stackblitz.com/edit/github-9d8pkn?file=app.vue

Nginx Config

server {
    listen 80;
    server_name <IP_ADDRESS>; # Replace with your domain name

    # Enable Gzip compression
    gzip on;
    gzip_types text/plain application/json application/javascript text/css text/xml application/xml application/xml+rss text/javascript;
    gzip_proxied any;
    gzip_vary on;
    gzip_min_length 256;
    gzip_comp_level 6;

    # Forward requests to Nuxt
    location / {
        proxy_pass http://127.0.0.1:3000; # Nuxt.js server address
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

}

Actual Results

{"error":{"message":"[500] [IPX_ERROR] \nSomething went wrong installing the \"sharp\" module\n\nCannot find module '../
build/Release/sharp-linux-x64.node'\nRequire stack:\n- /root/aera-frontend/.output/server/node_modules/sharp/lib/sharp.js\n- /
root/aera-frontend/.output/server/node_modules/sharp/lib/constructor.js\n- /root/aera-frontend/.output/server/node_modules/
sharp/lib/index.js\n\nPossible solutions:\n- Install with verbose logging and look for errors: \"npm install --ignore-scripts=false --
foreground-scripts --verbose sharp\"\n- Install for the current linux-x64 runtime: \"npm install --platform=linux --arch=x64 
sharp\"\n- Consult the installation documentation: https://sharp.pixelplumbing.com/install"}}

Additional Notes

I did try the possible solutions in the error message. No change in behavior My system information

------------------------------
- Operating System: Darwin
- Node Version:     v20.11.0
- Nuxt Version:     3.11.2
- CLI Version:      3.11.1
- Nitro Version:    2.9.6
- Package Manager:  yarn@1.22.21
- Builder:          -
- User Config:      app, devtools, experimental, typescript, modules, css, runtimeConfig, components, googleFonts, i18n, alias, nitro, build
- Runtime Modules:  @pinia/nuxt@0.4.11, @nuxtjs/tailwindcss@6.12.0, @nuxtjs/google-fonts@3.2.0, @nuxt/image@1.7.0, @vueuse/nuxt@10.9.0, @nuxtjs/i18n@8.3.0, dayjs-nuxt@2.1.9
- Build Modules:    -
------------------------------

[dextersiah]

Duplicate of #1210

[dextersiah]

Issue still happening on @nuxt/image@1.7.0

[pilunglee]

I'm experiencing the same issue.

I'm encountering the same error message and issue (ipx-error, status 500).

since my service is deployed using Nginx, I have set up a proxypass for the path handled by _ipx via Nginx.

of course, I am using version 1.7.0 of @nuxt/image, and I have directly installed version 0.33.4 of the sharp module as a dependency.

however, while everything works fine in the local development environment, the same error that the original poster mentioned occurs for some .svg and .png in the dev, stg, and prod environments.

It would be one thing if nothing worked, but this partial failure is driving me crazy.

this error has persisted for a very long time, and since it still hasn't been resolved, I am beginning to doubt whether Nuxt/Image is functioning correctly as an official image processing library in Nuxt3.

[DamianGlowala]

Could you please try adding "sharp": "0.33.4" to your package.json overrides and let me know whether this works for you?

[dextersiah]

Could you please try adding "sharp": "0.33.4" to your package.json overrides and let me know whether this works for you?

I did try this as I saw others managed to fixed with this additional overrides file in other issues. Unfortunately it did not solve the issue.

[DamianGlowala]

Would you, as a last resort, try combining the above with supportedArchitectures field? E.g. for pnpm:

"pnpm": {
    "supportedArchitectures": {
        "os": [
            "current",
            "linux"
        ],
        "cpu": [
            "current",
            "x64"
        ]
    },
    "overrides": {
        "sharp": "0.33.4"
    }
}

[lumos94]

I am having the same issue, have you found a solution yet?

[intellizen]

This is still a problem and really annoying. Any chance that this issue can be resolved? It seems pretty ridiculous that we can't successfully display a jpg image with a vanilla configuration

[HADB]

I have the same issue after switching to Window from macOS.

For those who use pnpm, I get it working by adding the following to package.json according to sharp Installation / cross-platform.

At install time, package managers will automatically select prebuilt binaries for the current OS platform and CPU architecture, where available.

Some package managers support multiple platforms and architectures within the same installation tree and/or using the same lockfile.

  "pnpm": {
    "supportedArchitectures": {
      "os": ["win32", "darwin", "current"],
      "cpu": ["x64", "arm64"]
    },
    "overrides": {
      "sharp": "0.33.4"
    }
  }

[raphaelbernhart]

I can confirm that the problem for me is temporarily fixed with adding the "overrides" section for "pnpm".

Tho I also think that this is really annoying especially as this is the official nuxt image module :/