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.

Sign up for GitHub

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

Jump to bottom

Qwik + Astro 5 issues when deploying to Vercel #179

Open
Souvlaki42 opened this issue Dec 24, 2024 · 7 comments
Open

Qwik + Astro 5 issues when deploying to Vercel #179

Souvlaki42 opened this issue Dec 24, 2024 · 7 comments

Comments

@Souvlaki42
Copy link

Tried using Astro 5.1.1 with @qwikdev/astro 0.6.3 by following this article to set it all up. Here is my production build.
In dev it looks fine but in "production" I get errors to the browser console like these:

delta.png:1 
        
        
       Failed to load resource: the server responded with a status of 404 ()
souvlaki42.png:1 
        
        
       Failed to load resource: the server responded with a status of 404 ()
(index):33 
        
        
       GET https://elemental.souvlaki.me/build/q-BbfX3l_6.js net::ERR_ABORTED 404 (Not Found)
E @ (index):33
A @ (index):33
4(index):33 TypeError: Failed to fetch dynamically imported module: https://elemental.souvlaki.me/build/q-BbfX3l_6.js

even after hours regarding my images and the client js file not loading at all. I changed my astro config to this:

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: "static",
  site: "https://elemental.souviki.me",
  integrations: [tailwind(), qwikdev()],
  adapter: vercel()
});

And even tried astro build and astro preview. I saw all files being there just fine and worked like a charm. I got no error logs in the Vercel deployment after git push. All of my images including the favicon are inside the public/ directory and referenced like this in the code: src="/image.jpg". My only warnings I have is

WARN  Issues with peer dependencies found
.
├─┬ @builder.io/qwik 1.11.0
│ └── ✕ unmet peer vite@^5: found 6.0.5
└─┬ @qwikdev/astro 0.6.3
  └─┬ astro-integration-kit 0.2.1
    └── ✕ unmet peer astro@^4.0.0: found 5.1.1

I don't know what to do about them. Should I wait until support for Astro 5 is released? Is this the issue? Thanks.
@siguici
Copy link
Collaborator

siguici commented Dec 24, 2024

@Souvlaki42, based on your description, it seems you're facing a server-side issue indicating the need for a server adapter (such as Node.js or Deno) to run your code in production. If this assumption is incorrect, please let me know—I’d also be interested to learn more about your build steps to better understand the situation.

@siguici siguici changed the title Qwik + Astro 5 issues when deploying to Vervel Qwik + Astro 5 issues when deploying to Vercel Dec 24, 2024
@siguici
Copy link
Collaborator

siguici commented Dec 24, 2024

As stated in the Astro documentation, you need to replace output: "static" with output: "server" in your Astro configuration file.

@github-actions github-actions bot mentioned this issue Dec 25, 2024
Merged
@thejackshelton
Copy link
Member

If what @siguici mentioned above does not work, we also recently released a big update, I would try the latest Qwik Astro and Qwik versions and see if that potentially fixes it.

As for the peer dependencies, would not worry about that, as Vite 5 -> Vite 6 is not a breaking change.

@Souvlaki42
Copy link
Author

I changed output to server and updated dependencies. The peers issue didn't go away but I ignored it for now. The image loading issue went away but the client JavaScript issue didn't in production at least.

Failed to load resource: the server responded with a status of 404 ()
 /build/q-D69ybdpH.js:1 
 
TypeError: Failed to fetch dynamically imported module: https://elemental.souvlaki.me/build/q-D69ybdpH.js

Even tried to add the client:load property to the client side component in case that fixed the issue.
According to that article I mentioned, I shouldn't even need that because that is for hydration which Qwik doesn't even use, but nothing came out of that idea either. Any other ideas?

@thejackshelton
Copy link
Member

If you could add a minimal reproduction of the issue, e.g a new Qwik Astro app deployed on vercel.

@Souvlaki42
Copy link
Author

Tried but pn create @qwikdev/astro fails with this error:

