bug: 1.3.0 could not load the sharp module

[xxRockOnxx]

I'm not sure if this is a @nuxt/image, ipx, or sharp issue since updating to 1.3.0, @nuxt/image updates its ipx which also update its sharp.

Reproduction:

1.2.0 (Working): https://codesandbox.io/p/devbox/nuxt-image-1-2-0-build-output-8xnjr9
1.3.0 (Not working): https://codesandbox.io/p/devbox/nuxt-image-1-3-0-could-not-load-the-sharp-module-23zjtt

If needed, open a terminal in codesandbox to build and run it:

npm run build
node .output/server/index.mjs

You'll see that 1.3.0 does not load the image in public directory properly with an error:

{
    "error": {
        "message": "[500] [IPX_ERROR] Could not load the \"sharp\" module using the linux-x64 runtime\nPossible solutions:\n- Ensure optional dependencies can be installed:\n    npm install --include=optional sharp\n    yarn add sharp --ignore-engines\n- Ensure your package manager supports multi-platform installation:\n    See https://sharp.pixelplumbing.com/install#cross-platform\n- Add platform-specific dependencies:\n    npm install --os=linux --cpu=x64 sharp\n- Consult the installation documentation:\n    See https://sharp.pixelplumbing.com/install"
    }
}

[shynline]

+1

[ZTL-UwU]

For whatever reason it works in this almost exact environment.
https://codesandbox.io/p/devbox/in-dependencies-3qdqzf

[bernhardberger]

yeah, same here. After locking the package to 1.2.0 it works again.

[ZTL-UwU]

I've did some digging and found that for pnpm, turning on shamefully-hoist=true in .npmrc will work and shamefully-hoist=false will not. And npm works no matter what.

See:

• true: https://codesandbox.io/p/devbox/shamefully-hoist-true-26fgzm
• false: https://codesandbox.io/p/devbox/shamefully-hoist-false-qgjhsk

The reason can be as follows. In sharp it imported the runtime like such:

in https://github.com/lovell/sharp/blob/main/lib/sharp.js

const paths = [
  `../src/build/Release/sharp-${runtimePlatform}.node`,
  '../src/build/Release/sharp-wasm32.node',
  `@img/sharp-${runtimePlatform}/sharp.node`,
  '@img/sharp-wasm32/sharp.node'
];

let sharp;
const errors = [];
for (const path of paths) {
  try {
    sharp = require(path);
    break;
  } catch (err) {
    /* istanbul ignore next */
    errors.push(err);
  }
}

When shamefully-hoist=false, @img/sharp-xxx does not exist in node_modules/ any more. Instead it's in node_modules/.pnpm/@img+sharp-xxx.

Which afterwards it returns the topic error.

