Build fails when `@sveltejs/enhanced-img` was installed on ARM CPU but the current environment is x86

[fmaclen]

Describe the bug

I'm trying to deploy a project with @sveltejs/enhanced-img:0.3.0 to Cloudflare. I ran npm i -D @sveltejs/enhanced-img on a Mac with an ARM-based architecture.

When I deploy to Cloudflare (their architecture is x86) and I get the following error during the SvelteKit build process:

16:11:36.861 | npm ERR! command failed
-- | --
16:11:36.866 | npm ERR! command sh -c node postinstall.js
16:11:36.872 | npm ERR! Error: Cannot find module @rollup/rollup-linux-x64-gnu. npm has a bug related to optional dependencies (https://github.com/npm/cli/issues/4828). Please try `npm i` again after removing both package-lock.json and node_modules directory.
16:11:36.874 | npm ERR!     at requireWithFriendlyError (/opt/buildhome/repo/node_modules/rollup/dist/native.js:59:9)
16:11:36.880 | npm ERR!     at Object.<anonymous> (/opt/buildhome/repo/node_modules/rollup/dist/native.js:68:76)
16:11:36.885 | npm ERR!     ... 3 lines matching cause stack trace ...
16:11:36.889 | npm ERR!     at Module._load (node:internal/modules/cjs/loader:938:12)
16:11:36.895 | npm ERR!     at cjsLoader (node:internal/modules/esm/translators:284:17)
16:11:36.900 | npm ERR!     at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:234:7)
16:11:36.906 | npm ERR!     at ModuleJob.run (node:internal/modules/esm/module_job:217:25)
16:11:36.910 | npm ERR!     at async ModuleLoader.import (node:internal/modules/esm/loader:316:24) {
16:11:36.916 | npm ERR!   [cause]: Error: Cannot find module '@rollup/rollup-linux-x64-gnu'

The workaround I found is manually setting the x86 variant as an optional dependency in package.json.

Also, it's not just @rollup/rollup-linux-x64-gnu, it's these 3:

"optionalDependencies": {
    "@rollup/rollup-linux-x64-gnu": "^4.0.0",
    "@cloudflare/workerd-linux-64": "1.20240701.0",
    "@img/sharp-linux-x64": "0.33.4"
},

Reproduction

https://github.com/fmaclen/cloudflare-adapter-dependencies/tree/enhanced-img-issue

Note: the .node-version was intentionally set because of this other issue related to Cloudflare: https://github.com/sveltejs/kit/issues/12464

Logs

No response

System Info

System:
    OS: macOS 14.5
    CPU: (16) arm64 Apple M3
    Memory: 14.90 GB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.9.0 - /usr/local/bin/node
    npm: 10.1.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 124.0.6367.208
    Safari: 17.5
  npmPackages:
    @sveltejs/adapter-auto: ^3.0.0 => 3.2.2 
    @sveltejs/adapter-cloudflare: ^4.6.1 => 4.6.1 
    @sveltejs/enhanced-img: ^0.3.0 => 0.3.0 
    @sveltejs/kit: ^2.0.0 => 2.5.18 
    @sveltejs/vite-plugin-svelte: ^3.0.0 => 3.1.1 
    svelte: ^4.2.7 => 4.2.18 
    vite: ^5.0.3 => 5.3.3

Severity

serious, but I can work around it

Additional Information

No response

[Conduitry]

I don't know that there's anything we can do about this. If your lockfile doesn't have the binary that Rollup is going to choose to use on Cloudflare, then it's just not going to get installed. I do wonder whether you're running into the npm bug mentioned in the error message. Have you tried the workaround mentioned in it?

[fmaclen]

I do wonder whether you're running into the npm bug mentioned in the error message.

@Conduitry Yeah I created that issue, but I think it's unrelated to the problem I'm describing here.

I understand that we may not be able to do much about the underlying issue but, I was thinking it could be helpful to add a note in the documentation for enhanced-img that you need to manually set the optional libraries when working with multiple CPU architectures.

Primarily because this means that if you develop on macOS (or any other arm-based system), run SvelteKit's create-app script, install enhanced-img and then try to deploy to Cloudflare (and likely other hosting providers too) your build will break with this error.

[Conduitry]

You don't have to manually set the optional libraries, though, I don't think. You just need to install without a node_modules directory present. When I cloned your branch, deleted package-lock.jsonm and ran npm install (with no pre-existing node_modules), a bunch of new platform-specific optional dependencies were added to the lockfile.

I'm -0 about documenting a bug in npm that users will likely already have another way of finding out about. (I think an error message in a build is also more likely to be read by users than a note in the docs, anyway.) (Also this issue is not specific to the enhanced-img package.) I could be convinced otherwise by other maintainers. But I don't think we want to suggest to users that they manually add optional dependencies to their package.json. The package.json is fine - the issue is with the package-lock.json that npm generates when there is already a node_modules present and it is missing some optional platform-specific dependencies.

[jrmoynihan]

You don't have to manually set the optional libraries, though, I don't think. You just need to install without a node_modules directory present. When I cloned your branch, deleted package-lock.jsonm and ran npm install (with no pre-existing node_modules), a bunch of new platform-specific optional dependencies were added to the lockfile.

I'm -0 about documenting a bug in npm that users will likely already have another way of finding out about. (I think an error message in a build is also more likely to be read by users than a note in the docs, anyway.) (Also this issue is not specific to the enhanced-img package.) I could be convinced otherwise by other maintainers. But I don't think we want to suggest to users that they manually add optional dependencies to their package.json. The package.json is fine - the issue is with the package-lock.json that npm generates when there is already a node_modules present and it is missing some optional platform-specific dependencies.

Not sure if I had the exact same issue (my dev server crashed after adding the enhanced-img package) but deleting my node_modules folder and re-installing did fix it.

Thanks for the tip!