Error in renderToStaticMarkup function of @qwikdev/astro:  Error: Cannot find module 'C:/Users/Ilias/Code/astro-qwik-example/node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected][email protected][email protected]._ra4dzgidhz63wiitidbntbhenq/node_modules/@qwikdev/astro/q-astro-manifest.json' imported from 'C:/Users/Ilias/Code/astro-qwik-example/node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected][email protected][email protected]._ra4dzgidhz63wiitidbntbhenq/node_modules/@qwikdev/astro/server.ts'
    at fetchModule (file:///C:/Users/Ilias/Code/astro-qwik-example/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-0AosnpPU.js:51415:19)
    at RunnableDevEnvironment.fetchModule (file:///C:/Users/Ilias/Code/astro-qwik-example/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-0AosnpPU.js:52491:12)
    at fetchModule (file:///C:/Users/Ilias/Code/astro-qwik-example/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-0AosnpPU.js:52449:21)
    at handleInvoke (file:///C:/Users/Ilias/Code/astro-qwik-example/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-0AosnpPU.js:44162:28)
    at EventEmitter.listenerForInvokeHandler (file:///C:/Users/Ilias/Code/astro-qwik-example/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-0AosnpPU.js:44235:25)
    at EventEmitter.emit (node:events:507:28)
    at Object.send (file:///C:/Users/Ilias/Code/astro-qwik-example/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-0AosnpPU.js:30701:40)
    at Object.invoke (file:///C:/Users/Ilias/Code/astro-qwik-example/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/module-runner.js:610:34)
    at Object.invoke (file:///C:/Users/Ilias/Code/astro-qwik-example/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/module-runner.js:671:34)
    at SSRCompatModuleRunner.getModuleInformation (file:///C:/Users/Ilias/Code/astro-qwik-example/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/module-runner.js:1192:94) {
  code: 'ERR_MODULE_NOT_FOUND',
  runnerError: Error: RunnerError
      at reviveInvokeError (file:///C:/Users/Ilias/Code/astro-qwik-example/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/module-runner.js:541:18)
      at Object.invoke (file:///C:/Users/Ilias/Code/astro-qwik-example/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/module-runner.js:624:15)
      at async SSRCompatModuleRunner.getModuleInformation (file:///C:/Users/Ilias/Code/astro-qwik-example/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/module-runner.js:1192:73)
      at async request (file:///C:/Users/Ilias/Code/astro-qwik-example/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/module-runner.js:1214:88)
      at async Object.renderToStaticMarkup (C:/Users/Ilias/Code/astro-qwik-example/node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected][email protected][email protected]._ra4dzgidhz63wiitidbntbhenq/node_modules/@qwikdev/astro/server.ts:37:21)
      at async renderFrameworkComponent (C:/Users/Ilias/Code/astro-qwik-example/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/astro/dist/runtime/server/render/component.js:217:26)
      at async renderComponent (C:/Users/Ilias/Code/astro-qwik-example/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/astro/dist/runtime/server/render/component.js:370:10)
      at async renderChild (C:/Users/Ilias/Code/astro-qwik-example/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/astro/dist/runtime/server/render/any.js:11:13)
}
15:11:00 [ERROR] Cannot find module 'C:/Users/Ilias/Code/astro-qwik-example/node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected][email protected][email protected]._ra4dzgidhz63wiitidbntbhenq/node_modules/@qwikdev/astro/q-astro-manifest.json' imported from 'C:/Users/Ilias/Code/astro-qwik-example/node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected][email protected][email protected]._ra4dzgidhz63wiitidbntbhenq/node_modules/@qwikdev/astro/server.ts'
  Stack trace:
    at fetchModule (file:///C:/Users/Ilias/Code/astro-qwik-example/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-0AosnpPU.js:51415:19)
    at fetchModule (file:///C:/Users/Ilias/Code/astro-qwik-example/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-0AosnpPU.js:52449:21)
    at EventEmitter.listenerForInvokeHandler (file:///C:/Users/Ilias/Code/astro-qwik-example/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-0AosnpPU.js:44235:25)
    at Object.send (file:///C:/Users/Ilias/Code/astro-qwik-example/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-0AosnpPU.js:30701:40)
    at Object.invoke (file:///C:/Users/Ilias/Code/astro-qwik-example/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/module-runner.js:671:34)

Also I got this warning in development in my normal project. Seems to be related:

using deprecated parameters for the initialization function; pass a single object instead
```. I appreciate your help but still having issues. Thanks.

@thejackshelton
Copy link
Member

Tried but pn create @qwikdev/astro fails with this error:

Error in renderToStaticMarkup function of @qwikdev/astro:  Error: Cannot find module 'C:/Users/Ilias/Code/astro-qwik-example/node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected][email protected][email protected]._ra4dzgidhz63wiitidbntbhenq/node_modules/@qwikdev/astro/q-astro-manifest.json' imported from 'C:/Users/Ilias/Code/astro-qwik-example/node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected][email protected][email protected]._ra4dzgidhz63wiitidbntbhenq/node_modules/@qwikdev/astro/server.ts'
    at fetchModule (file:///C:/Users/Ilias/Code/astro-qwik-example/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-0AosnpPU.js:51415:19)
    at RunnableDevEnvironment.fetchModule (file:///C:/Users/Ilias/Code/astro-qwik-example/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-0AosnpPU.js:52491:12)
    at fetchModule (file:///C:/Users/Ilias/Code/astro-qwik-example/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-0AosnpPU.js:52449:21)
    at handleInvoke (file:///C:/Users/Ilias/Code/astro-qwik-example/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-0AosnpPU.js:44162:28)
    at EventEmitter.listenerForInvokeHandler (file:///C:/Users/Ilias/Code/astro-qwik-example/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-0AosnpPU.js:44235:25)
    at EventEmitter.emit (node:events:507:28)
    at Object.send (file:///C:/Users/Ilias/Code/astro-qwik-example/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-0AosnpPU.js:30701:40)
    at Object.invoke (file:///C:/Users/Ilias/Code/astro-qwik-example/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/module-runner.js:610:34)
    at Object.invoke (file:///C:/Users/Ilias/Code/astro-qwik-example/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/module-runner.js:671:34)
    at SSRCompatModuleRunner.getModuleInformation (file:///C:/Users/Ilias/Code/astro-qwik-example/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/module-runner.js:1192:94) {
  code: 'ERR_MODULE_NOT_FOUND',
  runnerError: Error: RunnerError
      at reviveInvokeError (file:///C:/Users/Ilias/Code/astro-qwik-example/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/module-runner.js:541:18)
      at Object.invoke (file:///C:/Users/Ilias/Code/astro-qwik-example/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/module-runner.js:624:15)
      at async SSRCompatModuleRunner.getModuleInformation (file:///C:/Users/Ilias/Code/astro-qwik-example/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/module-runner.js:1192:73)
      at async request (file:///C:/Users/Ilias/Code/astro-qwik-example/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/module-runner.js:1214:88)
      at async Object.renderToStaticMarkup (C:/Users/Ilias/Code/astro-qwik-example/node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected][email protected][email protected]._ra4dzgidhz63wiitidbntbhenq/node_modules/@qwikdev/astro/server.ts:37:21)
      at async renderFrameworkComponent (C:/Users/Ilias/Code/astro-qwik-example/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/astro/dist/runtime/server/render/component.js:217:26)
      at async renderComponent (C:/Users/Ilias/Code/astro-qwik-example/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/astro/dist/runtime/server/render/component.js:370:10)
      at async renderChild (C:/Users/Ilias/Code/astro-qwik-example/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/astro/dist/runtime/server/render/any.js:11:13)
}
15:11:00 [ERROR] Cannot find module 'C:/Users/Ilias/Code/astro-qwik-example/node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected][email protected][email protected]._ra4dzgidhz63wiitidbntbhenq/node_modules/@qwikdev/astro/q-astro-manifest.json' imported from 'C:/Users/Ilias/Code/astro-qwik-example/node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected][email protected][email protected]._ra4dzgidhz63wiitidbntbhenq/node_modules/@qwikdev/astro/server.ts'
  Stack trace:
    at fetchModule (file:///C:/Users/Ilias/Code/astro-qwik-example/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-0AosnpPU.js:51415:19)
    at fetchModule (file:///C:/Users/Ilias/Code/astro-qwik-example/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-0AosnpPU.js:52449:21)
    at EventEmitter.listenerForInvokeHandler (file:///C:/Users/Ilias/Code/astro-qwik-example/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-0AosnpPU.js:44235:25)
    at Object.send (file:///C:/Users/Ilias/Code/astro-qwik-example/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-0AosnpPU.js:30701:40)
    at Object.invoke (file:///C:/Users/Ilias/Code/astro-qwik-example/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/module-runner.js:671:34)

Also I got this warning in development in my normal project. Seems to be related:

using deprecated parameters for the initialization function; pass a single object instead
```. I appreciate your help but still having issues. Thanks.

Is the bug preventing you from creating a new project entirely?

Try:

npm create @qwikdev/astro@latest

Also if you could run:

npx envinfo --system --npmPackages '{vite,undici,typescript,@builder.io/*}' --binaries --browsers

and provide the output in this issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@siguici @Souvlaki42 @thejackshelton