fix(vercel): Fix srcset generation not working on Vercel

[Princesseuh]

Changes

We were wrongfully not including the hooks for srcset generation in the Vercel service. This fixes that. I'll note that it's still a little bit wonky on the user side, because they need to make sure that the dimensions they're outputting are part of their Vercel config, but that's normal for Vercel.

Fixes #10623

Testing

Tested manually by deploying to Vercel.

Docs

N/A

[changeset-bot]

🦋 Changeset detected

Latest commit: 5abd122

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[Princesseuh]

!preview vercel-src

[github-actions]

Snapshots have been released for the following packages:

• @astrojs/vercel@experimental--vercel-src

Publish Log

🦋  warn ===============================IMPORTANT!===============================
🦋  warn Packages will be released under the experimental--vercel-src tag
🦋  warn ----------------------------------------------------------------------
🦋  info npm info astro
🦋  info npm info @astrojs/prism
🦋  info npm info @astrojs/rss
🦋  info npm info create-astro
🦋  info npm info @astrojs/db
🦋  info npm info @astrojs/alpinejs
🦋  info npm info @astrojs/lit
🦋  info npm info @astrojs/markdoc
🦋  info npm info @astrojs/mdx
🦋  info npm info @astrojs/node
🦋  info npm info @astrojs/partytown
🦋  info npm info @astrojs/preact
🦋  info npm info @astrojs/react
🦋  info npm info @astrojs/sitemap
🦋  info npm info @astrojs/solid-js
🦋  info npm info @astrojs/svelte
🦋  info npm info @astrojs/tailwind
🦋  info npm info @astrojs/vercel
🦋  info npm info @astrojs/vue
🦋  info npm info @astrojs/internal-helpers
🦋  info npm info @astrojs/markdown-remark
🦋  info npm info @astrojs/telemetry
🦋  info npm info @astrojs/underscore-redirects
🦋  info npm info @astrojs/upgrade
🦋  warn astro is not being published because version 4.6.0 is already published on npm
🦋  warn @astrojs/prism is not being published because version 3.1.0 is already published on npm
🦋  warn @astrojs/rss is not being published because version 4.0.5 is already published on npm
🦋  warn create-astro is not being published because version 4.8.0 is already published on npm
🦋  warn @astrojs/db is not being published because version 0.10.3 is already published on npm
🦋  warn @astrojs/alpinejs is not being published because version 0.4.0 is already published on npm
🦋  warn @astrojs/lit is not being published because version 4.0.1 is already published on npm
🦋  warn @astrojs/markdoc is not being published because version 0.10.0 is already published on npm
🦋  warn @astrojs/mdx is not being published because version 2.3.0 is already published on npm
🦋  warn @astrojs/node is not being published because version 8.2.5 is already published on npm
🦋  warn @astrojs/partytown is not being published because version 2.0.4 is already published on npm
🦋  warn @astrojs/preact is not being published because version 3.2.0 is already published on npm
🦋  warn @astrojs/react is not being published because version 3.3.0 is already published on npm
🦋  warn @astrojs/sitemap is not being published because version 3.1.2 is already published on npm
🦋  warn @astrojs/solid-js is not being published because version 4.1.0 is already published on npm
🦋  warn @astrojs/svelte is not being published because version 5.4.0 is already published on npm
🦋  warn @astrojs/tailwind is not being published because version 5.1.0 is already published on npm
🦋  info @astrojs/vercel is being published because our local version (0.0.0-vercel-src-20240411132931) has not been published on npm
🦋  warn @astrojs/vue is not being published because version 4.1.0 is already published on npm
🦋  warn @astrojs/internal-helpers is not being published because version 0.4.0 is already published on npm
🦋  warn @astrojs/markdown-remark is not being published because version 5.1.0 is already published on npm
🦋  warn @astrojs/telemetry is not being published because version 3.1.0 is already published on npm
🦋  warn @astrojs/underscore-redirects is not being published because version 0.3.3 is already published on npm
🦋  warn @astrojs/upgrade is not being published because version 0.3.0 is already published on npm
🦋  info Publishing "@astrojs/vercel" at "0.0.0-vercel-src-20240411132931"
🦋  success packages published successfully:
🦋  @astrojs/[email protected]
🦋  Creating git tag...
🦋  New tag:  @astrojs/[email protected]

