Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Astro Qwik + Vercel issues on deployment #221

Closed
Souvlaki42 opened this issue Jan 6, 2025 · 18 comments
Closed

Astro Qwik + Vercel issues on deployment #221

Souvlaki42 opened this issue Jan 6, 2025 · 18 comments

Comments

@Souvlaki42
Copy link

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
Copy link
Member

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
Copy link
Member

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
Copy link
Member

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
Copy link
Author

@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
Copy link
Member

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
Copy link
Author

Souvlaki42 commented Jan 6, 2025

@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.

@thejackshelton
Copy link
Member

thejackshelton commented Jan 8, 2025

In the repo you sent, looks like you were missing the Qwik types. Not sure if this will help, but it's what I noticed

{
	"extends": "astro/tsconfigs/strict",
	"include": [".astro/types.d.ts", "**/*"],
	"exclude": ["dist"],
	"compilerOptions": {
		"baseUrl": ".",
		"paths": {
			"~/*": ["./src/*"]
		},
		"jsx": "react-jsx",
		"jsxImportSource": "@builder.io/qwik"
	}
}

@Souvlaki42
Copy link
Author

Thanks for that. However, nothing changed. Not even sure if @qwikdev/astro is in fault anymore. The failed production builds started after upgrading all those npm packages for fixing qwik component's JS files not being available in prod. Should I ask somewhere else? I don't want to waste your time anymore. Thanks.

@thejackshelton
Copy link
Member

Try commenting out your Qwik components, and removing the qwikdev integration from the Astro config and see if the issue persists. If it still does, then I think we'll need a more minimal reproduction to figure out where to file the issue.

@Souvlaki42
Copy link
Author

@thejackshelton Removing qwik made my site deploy to production and using deprecated parameters for the initialization function; pass a single object instead warning disappeared from dev too although in didn't break anything in dev. This is the most minimally reproducible example I could make right now: mra pushed in preview on Vercel and got the same warning in dev and logs/errors in deployment:

