IPX Internal Server Error

[dextersiah]

trafficstars

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:  [email protected]
- Builder:          -
- User Config:      app, devtools, experimental, typescript, modules, css, runtimeConfig, components, googleFonts, i18n, alias, nitro, build
- Runtime Modules:  @pinia/[email protected], @nuxtjs/[email protected], @nuxtjs/[email protected], @nuxt/[email protected], @vueuse/[email protected], @nuxtjs/[email protected], [email protected]
- Build Modules:    -
------------------------------

[dextersiah]

Duplicate of #1210

[dextersiah]

Issue still happening on @nuxt/[email protected]

[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 :/

[Baroshem]

@pi0 could this issue be fixed with a new version of IPX so that we could bump the package?

I think there was an issue where Daniel said that for now we cannot migrate to a newer version of IPX due to regression problems.

[Dromzy]

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"
    }
}

This is still the solution for me..

[cn-xufei]

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"
    }
}

This is still the solution for me..

This is very useful to me. Why didn’t this appear on https://image.nuxt.com/get-started/installation?

[filrey]

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"
    }
}

Thanks for sharing this solved my issue for @nuxt/image v1.9.0 also with pnpm

[ahmetaligul01]

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

[Fullsize]

I solved this problem by downgrading the pnpm version package add : "packageManager": "[email protected]"

[BartoszTrading]

Okay, so after a long night of digging, I finally tracked down the issue.

In my case, the error happened in a dev environment running on arm64.

We’re using a Nx monorepo with a single package.json, and we fixed it by adding sharp to the onlyBuiltDependencies in the pnpm config (in package.json). Now during pnpm install its creating correct build file for detected architecture

I’ve read pretty much every thread on this, and it always seems to come down to the build file not being present in node_modules/sharp/build/Release/{architecture}.

Here’s what we added to package.json:

"pnpm": { "supportedArchitectures": { "os": ["linux"], "cpu": ["x64", "arm64"], "libc": ["glibc"] }, "onlyBuiltDependencies": ["sharp"] }

Hope this helps someone else avoid the same headache!

[AndriiGera]

I had a Server Error 500 when dealing with ipx in dev mode, trying to fetch images from my /public folder. My primary provider is bunny, the ipx I use for few images hosted locally. To me adding "ipx" empty object to the image config did the trick (@nuxt/[email protected]):

// nuxt.config.ts
image: {
        provider: 'bunny',
        ipx: {}
    },

cause module looks for image.ipx (not image.providers.ipx) key in order to establish the correct server routes for /_ipx/.