Astro Qwik + Vercel issues on deployment

[Souvlaki42]

About two weeks ago I opened an issue explaining that I had my fair share of issues with this integration when deploying on Vercel: My previous issue. TLDR There I explained that my issue is that js files needed for interactive Qwik components don't load on the Vercel deployed site with SSR enabled. The recommendation was to upgrade both @qwikdev/astro and node js to latest, I was on holidays, it now doesn't work and the issue was marked completed. Here I am again. I was already on latest on the nodejs side and Vercel functions run on version 22 LTS by default now. Now the Vercel deployed failed with this errors:

[03:36:12.084] Running build in Washington, D.C., USA (East) – iad1
[03:36:12.175] Cloning github.com/Souvlaki42/element.al (Branch: main, Commit: a510a77)
[03:36:12.421] Cloning completed: 245.672ms
[03:36:14.378] Restored build cache from previous deployment (Ddnk7v4RdnsLWpJDzjYF628nsM3k)
[03:36:14.446] Running "vercel build"
[03:36:14.859] Vercel CLI 39.2.0
[03:36:15.492] Detected `pnpm-lock.yaml` version 9 generated by [email protected]
[03:36:15.500] Installing dependencies...
[03:36:16.269] Lockfile is up to date, resolution step is skipped
[03:36:16.479] Progress: resolved 1, reused 0, downloaded 0, added 0
[03:36:16.525] Packages: +46 -3
[03:36:16.526] ++++++++++++++++++++++++++++++++++++++++++++++---
[03:36:17.480] Progress: resolved 46, reused 0, downloaded 45, added 45
[03:36:18.053] Progress: resolved 46, reused 0, downloaded 46, added 46, done
[03:36:19.168] 
[03:36:19.168] dependencies:
[03:36:19.168] - @qwikdev/astro 0.6.3
[03:36:19.168] + @qwikdev/astro 0.7.7
[03:36:19.168] - astro 5.1.1
[03:36:19.168] + astro 5.1.2
[03:36:19.168] 
[03:36:19.177] Done in 3.5s
[03:36:19.216] Running "pnpm run build"
[03:36:19.726] 
[03:36:19.726] > [email protected] build /vercel/path0
[03:36:19.726] > astro build
[03:36:19.726] 
[03:36:20.902] �[2m1:36:20 AM�[22m �[31m�[1m[vite]�[22m�[39m �[31m�[2m(ssr)�[22m�[39m �[31mError when evaluating SSR module /vercel/path0/astro.config.mjs:
[03:36:20.902] |- Error: Cannot find module 'tslib'
[03:36:20.902] Require stack:
[03:36:20.902] - /vercel/path0/node_modules/.pnpm/[email protected]/node_modules/recast/main.js
[03:36:20.902]     at Function._resolveFilename (node:internal/modules/cjs/loader:1249:15)
[03:36:20.902]     at Function._load (node:internal/modules/cjs/loader:1075:27)
[03:36:20.903]     at TracingChannel.traceSync (node:diagnostics_channel:322:14)
[03:36:20.903]     at wrapModuleLoad (node:internal/modules/cjs/loader:219:24)
[03:36:20.903]     at Module.require (node:internal/modules/cjs/loader:1340:12)
[03:36:20.903]     at require (node:internal/modules/helpers:138:16)
[03:36:20.903]     at Object.<anonymous> (/vercel/path0/node_modules/.pnpm/[email protected]/node_modules/recast/main.js:4:15)
[03:36:20.903]     at Module._compile (node:internal/modules/cjs/loader:1565:14)
[03:36:20.903]     at Object..js (node:internal/modules/cjs/loader:1708:10)
[03:36:20.903]     at Module.load (node:internal/modules/cjs/loader:1318:32)
[03:36:20.903] �[39m
[03:36:20.903] [astro] Unable to load your Astro config
[03:36:20.904] 
[03:36:21.081] Cannot find module 'tslib'
[03:36:21.081] Require stack:
[03:36:21.081] - /vercel/path0/node_modules/.pnpm/[email protected]/node_modules/recast/main.js
[03:36:21.081]   Stack trace:
[03:36:21.081]     at Function._resolveFilename (node:internal/modules/cjs/loader:1249:15)
[03:36:21.081]     at TracingChannel.traceSync (node:diagnostics_channel:322:14)
[03:36:21.082]     at Module.require (node:internal/modules/cjs/loader:1340:12)
[03:36:21.082]     at Object.<anonymous> (/vercel/path0/node_modules/.pnpm/[email protected]/node_modules/recast/main.js:4:15)
[03:36:21.082]     at Object..js (node:internal/modules/cjs/loader:1708:10)
[03:36:21.093]  ELIFECYCLE  Command failed with exit code 1.
[03:36:21.109] Error: Command "pnpm run build" exited with 1
[03:36:21.324] 

This is my astro config:

// @ts-check
import tailwind from "@astrojs/tailwind";
import vercel from "@astrojs/vercel";
import qwikdev from "@qwikdev/astro";
import { defineConfig } from "astro/config";

// https://astro.build/config
export default defineConfig({
  output: "server",
  site: "https://elemental.souviki.me",
  integrations: [tailwind(), qwikdev()],
  adapter: vercel()
});

I'm still getting:

03:30:28 [types] Generated 2ms
using deprecated parameters for the initialization function; pass a single object instead

 WARN  2 deprecated subdependencies found: [email protected], [email protected]                                                                                                                                 

 WARN  Issues with peer dependencies found
.
└─┬ @builder.io/qwik 1.12.0
  └── ✕ unmet peer vite@^5: found 6.0.7

I don't know if these have something to do with my issue, I'm just guessing.
I'm really considering switching to Cloudflare Pages since my site isn't really dynamic at this point but
I'm still trying in case somebody finds that useful in the future.

I still can't make a minimal reproducible example btw, just like the previous attempt.
Any ideas? Thanks in advance.

[thejackshelton]

Hey @Souvlaki42! ]The peer dependency issue with Qwik is fine, because Qwik is using vite v5 and Astro is using v6, but there aren't any breaking changes between the two majors.

Can you show me what's in your package.json?

[thejackshelton]

I would also suggest running pnpm why tslib and see what is using it. I think we are with Astro integration kit as a dependency, but I also see that sharp is using it, so it could be related to you needing to install sharp if you're using the Astro image component.

[thejackshelton]

Also are you sure you're on the latest version? When I go to https://elemental.souvlaki.me/, I can see it spins up a service worker, which only happened on previous Qwik Astro versions.

[Souvlaki42]

@thejackshelton Sorry for being late to reply.
Here is my pnpm why tslib output:

dependencies:
@astrojs/tailwind 5.1.4
└─┬ astro 5.1.2 peer
  └─┬ sharp 0.33.5
    └─┬ @img/sharp-wasm32 0.33.5
      └─┬ @emnapi/runtime 1.3.1
        └── tslib 2.8.1
@astrojs/vercel 8.0.1
└─┬ astro 5.1.2 peer
  └─┬ sharp 0.33.5
    └─┬ @img/sharp-wasm32 0.33.5
      └─┬ @emnapi/runtime 1.3.1
        └── tslib 2.8.1
@qwikdev/astro 0.7.7
└─┬ astro-integration-kit 0.18.0
  ├─┬ astro 5.1.2 peer
  │ └─┬ sharp 0.33.5
  │   └─┬ @img/sharp-wasm32 0.33.5
  │     └─┬ @emnapi/runtime 1.3.1
  │       └── tslib 2.8.1
  └─┬ recast 0.23.9
    ├─┬ ast-types 0.16.1
    │ └── tslib 2.8.1
    └── tslib 2.8.1
astro 5.1.2
└─┬ sharp 0.33.5
  └─┬ @img/sharp-wasm32 0.33.5
    └─┬ @emnapi/runtime 1.3.1
      └── tslib 2.8.1

Here is my package.json after any updates at the time I'm writing this:

{
  "name": "element.al",
  "description": "A simple interface for getting information about elements.",
  "type": "module",
  "version": "1.0.0",
  "scripts": {
    "dev": "astro dev",
    "build": "astro build",
    "preview": "astro preview",
    "astro": "astro",
    "pretty": "prettier --write ."
  },
  "dependencies": {
    "@astrojs/tailwind": "^5.1.4",
    "@astrojs/vercel": "^8.0.1",
    "@builder.io/qwik": "^1.12.0",
    "@qwikdev/astro": "^0.7.7",
    "astro": "^5.1.3",
    "tailwindcss": "^3.4.17",
    "typescript": "^5.7.2"
  },
  "devDependencies": {
    "prettier": "^3.4.2",
    "prettier-plugin-astro": "^0.14.1",
    "prettier-plugin-tailwindcss": "^0.6.9"
  }
}

I use the html element in a .astro file twice. Should I install sharp separately for it to work fine? I didn't need to do that before.
The production site is outdated, as after doing any updates as I was recommended to do, the Vercel deployment failed with the error I gave you before
Thanks.

[thejackshelton]

The error before should since be fixed in the latest version of Qwik Astro, and yes if you are using Astro's image component they recommend installing sharp separately.

Sharp decided to make a bunch of breaking changes is the TLDR

[Souvlaki42]

@thejackshelton Still same errors. Updated everything, added sharp, changed to node lts, checked my vercel settings and still nothing changed. I even removed node_modules/, .astro, .vercel and dist and run pnpm install, pnpm run dev and pnpm run build to regenerated all of them and check for any build errors. Here is my github repo if that helps. Any help would be greatly appriciated.

Edit: Even tried removing @astrojs/vercel as my app wasn't really SSR and didn't know I didn't need that for static apps deployed on Vercel, but the errors didn't go away at production.