Build Log

> [email protected] build /home/runner/work/astro/astro
> turbo run build --filter=astro --filter=create-astro --filter="@astrojs/*" --filter="@benchmark/*"

• Packages in scope: @astrojs/alpinejs, @astrojs/cloudflare, @astrojs/db, @astrojs/internal-helpers, @astrojs/lit, @astrojs/markdoc, @astrojs/markdown-remark, @astrojs/mdx, @astrojs/netlify, @astrojs/node, @astrojs/partytown, @astrojs/preact, @astrojs/prism, @astrojs/react, @astrojs/rss, @astrojs/sitemap, @astrojs/solid-js, @astrojs/svelte, @astrojs/tailwind, @astrojs/telemetry, @astrojs/underscore-redirects, @astrojs/upgrade, @astrojs/vercel, @astrojs/vue, @benchmark/timer, astro, create-astro
• Running build in 27 packages
• Remote caching enabled
::group::@astrojs/internal-helpers:build
cache hit, suppressing logs da82f9152f39065d
::endgroup::
::group::@astrojs/prism:build
cache miss, executing e61ce24fcd0cfb9c

> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/astro-prism
> astro-scripts build "src/**/*.ts" && tsc -p ./tsconfig.json

::endgroup::
::group::@astrojs/telemetry:build
cache miss, executing 349162f8a5154734

> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/telemetry
> astro-scripts build "src/**/*.ts" && tsc

::endgroup::
::group::@astrojs/upgrade:build
cache miss, executing 76169798a57287d9

> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/upgrade
> astro-scripts build "src/index.ts" --bundle && tsc

::endgroup::
::group::create-astro:build
cache miss, executing 5130f60315f269d4

> [email protected] build /home/runner/work/astro/astro/packages/create-astro
> astro-scripts build "src/index.ts" --bundle && tsc

::endgroup::
::group::@astrojs/markdown-remark:build
cache miss, executing 7b10e4281270ac01

> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/markdown/remark
> astro-scripts build "src/**/*.ts" && tsc -p tsconfig.json

::endgroup::
::group::astro:build
cache miss, executing f9c827b43103afad

> [email protected] build /home/runner/work/astro/astro/packages/astro
> pnpm run prebuild && astro-scripts build "src/**/*.{ts,js}" && tsc && pnpm run postbuild


> [email protected] prebuild /home/runner/work/astro/astro/packages/astro
> astro-scripts prebuild --to-string "src/runtime/server/astro-island.ts" "src/runtime/client/{idle,load,media,only,visible}.ts"


> [email protected] postbuild /home/runner/work/astro/astro/packages/astro
> astro-scripts copy "src/**/*.astro" && astro-scripts copy "src/**/*.wasm"

::endgroup::
::group::@astrojs/underscore-redirects:build
cache miss, executing 15dbf2f2f4f4ba71

> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/underscore-redirects
> astro-scripts build "src/**/*.ts" && tsc -p tsconfig.json

::endgroup::
::group::@astrojs/alpinejs:build
cache miss, executing 5ee84a92fceb5e19

> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/integrations/alpinejs
> astro-scripts build "src/**/*.ts" && tsc

::endgroup::
::group::@astrojs/partytown:build
cache miss, executing a7e88fdd0b69dfac

> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/integrations/partytown
> astro-scripts build "src/**/*.ts" && tsc

::endgroup::
::group::@astrojs/node:build
cache miss, executing a60ab0ec6ff40d44

> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/integrations/node
> astro-scripts build "src/**/*.ts" && tsc

::endgroup::
::group::@astrojs/solid-js:build
cache miss, executing 9bdc555e084698f9

> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/integrations/solid
> astro-scripts build "src/**/*.ts" && tsc

::endgroup::
::group::@astrojs/preact:build
cache miss, executing 8ff65d24d782cf51

> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/integrations/preact
> astro-scripts build "src/**/*.ts" && tsc

