vue.jsnuxt.jsproduction-environmentsharp

nuxt/image module in nuxt 3 causes problem in production


When using the Nuxt/Image module and building the application, the image URLs are being changed to https://domain.x/_ipx/_/images/foods/Appetizaer/Garlic-Bread.png. However, the images cannot be loaded due to an error. Clicking on the provided link displays the following message:

[500] [IPX_ERROR]
Something went wrong installing the "sharp" module
Cannot find module '../build/Release/sharp-linux-x64.node'\nRequire stack:
- /var/www/domain.x/.output/server/node_modules/sharp/lib/sharp.js\n- /var/www/domain.x/.output/server/node_modules/sharp/lib/constructor.js
- /var/www/domain.x/.output/server/node_modules/sharp/lib/index.js
Possible solutions:
- Install with verbose logging and look for errors: "npm install --ignore-scripts=false --foreground-scripts --verbose sharp"
- Install for the current linux-x64 runtime: "npm install --platform=linux --arch=x64 sharp"\n- Consult the installation documentation: https://sharp.pixelplumbing.com/install

package.json

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "@nuxt/devtools": "latest",
    "@nuxt/image": "^1.0.0",
    "autoprefixer": "^10.4.16",
    "nuxt": "^3.9.0",
    "postcss": "^8.4.31",
    "prettier": "^3.0.3",
    "prettier-plugin-tailwindcss": "^0.5.6",
    "sass": "^1.69.4",
    "sharp": "^0.33.1",
    "tailwindcss": "^3.3.3",
    "vue": "^3.3.6",
    "vue-router": "^4.2.5"
  },
  "dependencies": {
    "swiper": "^11.0.5"
  },
  "prettier": {
    "plugins": [
      "prettier-plugin-tailwindcss"
    ]
  }
}

nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: false },
  css: ["~/assets/styles/css/main.css"],
  vue: {
    compilerOptions: {
      isCustomElement: (tag) => tag.startsWith("swiper-"),
    },
  },
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
  modules: ["@nuxt/image"],
});

Even after installing the Sharp package in the project, the issue persists and the images cannot be loaded. It's worth mentioning that everything works fine on my local computer, but when deploying the project on an Ubuntu server, the problem arises. Are there any important steps to be taken on the server? What should I do to resolve this issue?

I have attempted to install the Sharp package and make changes to the Nuxt 3 configuration file, but none of these solutions have resolved the issue.


Solution

  • I found a solution. I had to use npm rebuild --arch=x64 --platform=linux --libc=musl sharp after installing the shark package to add linux binary files in production mode.