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.jsn- /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.
2
Answers
I found a solution. I had to use
npm rebuild --arch=x64 --platform=linux --libc=musl sharp
after installing theshark
package to add linux binary files in production mode.This helped me (node v 20, using Docker)