Compatibility Issue with @nuxt/image on Apple M4 Chip (macOS 15.3.1)

[luzehe]

Description:

I am encountering an issue when using the @nuxt/image module on a device with an Apple M4 chip running macOS 15.3.1. The error occurs during runtime, indicating that the sharp module cannot be found. This issue does not occur on other platforms (e.g., Windows), suggesting a compatibility issue specific to the Apple M4 architecture. Here is the relevant code:

<template>
  <div>
    <NuxtImg src="/images/logo-w.png"></NuxtImg>
  </div>
</template>

Error Message

When running the Nuxt.js project with @nuxt/image, I receive the following error:

[500] [IPX_ERROR] 
Something went wrong installing the "sharp" module

Cannot find module '../build/Release/sharp-darwin-arm64v8.node'
Require stack:
- /path/to/project/node_modules/.pnpm/[email protected]/node_modules/sharp/lib/sharp.js
- /path/to/project/node_modules/.pnpm/[email protected]/node_modules/sharp/lib/constructor.js
- /path/to/project/node_modules/.pnpm/[email protected]/node_modules/sharp/lib/index.js

Environment

• Chip: Apple M4
• Operating System: macOS 15.3.1 (24D70)
• Node.js Version: v22.14.0
• Package Manager: [email protected]
• Nuxt.js Version: 3.15.4
• @nuxt/image Version: 1.9.0
• sharp Version: 0.32.6

Project Configuration

Here is the relevant part of my 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.9.0",
    "nuxt": "^3.15.4",
    "vue": "latest",
    "vue-router": "latest"
  },
  "packageManager": "[email protected]+sha512.6b849d0787d97f8f4e1f03a9b8ff8f038e79e153d6f11ae539ae7c435ff9e796df6a862c991502695c7f9e8fac8aeafc1ac5a8dab47e36148d183832d886dd52"
}

Steps to Reproduce

1. Set up a Nuxt.js project on a device with an Apple M4 chip running macOS 15.3.1.
2. Add and configure the @nuxt/image module.
3. Run the project using pnpm dev or npm run dev.
4. The error occurs when @nuxt/image tries to use the sharp module.

Possible Solutions Tried

• Reinstalled sharp with platform-specific flags:

  npm install --platform=darwin --arch=arm64 sharp

• Verified that sharp is installed correctly by running:

  npx sharp --version

• Checked the @nuxt/image documentation for any platform-specific configurations.

Additional Context

• The issue seems to be specific to the combination of @nuxt/image and the Apple M4 chip.
• The sharp module itself installs correctly, but @nuxt/image fails to use it properly on macOS ARM64 (Apple M4).

Request

Could you please investigate this compatibility issue? Is there a known workaround or fix for using @nuxt/image on devices with Apple M4 chips?

Thank you for your help!

---

[alexfriesen]

I had an similar problem. try to install "ipx": "^3.0.1"

[Vahagn-Zaqaryan]

I'm having the same issue on Apple M2 I just switched my project from npm to pnpm and the problem occurred.

Weirdly the fix suggested by @alexfriesen worked!

[alexfriesen]

I'm glad it worked.
The current version of @nuxt/image uses ipx version 2.x.x, which depends on sharp version 0.32.x.
If you upgrade ipx to version 3.x.x, sharp version 0.33.x is used.
sharp version 0.33.x had some big changes and seems to work better with macs

[heyflo]

Wow thank you @alexfriesen 🙏
I was scratching my head for 2 hours trying even the simplest version and I've found this issue.

This has to be indicated somewhere in the doc with a warning or even better if you could upgrade the dependency on ipx?

[alexfriesen]

The previous workaround won't work with the latest nuxt release.
Add this to your package.json:

  "resolutions": {
    "ipx": "^3.0.0"
  }

[lucpotage]

Thank you very much @alexfriesen!

[0PandaDEV]

I have the exact same issue. I did all the steps to fix it and now I get this [500] [IPX_ERROR] detectLibc.isNonGlibcLinuxSync is not a function

[zbf1999]

Thank you very much @alexfriesen!