if (sharp) {
  module.exports = sharp;
} else {
  const [isLinux, isMacOs, isWindows] = ['linux', 'darwin', 'win32'].map(os => runtimePlatform.startsWith(os));

  const help = [`Could not load the "sharp" module using the ${runtimePlatform} runtime`];
  errors.forEach(err => {
    if (err.code !== 'MODULE_NOT_FOUND') {
      help.push(`${err.code}: ${err.message}`);
    }
  });

...

[Artem-Schander]

For me v1.2 doesn't work either. As far as i can tell it breaks related to ipx v3

yarn.lock

"@nuxt/image@^1.2.0":
  version "1.3.0"
  resolved "https://registry.yarnpkg.com/@nuxt/image/-/image-1.3.0.tgz#2ad1733a2a8fec873805452a7bf71fee4277e6af"
  integrity sha512-HoAvBImqRrAwCLhZe7IsRwUWvV0ZVqUKFE/GsT8Jo01NBEd+PXhhu2XgHKV+aasqPXdeaQjhL43CSIwuNEwG1w==
  dependencies:
    "@nuxt/kit" "^3.9.2"
    consola "^3.2.3"
    defu "^6.1.4"
    h3 "^1.10.0"
    image-meta "^0.2.0"
    node-fetch-native "^1.6.1"
    ohash "^1.1.3"
    pathe "^1.1.2"
    std-env "^3.7.0"
    ufo "^1.3.2"
  optionalDependencies:
    ipx "^3.0.0"
    
ipx@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/ipx/-/ipx-3.0.0.tgz#9a38aa104bf69a949b1996bcad0d42f58a18d955"
  integrity sha512-hE/WwWsNZ2nlNpRUc8ri7rqLlBgMBp3kTuwbvfseO32e9kNzfvj05sNwdf2/7P/M3XOKAGc1RP8e/iQzYz/thA==
  dependencies:
    "@fastify/accept-negotiator" "^1.1.0"
    citty "^0.1.5"
    consola "^3.2.3"
    defu "^6.1.4"
    destr "^2.0.2"
    etag "^1.8.1"
    h3 "^1.10.0"
    image-meta "^0.2.0"
    listhen "^1.5.6"
    ofetch "^1.3.3"
    pathe "^1.1.2"
    sharp "^0.33.1"
    svgo "^3.2.0"
    ufo "^1.3.2"
    unstorage "^1.10.1"
    xss "^1.0.14"

[bernhardberger]

Yeah, ipx 3.0 + sharp 0.33 = bad.

Tried pinning sharp to 0.32 - still broken.

Only downgrading back to nuxt/image 1.2.x resolves it (which resolves to ipx 2.x and sharp 0.32)

[vjanoch]

@Artem-Schander your lock file still shows version "1.3.0". I assume that your package.json contains "@nuxt/image": "^1.2.0",. Using ^ as a prefix for the version will install the latest minor version.

You will have to add "@nuxt/image": "1.2.0", to stick to the desired version.

[Ben-VP]

Even downgrading my Nuxt to 3.9.1 and Nuxt Image to 1.2.0 I'm still getting the same error.

I'm on an M1 Mac, if that makes a difference.

[Artem-Schander]

@Artem-Schander your lock file still shows version "1.3.0". I assume that your package.json contains "@nuxt/image": "^1.2.0",. Using ^ as a prefix for the version will install the latest minor version.

You will have to add "@nuxt/image": "1.2.0", to stick to the desired version.

you're right. should have noticed myself. sorry for the noise.

[agracia-foticos]

Same issue

[oemer-aran]

@nuxt/image 1.3.0 also includes an update to ipx 3.0.0

I reverted that update with a yarn resolution and it works again:

{
 // ...
  "packageManager": "[email protected]",
  "resolutions": {
    "@nuxt/image/ipx": "^2.0.2",
  }
}

Here is the commit that did the update for 1.3.0: 0a5974b

[zavvla]

Hmm.. I'm facing the same issue …

Edit: After reading the previous comments, finally this can be temporarily fixed by downgrading to 1.2.0

Unfortunately, it didn't help me... in fact, it's a pity that the minor version completely disables the library..

[julioglobal100]

I'm having same issue

I'm using Nuxt 2
I'm tried put in package json "@nuxt/image": "0.7.1" and "sharp": "0.32.6"

Any solution?

[riobahtiar]

@Artem-Schander your lock file still shows version "1.3.0". I assume that your package.json contains "@nuxt/image": "^1.2.0",. Using ^ as a prefix for the version will install the latest minor version.

You will have to add "@nuxt/image": "1.2.0", to stick to the desired version.

Hi @zavvla, please follow this comment. so just use "1.2.0", dont use prefix ^

[manniL]

Hey everyone! We are aware of the recent issues. The problem is how sharp bundles binaries for various platforms, especially causing issues when the prod environment is different than the dev/build environment.

[riddla]

We are using yarn v1 and falling back to [email protected] works as a temporary fix in our projects:

"resolutions": {
  "sharp": "0.32.6"
}

This mechanism also exists for npm via overrides (untested):

"overrides": {
  "sharp": "0.32.6"
}

[ThePlastic]

I'm facing the same issue on a Apple M1

In my case the issue was only when I run the app on the server, if I do

`npm run build

node .output/server/index.mjs`

everything works fine, the problem begins when I upload the build on a Centos9 and run it with PM2, there I get the:

{ "error": { "message": "[500] [IPX_ERROR] Could not load the \"sharp\" module using the linux-x64 runtime\nPossible solutions:\n- Ensure optional dependencies can be installed:\n npm install --include=optional sharp\n yarn add sharp --ignore-engines\n- Ensure your package manager supports multi-platform installation:\n See https://sharp.pixelplumbing.com/install#cross-platform\n- Add platform-specific dependencies:\n npm install --os=linux --cpu=x64 sharp\n- Consult the installation documentation:\n See https://sharp.pixelplumbing.com/install" } }

The only thing that changed something a bit was to put "@nuxt/image": "1.2.0" on my package.json dependencies.

On my local machine everything still run smoothly, but if I upload the build on the server the error now is:

{"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- /usr/share/nginx/html/default/public/frontend/server/node_modules/sharp/lib/sharp.js\n- /usr/share/nginx/html/default/public/frontend/server/node_modules/sharp/lib/constructor.js\n- /usr/share/nginx/html/default/public/frontend/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"}}