[00:13:04.216] Running build in Washington, D.C., USA (East) – iad1
[00:13:04.309] Cloning github.com/Souvlaki42/element.al (Branch: mre-for-qwikdev-astro, Commit: 426e96f)
[00:13:04.941] Cloning completed: 632ms
[00:13:06.383] Restored build cache from previous deployment (4kDVYHDefK9Q9P2NpUQ2muXwkBEq)
[00:13:06.453] Running "vercel build"
[00:13:06.892] Vercel CLI 39.2.5
[00:13:07.515] Detected `pnpm-lock.yaml` version 9 generated by [email protected]
[00:13:07.524] Installing dependencies...
[00:13:08.295] Lockfile is up to date, resolution step is skipped
[00:13:08.362] Progress: resolved 1, reused 0, downloaded 0, added 0
[00:13:08.379] Packages: +10
[00:13:08.379] ++++++++++
[00:13:09.317] Progress: resolved 10, reused 0, downloaded 10, added 10, done
[00:13:09.845] 
[00:13:09.845] dependencies:
[00:13:09.846] + @builder.io/qwik 1.12.0
[00:13:09.846] + @qwikdev/astro 0.7.7
[00:13:09.846] 
[00:13:09.854] Done in 2.2s
[00:13:09.888] Running "pnpm run build"
[00:13:10.394] 
[00:13:10.394] > [email protected] build /vercel/path0
[00:13:10.395] > astro build
[00:13:10.395] 
[00:13:11.555] �[2m10:13:11 PM�[22m �[31m�[1m[vite]�[22m�[39m �[31m�[2m(ssr)�[22m�[39m �[31mError when evaluating SSR module /vercel/path0/astro.config.mjs:
[00:13:11.555] |- Error: Cannot find module 'tslib'
[00:13:11.555] Require stack:
[00:13:11.555] - /vercel/path0/node_modules/.pnpm/[email protected]/node_modules/recast/main.js
[00:13:11.555]     at Function._resolveFilename (node:internal/modules/cjs/loader:1249:15)
[00:13:11.555]     at Function._load (node:internal/modules/cjs/loader:1075:27)
[00:13:11.555]     at TracingChannel.traceSync (node:diagnostics_channel:322:14)
[00:13:11.555]     at wrapModuleLoad (node:internal/modules/cjs/loader:219:24)
[00:13:11.556]     at Module.require (node:internal/modules/cjs/loader:1340:12)
[00:13:11.556]     at require (node:internal/modules/helpers:138:16)
[00:13:11.556]     at Object.<anonymous> (/vercel/path0/node_modules/.pnpm/[email protected]/node_modules/recast/main.js:4:15)
[00:13:11.556]     at Module._compile (node:internal/modules/cjs/loader:1565:14)
[00:13:11.556]     at Object..js (node:internal/modules/cjs/loader:1708:10)
[00:13:11.556]     at Module.load (node:internal/modules/cjs/loader:1318:32)
[00:13:11.556] �[39m
[00:13:11.556] [astro] Unable to load your Astro config
[00:13:11.556] 
[00:13:11.737] Cannot find module 'tslib'
[00:13:11.737] Require stack:
[00:13:11.737] - /vercel/path0/node_modules/.pnpm/[email protected]/node_modules/recast/main.js
[00:13:11.737]   Stack trace:
[00:13:11.737]     at Function._resolveFilename (node:internal/modules/cjs/loader:1249:15)
[00:13:11.738]     at TracingChannel.traceSync (node:diagnostics_channel:322:14)
[00:13:11.738]     at Module.require (node:internal/modules/cjs/loader:1340:12)
[00:13:11.738]     at Object.<anonymous> (/vercel/path0/node_modules/.pnpm/[email protected]/node_modules/recast/main.js:4:15)
[00:13:11.738]     at Object..js (node:internal/modules/cjs/loader:1708:10)
[00:13:11.748]  ELIFECYCLE  Command failed with exit code 1.
[00:13:11.763] Error: Command "pnpm run build" exited with 1
[00:13:12.057] 

Is this any helpful? Thanks.

@thejackshelton
Copy link
Member

Try this version of Qwik Astro and let me know if this helps:

pnpm i https://pkg.pr.new/QwikDev/astro/@qwikdev/astro@223

@Souvlaki42
Copy link
Author

Slightly different error:

[00:58:07.360] Running build in Washington, D.C., USA (East) – iad1
[00:58:07.474] Cloning github.com/Souvlaki42/element.al (Branch: mre-for-qwikdev-astro, Commit: 460e787)
[00:58:07.779] Cloning completed: 306ms
[00:58:09.249] Restored build cache from previous deployment (4kDVYHDefK9Q9P2NpUQ2muXwkBEq)
[00:58:09.320] Running "vercel build"
[00:58:09.764] Vercel CLI 39.2.5
[00:58:10.399] Detected `pnpm-lock.yaml` version 9 generated by [email protected]
[00:58:10.407] Installing dependencies...
[00:58:11.185] Lockfile is up to date, resolution step is skipped
[00:58:11.249] Progress: resolved 1, reused 0, downloaded 0, added 0
[00:58:11.264] Packages: +3
[00:58:11.265] +++
[00:58:12.251] Progress: resolved 3, reused 0, downloaded 2, added 1
[00:58:13.252] Progress: resolved 3, reused 0, downloaded 2, added 2
[00:58:13.273] Progress: resolved 3, reused 0, downloaded 3, added 3, done
[00:58:13.817] 
[00:58:13.817] dependencies:
[00:58:13.817] + @builder.io/qwik 1.12.0
[00:58:13.817] + @qwikdev/astro 0.7.7
[00:58:13.818] 
[00:58:13.826] Done in 3.2s
[00:58:13.859] Running "pnpm run build"
[00:58:14.360] 
[00:58:14.360] > [email protected] build /vercel/path0
[00:58:14.360] > astro build
[00:58:14.360] 
[00:58:15.521] �[2m10:58:15 PM�[22m �[31m�[1m[vite]�[22m�[39m �[31m�[2m(ssr)�[22m�[39m �[31mError when evaluating SSR module /vercel/path0/astro.config.mjs:
[00:58:15.521] |- Error: Cannot find module 'astro-integration-kit' imported from '/vercel/path0/node_modules/.pnpm/@qwikdev+astro@https+++pkg.pr.new+QwikDev+astro+@qwikdev+astro@[email protected][email protected]_vi_47f67g6fzsvgo74lzhr2twhioe/node_modules/@qwikdev/astro/src/index.ts'
[00:58:15.521]     at fetchModule (file:///vercel/path0/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-BJP6rrE_.js:51464:19)
[00:58:15.522]     at RunnableDevEnvironment.fetchModule (file:///vercel/path0/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-BJP6rrE_.js:52558:12)
[00:58:15.522]     at fetchModule (file:///vercel/path0/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-BJP6rrE_.js:52516:21)
[00:58:15.522]     at handleInvoke (file:///vercel/path0/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-BJP6rrE_.js:44166:28)
[00:58:15.522]     at EventEmitter.listenerForInvokeHandler (file:///vercel/path0/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-BJP6rrE_.js:44239:25)
[00:58:15.522]     at EventEmitter.emit (node:events:524:28)
[00:58:15.522]     at Object.send (file:///vercel/path0/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-BJP6rrE_.js:30705:40)
[00:58:15.522]     at Object.invoke (file:///vercel/path0/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/vite/dist/node/module-runner.js:610:34)
[00:58:15.522]     at Object.invoke (file:///vercel/path0/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/vite/dist/node/module-runner.js:671:34)
[00:58:15.522]     at SSRCompatModuleRunner.getModuleInformation (file:///vercel/path0/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/vite/dist/node/module-runner.js:1192:94)
[00:58:15.522] �[39m
[00:58:15.522] [astro] Unable to load your Astro config
[00:58:15.522] 
[00:58:15.701] Cannot find module 'astro-integration-kit' imported from '/vercel/path0/node_modules/.pnpm/@qwikdev+astro@https+++pkg.pr.new+QwikDev+astro+@qwikdev+astro@[email protected][email protected]_vi_47f67g6fzsvgo74lzhr2twhioe/node_modules/@qwikdev/astro/src/index.ts'
[00:58:15.701]   Stack trace:
[00:58:15.701]     at fetchModule (file:///vercel/path0/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-BJP6rrE_.js:51464:19)
[00:58:15.701]     at fetchModule (file:///vercel/path0/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-BJP6rrE_.js:52516:21)
[00:58:15.701]     at EventEmitter.listenerForInvokeHandler (file:///vercel/path0/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-BJP6rrE_.js:44239:25)
[00:58:15.701]     at Object.send (file:///vercel/path0/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-BJP6rrE_.js:30705:40)
[00:58:15.701]     at Object.invoke (file:///vercel/path0/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/vite/dist/node/module-runner.js:671:34)
[00:58:15.711]  ELIFECYCLE  Command failed with exit code 1.
[00:58:15.726] Error: Command "pnpm run build" exited with 1
[00:58:15.988] 

@thejackshelton
Copy link
Member

Just spoke with one of the maintainers of Astro Integration Kit, his thoughts are that if removing the Qwik integration fixes the deploy, that somewhere in the integration we are including AIK directly in the bundle.

I've removed the watchDirectory API from the config setup, try this latest PR:

pnpm i https://pkg.pr.new/QwikDev/astro/@qwikdev/astro@224

@thejackshelton
Copy link
Member

https://element-qob7151p0-thejacksheltons-projects.vercel.app/

it looks to me like it is working

@Souvlaki42
Copy link
Author

Souvlaki42 commented Jan 9, 2025

Edit: Realized that both stable and experimental versions of @qwikdev/astro worked as expected after I pushed and redeployed without previous build cache. Sorry if I spent your time. I still don't know where this message using deprecated parameters for the initialization function; pass a single object instead comes from and how to fix it, but don't really care much tbh after that. Thank you so much for helping me out though.

@thejackshelton
Copy link
Member

Ah I see, so Vercel build caching was the problem? And the latest version of Qwik Astro works? If so I will keep that in mind, and make sure we have it documented in the upcoming Qwik Astro docs.

@Souvlaki42
Copy link
Author

Yes Vercel build cache was the issue in my case. You should definitely document that just in case someone has the same issue again. I use @qwikdev/astro version 0.7.7 now. Don't think I changed anything else significantly. Just after some testing I did today I thought I'll try to redeploy to see if something changes and realized it used previous build cache from broken versions. That may explain why you didn't have that issue in your testing. You never had any broken versions at all to take build cache from. Thanks again for your help. Should I close this issue now? I have nothing else except that warning in dev now. This issue had it too.

@thejackshelton
Copy link
Member

Awesome. Will close this issue for now. On the CLI feedback we currently have a discussion open 😄

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants