Nuxt build failed on Cloudflare Pages. Cannot resolve "@img/sharp-wasm32/versions".

[marcbejar]

Possible bug

Is this a possible bug in a feature of sharp, unrelated to installation?

• [x] Running npm install sharp completes without error.
• [X] Running node -e "require('sharp')" completes without error.

Are you using the latest version of sharp?

• [X] I am using the latest version of sharp as reported by npm view sharp dist-tags.latest.

What is the output of running npx envinfo --binaries --system --npmPackages=sharp --npmGlobalPackages=sharp?

Cloudflare system properties can be found here, I'm using V2 https://developers.cloudflare.com/pages/configuration/language-support-and-tools/#supported-languages-and-tools

What are the steps to reproduce?

1. Create a nuxt app with npx nuxi@latest init <project-name> 2. Add the sharp package with npm install sharp (also tried npm install --cpu=x64 --os=linux --libc=glibc sharp)
2. npm run dev works
3. npm run build works
4. Deploy to Cloudflare Pages

What is the expected behaviour?

Project deployed to cloudflare pages correctly.

Please provide a minimal, standalone code sample, without other dependencies, that demonstrates this problem

Cloudflare build logs:

2024-05-22T23:15:10.918209Z [info] [nitro] Building Nuxt Nitro server (preset: cloudflare-pages) 2024-05-22T23:15:15.338888Z [error] [nitro] Error: Cannot resolve "@img/sharp-wasm32/versions" from "/opt/buildhome/repo/node_modules/sharp/lib/utility.js" and externals are not allowed! 2024-05-22T23:15:15.339289Z 2024-05-22T23:15:15.33952Z 2024-05-22T23:15:15.33976Z undefined 2024-05-22T23:15:15.341917Z [error] Cannot resolve "@img/sharp-wasm32/versions" from "/opt/buildhome/repo/node_modules/sharp/lib/utility.js" and externals are not allowed! 2024-05-22T23:15:15.34213Z at Object.resolveId (node_modules/nitropack/dist/nitro.mjs:1966:17) 2024-05-22T23:15:15.342262Z at async PluginDriver.hookFirstAndGetPlugin (node_modules/rollup/dist/es/shared/node-entry.js:19674:28) 2024-05-22T23:15:15.342382Z at async resolveId (node_modules/rollup/dist/es/shared/node-entry.js:18355:26) 2024-05-22T23:15:15.3425Z at async ModuleLoader.resolveId (node_modules/rollup/dist/es/shared/node-entry.js:18758:15) 2024-05-22T23:15:15.342608Z at async node_modules/@rollup/plugin-commonjs/dist/es/index.js:785:16 2024-05-22T23:15:15.342721Z at async Promise.all (index 5) 2024-05-22T23:15:15.342837Z at async node_modules/@rollup/plugin-commonjs/dist/es/index.js:777:32 2024-05-22T23:15:15.34298Z at async rewriteRequireExpressionsAndGetImportBlock (node_modules/@rollup/plugin-commonjs/dist/es/index.js:1354:28) 2024-05-22T23:15:15.343127Z at async transformCommonjs (node_modules/@rollup/plugin-commonjs/dist/es/index.js:1933:23) 2024-05-22T23:15:15.343243Z at async transform (node_modules/rollup/dist/es/shared/node-entry.js:18676:16) 2024-05-22T23:15:15.343346Z at async ModuleLoader.addModuleSource (node_modules/rollup/dist/es/shared/node-entry.js:18892:36) 2024-05-22T23:15:15.343449Z 2024-05-22T23:15:15.343571Z [error] Cannot resolve "@img/sharp-wasm32/versions" from "/opt/buildhome/repo/node_modules/sharp/lib/utility.js" and externals are not allowed! 2024-05-22T23:15:15.422188Z Failed: Error while executing user command. Exited with error code: 1 2024-05-22T23:15:15.434278Z Failed: build command exited with code: 1 2024-05-22T23:15:16.653163Z Failed: error occurred while running build command

As the log says, it cant resolve @img/sharp-wasm32/versions, I have tried to add the @img/sharp-wasm32 package on the optionalDependencies, but it also fails.

The log also is salying that externals are not allowed, but as it says on the docs, I have tried to add the following code on the nuxt.config.ts:

vite:{
    build: {
      rollupOptions: {
        external: ['sharp']
      }
    }
  },

I also tried diferent versions of the package. The last working version is the 0.32.6 I'm doing something wrong? Im completely lost right now.

[lovell]

You've probably run into https://github.com/unjs/nitro/issues/1821

2024-05-22T23:15:10.918209Z [info] [nitro] Building Nuxt Nitro server (preset: cloudflare-pages)

My understanding of Cloudflare Pages build environment is that it runs on Node.js so you might be able to use Nuxt's default preset rather than cloudflare-pages and therefore avoid Nitro's require-patching logic.

[marcbejar]

You are correct, if I change the Nitro preset to anything except the cloudflare one the build is done normally. Thanks for your reply. I close this understanding that this is a Nitro error and not a sharp one.

[clopezpro]

Probablemente te hayas encontrado con unjs/nitro#1821

2024-05-22T23:15:10.918209Z [info] [nitro] Creación de servidor Nuxt Nitro (ajuste predeterminado: cloudflare-pages)

Según tengo entendido, el entorno de creación de páginas de Cloudflare se ejecuta en Node.js, por lo que es posible que puedas usar el ajuste predeterminado de Nuxt en lugar de hacerlo cloudflare-pagesy, por lo tanto, evitar la lógica de parcheo de Nitro require.

Thanks my friend use nuxt.config.ts and

Success: Your site was deployed! --

  nitro: {
    preset: 'node-server',
  },

[Amar-Gill]

I was able to deploy my nuxt app onto cloudflare pages with the following packages installed:

    "@img/sharp-libvips-dev": "^1.0.6",
    "@img/sharp-wasm32": "^0.33.5",
    "sharp": "^0.33.5",

I also have nodejs_compat flag set into my cloudflare pages project (for a different dependency) but not sure if it will impact it or not.

[Yandall]

Hi, I'm trying to deploy a nuxt app in cloudflare pages but I'm having problems, @Amar-Gill could you show me how you did it?

[HugoFollic]

Hi @Yandall did you find a solution ? I'm using NuxtHub and face the same issue

[Amar-Gill]

@Yandall apologies I was a bit premature. The app was deployed but when running the server code that used sharp it threw errors. So I guess technically it didn't deploy.

I'm using jimp instead and it works well for my use case.