[manniL]

@gorkie and others

Please refrain from posting comments that don't add additional context like "+1", "me too" or "bump". Instead, just upvote the issue through reactions or provide additional context like a reproduction, a new scenario where it happens or anything else that helps resolving the issue.

[ThePlastic]

I'm stuck with this, I'm developing from an Apple M1 so an ARM, to a linux/amd64 environment, if I downgrade to 1.2 I still get the Cannot find module '../build/Release/sharp-linux-x64.node error.
My only workaround is not using @nuxt/image at all.

Until a fix arrives, does anyone know a valid workaround for my usecase?

[Ben-VP]

I'm stuck with this, I'm developing from an Apple M1 so an ARM, to a linux/amd64 environment, if I downgrade to 1.2 I still get the Cannot find module '../build/Release/sharp-linux-x64.node error. My only workaround is not using @nuxt/image at all.

Until a fix arrives, does anyone know a valid workaround for my usecase?

@ThePlastic I had to restart my M1 Mac after downgrading to get this to work again.

[ThePlastic]

@ThePlastic I had to restart my M1 Mac after downgrading to get this to work again.

Tried, no result.

[OTTIN-T]

Same problem with Nuxt 3.10 and Nuxt/Image 1.3. But the problem only appears locally, my project is deployed on Vercel and everything works. By switching back to version 1.2, the problem disappears...
I'm on WIn11 22H2 build 22621.3007, if this helps.

[ThePlastic]

Same problem with Nuxt 3.10 and Nuxt/Image 1.3. But the problem only appears locally, my project is deployed on Vercel and everything works. By switching back to version 1.2, the problem disappears... I'm on WIn11 22H2 build 22621.3007, if this helps.

I believed the same but was just a matter of npm cache on the production environment, once I made a clean deploy the problem arise in production too

[rherwig]

I also reproduced this in a docker using node-alpine:20, running on Ubuntu 20. Downgrading to 1.2.0 did not solve the issue.

EDIT: In my case, I was able to fix it, by re-installing sharp (rebuild would do as well), since I was developing on Windows and Docker uses Linux.

RUN rm -rf server/node_modules/sharp && npm --prefix server install sharp

[Fanreza]

downgrading to 1.2.0 got no problem with me deploying to linux with docker, but when deploying with multi stage build and distroless image, it showing error, here my Dockerfile

FROM node:18-alpine as build

WORKDIR /app

COPY package*.json /app

RUN npm install

COPY . /app

RUN npm run build

FROM gcr.io/distroless/nodejs:18 as prod

