nuxt / nuxt/image

Cloudflare with `pnpm run generate` works, but not `pnpm run build`

Open
#2,164 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
1.5k
Forks
331
Avg merge
19h 52m
Merged PRs (30d)
9

Description

Hi,
I'm deploying this repo to Cloudflare pages and I noticed sudently that my images were not the correct size. I think this is because we changed from SSG to SSR since our website is connected to a backend, and we like to have the data up-to-date without regenerating and redeploying the website.

Local using pnpm run dev
Local using pnpm run build && node .output/server/index.mjs
Local using pnpm run generate && npx serve .output/public
Cloudfalre using pnpm run generate

Image

Cloudflare using pnpm run build 🚫

Image

As you can see, when using pnpm run build on Cloudflare pages, the URL are going to the CMS (prismic) and are not processed.
Am I missunderstanding something ? Because it works in all mode on my local machine (dev/build/generate).

I'm using the Cloudflare git integration to deploy:

Image

And this is my Cloudflare config (default):

Image

My nuxt.config.js for nuxt/image, you can see the complete file in the linked repo above:

export default defineNuxtConfig({
    ...
    image: {
        provider: 'ipx',
        domains: ['static.swapcard.com', 'images.prismic.io', 'interface-qc.cdn.prismic.io'],
        quality: 90,
        format: ['webp'],
    },
    ...
});

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with nuxt.config.js and reproduce the difference between pnpm run generate and pnpm run build on Cloudflare Pages. Compare the image URLs produced in .output/public and by .output/server/index.mjs, then verify that the build deployment processes the configured image domains instead of linking directly to Prismic. Done means optimized image URLs work in the Cloudflare build deployment as they do locally.

Written by the indexing model from the issue text.

Assessment

Tech stack
nuxt
Domain
cloud, frontend, performance
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.