::endgroup::
::group::@astrojs/vercel:build
cache miss, executing 49c3bee08366f5f8

> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/integrations/vercel
> astro-scripts build "src/**/*.ts" && tsc

::endgroup::
::group::@astrojs/markdoc:build
cache miss, executing b17920736e4f5ed1

> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/integrations/markdoc
> astro-scripts build "src/**/*.ts" && tsc

::endgroup::
::group::@astrojs/vue:build
cache miss, executing 2f0ee17cb81a0f3b

> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/integrations/vue
> astro-scripts build "src/index.ts" && astro-scripts build "src/editor.cts" --force-cjs --no-clean-dist && tsc

::endgroup::
::group::@astrojs/tailwind:build
cache miss, executing 12a9ed81ae6c3d77

> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/integrations/tailwind
> astro-scripts build "src/**/*.ts" && tsc

::endgroup::
::group::@astrojs/react:build
cache miss, executing 856505b0d01fde42

> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/integrations/react
> astro-scripts build "src/**/*.ts" && tsc

::endgroup::
::group::@astrojs/rss:build
cache miss, executing 5144ed127f438897

> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/astro-rss
> astro-scripts build "src/**/*.ts" && tsc

::endgroup::
::group::@benchmark/timer:build
cache miss, executing cdd3230fbe84e172

> @benchmark/[email protected] build /home/runner/work/astro/astro/benchmark/packages/timer
> astro-scripts build "src/**/*.ts" && tsc

::endgroup::
::group::@astrojs/lit:build
cache miss, executing 61c49351d5e01dbc

> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/integrations/lit
> astro-scripts build "src/**/*.ts" && tsc

::endgroup::
::group::@astrojs/mdx:build
cache miss, executing 4b56aad7021979e3

> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/integrations/mdx
> astro-scripts build "src/**/*.ts" && tsc

::endgroup::
::group::@astrojs/sitemap:build
cache miss, executing 0a3fedbf2dd1c4f7

> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/integrations/sitemap
> astro-scripts build "src/**/*.ts" && tsc

::endgroup::
::group::@astrojs/svelte:build
cache miss, executing 2edf748fea5e0dd3

> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/integrations/svelte
> astro-scripts build "src/index.ts" && astro-scripts build "src/editor.cts" --force-cjs --no-clean-dist && tsc

::endgroup::
::group::@astrojs/db:build
cache miss, executing e8531623f1571322

> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/db
> astro-scripts build "src/**/*.ts" && tsc && pnpm types:virtual


> @astrojs/[email protected] types:virtual /home/runner/work/astro/astro/packages/db
> tsc -p ./tsconfig.virtual.json

::endgroup::

 Tasks:    25 successful, 25 total
Cached:    1 cached, 25 total
  Time:    52.946s 

[pijusz]

I've tried with newest updates,

"@astrojs/vercel": "^7.5.3",
"astro": "^4.6.1",

doesn't seem to work still, rollbacked to

"@astrojs/vercel": "~7.3.6"

that one works.

[Princesseuh]

I've tried with newest updates,

"@astrojs/vercel": "^7.5.3",
"astro": "^4.6.1",

doesn't seem to work still, rollbacked to

"@astrojs/vercel": "~7.3.6"

that one works.

7.3.6 did not have the code at all to handle srcset. Your issue might be unrelated to this

[pijusz]

You are right, it was not even using densities. So it seems like srcset doesn't work for me for Image Components.

[pijusz]

My current Vercel Config:

  adapter: vercel({
    edgeMiddleware: false,
    functionPerRoute: false,
    webAnalytics: {
      enabled: true,
    },
    speedInsights: {
      enabled: true,
    },
    imageService: true,
    imagesConfig: {
      sizes: [80, 320, 640, 768, 1024, 1280, 1920, 2580],
      formats: ["image/avif", "image/webp"],
      minimumCacheTTL: 60,
      domains: ["cdn.sanity.io"],
    },
  }),

[Princesseuh]

I would suggest creating a new issue with a reproduction.

[pijusz]

Needed to add more "sizes", since each density is each new size.