WORKDIR /app

COPY --from=build /app/.output /app/.output

CMD ["/app/.output/server/index.mjs"]

[giticon]

this worked for me

# yarn v1 (maintenance mode)
yarn add sharp --ignore-engines

windows 11x64
node 20.9.0
yarn 1.22.19
nuxt 3.10.1
@nuxt/image 1.3.0

[raphaelbernhart]

I can confirm that a downgrade of @nuxt/image to v1.2.0 worked for me 👍🏼

[MrDeivi]

It works for me without have to downgrade @nuxt/image package to v1.2.0, just pinning sharp to 0.32.6 and using Node v20.3.0

to pin sharp in package.json if you are using pnpm:

"resolutions": {
  "sharp": "0.32.6"
}

or using npm:

"overrides": {
  "sharp": "0.32.6"
}

[bryanjuho]

For me this only happened in Docker environment. Using non-slim node images resolved our issue.

[Sovai]

It works for me without have to downgrade @nuxt/image package to v1.2.0, just pinning sharp to 0.32.6 and using Node v20.3.0

to pin sharp in package.json if you are using pnpm:

"resolutions": {
  "sharp": "0.32.6"
}

or using npm:

"overrides": {
  "sharp": "0.32.6"
}

this won't get 500 but stuck at lazy image thumbnail (blur)

[AngeloSchulerPiletti]

If you are deploying in Vercel. Try just setting provider: 'vercel' in your configs.

image: {
    provider: 'vercel',
    domains: [process.env.NUXT_IMAGE_API_DOMAIN || 'devdk-relaunch.spotwerbung.ch'],
    quality: 100,
    screens: {
      'sm': 320,
      'md': 640,
      'lg': 1024,
      'xl': 1440,
      '2xl': 1920,
    }
  }

[Oscar2av]

Environment:
[email protected]
[email protected]

@nuxt/[email protected] and @nuxt/[email protected] have issues if the image is PNG format and if the background is transparent. It generates the following error:

{ "error": { "message": "[500] [IPX_ERROR] Could not load the \"sharp\" module using the linux-x64 runtime\nPossible solutions:\n- Ensure optional dependencies can be installed:\n npm install --include=optional sharp\n yarn add sharp --ignore-engines\n- Ensure your package manager supports multi-platform installation:\n See https://sharp.pixelplumbing.com/install#cross-platform\n- Add platform-specific dependencies:\n npm install --os=linux --cpu=x64 sharp\n- Consult the installation documentation:\n See https://sharp.pixelplumbing.com/install" } }

Firstly, I thought the problem was appearing as far as I build the project locally and then send the files via FTP to the server. But this is not the case. The problem is in the library itself.

[Kheuval]

Hello,

My environment :
[email protected]

It is still a problem with @nuxt/image 1.5.0, downgrading to 1.2.0 fixed the issue for me.

Hope it helps :)

[danielroe]

This should have been resolved in #1265.

If it is not, for you, please open a new issue with a reproduction.

Also see #1257 to track the issue before we next upgrade ipx.

[SWEET1S]

Nothing works for me

OS: Ubuntu 22.04
NodeJs: 20.3.0

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" }, "dependencies": { "@nuxt/image": "1.2.0", "@pinia/nuxt": "^0.5.1", "bootstrap": "^5.3.3", "gsap": "^3.12.5", "path": "^0.12.7", "pinia": "^2.1.7", "sass": "^1.71.1", "scss": "^0.2.4", "vue": "^3.4.21", "vue-router": "^4.3.0" }, "devDependencies": { "@nuxtjs/google-fonts": "^3.1.3", "@nuxtjs/sitemap": "^5.1.2", "nuxt": "^3.11.2", "nuxt-icon": "^0.6.9", "nuxt-security": "^1.2.2", "typescript": "^5.4.2", "vue-tsc": "^1.8.27" }, "overrides": { "sharp": "0.32.6" } }