QwikDev / qwik

Instant-loading web apps, without effort
https://qwik.dev
MIT License
20.83k stars 1.3k forks source link

[🐞] Static pages - q-data.json 405 error #4173

Open ouariachi opened 1 year ago

ouariachi commented 1 year ago

Which component is affected?

Qwik City (routing)

Describe the bug

I am creating a web page and I am trying to make a login form. On localhost it works correctly, but when I try it on cloudflare pages, it doesn't work. I am using cloudflare-pages, prisma and static site generator adapters.

The error is that when submitting the form, it tries to access the q-data.json file using POST method, and this returns a 405 status code, however, when trying to access this file using GET method it does not give an error.

Reproduction

https://github.com/ouariachi/qwik-reproduction-1/

Steps to reproduce

Go to https://qwik-reproduction-1.pages.dev/ and try to log in. You will see in DevTools "Network" tab this:

image

System Info

System:
    OS: Windows 11
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11800H @ 2.30GHz
    Memory: 5.31 GB / 15.65 GB
  Binaries:
    Node: 19.6.1 - C:\Program Files\nodejs\node.EXE
    npm: 9.6.5 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22621.1702.0), Chromium (113.0.1774.35)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    @builder.io/qwik: ^1.1.1 => 1.1.1
    @builder.io/qwik-city: ^1.1.1 => 1.1.1
    undici: 5.22.0 => 5.22.0
    vite: 4.3.5 => 4.3.5

Additional Information

Before uploading it to GitHub I build it on local using "npm run build", because if Cloudflare builds it, prisma gives error.

Prisma error:

14:43:23.447 | TypeError [PLUGIN_ERROR]: Invalid module ".prisma/client/index-browser" is not a valid package name imported from /opt/buildhome/repo/server/@qwik-city-plan.js
14:43:23.447 | at new NodeError (node:internal/errors:387:5)
14:43:23.447 | at parsePackageName (node:internal/modules/esm/resolve:777:11)
14:43:23.448 | at packageResolve (node:internal/modules/esm/resolve:800:5)
14:43:23.448 | at moduleResolve (node:internal/modules/esm/resolve:901:20)
14:43:23.448 | at defaultResolve (node:internal/modules/esm/resolve:1115:11)
14:43:23.448 | at nextResolve (node:internal/modules/esm/loader:163:28)
14:43:23.448 | at ESMLoader.resolve (node:internal/modules/esm/loader:841:30)
14:43:23.448 | at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
14:43:23.448 | at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)
14:43:23.448 | at link (node:internal/modules/esm/module_job:75:36)
markjkaem commented 1 year ago

I had that error also, and i think it has to do something with prisma not being ready for the edge, there's a package @prisma/client/edge but changing the import doesn't help. I have this error in both vercel and netlify.

Invalid module ".prisma/client/edge" is not a valid package name imported from /vercel/path0/.netlify/edge-functions/entry.netlify-edge/@qwik-city-plan.js.

maiieul commented 1 year ago

I don't think it is related to prisma.

It seems to me that the problem comes from the SSG adapter. I ran into the same issue when using the SSG adapter and deploying the repository on Vercel from their website. I don't know how to solve it yet though. It could be because an entry file is required to make things work like the entry.cloudflare-pages.tsx or the entry.vercel-edge.tsx files.

From what I see, I think you added the SSG adapter after adding the Cloudflare pages adapter. If you look at your package.json, your build.server script is executing the script from the SSG adapter. You need to replace your build.server script in your package.json with "build.server": "vite build -c adapters/cloudflare-pages/vite.config.ts"

manucorporat commented 1 year ago

I think it's an issue with SSG in cloudflare, if a page is static, it does not receve requests! we are working with the cloudflare team on this issue.

markjkaem commented 1 year ago

I think it's an issue with SSG in cloudflare, if a page is static, it does not receve requests! we are working with the cloudflare team on this issue.

Ah, maybe this typError is helpfull for you. Uncaught ( in promise) TypeError: Failed to resolve module specifier ".prisma/client/index-browser". Relative references must start with either "/", "./", or "../".

maiieul commented 1 year ago

@manucorporat I think this might be a broader issue than SSG in Cloudflare.

I have created a reproduction here with the same error when deployed to Vercel from within their website:

Repro: https://github.com/maieulChevalier/qwik-ssg-vercel

Deployed on Vercel: https://qwik-ssg-vercel.vercel.app/demo/todolist (try adding a todo item and you'll get the same q-data.json 405 error). I didn't use the Vercel adapter, only the SSG adapter since the Vercel adapter would overwrite the SSG adapter.

captain-yossarian commented 1 year ago

I have same issue with vercel, despite the fact that qwik has vercel deploy strategy. Having this error:

<html>
<body>
<!--StartFragment-->

TypeError [PLUGIN_ERROR]: Invalid module ".prisma/client/index-browser" is not a valid package name imported from /vercel/path0/.vercel/output/functions/_qwik-city.func/@qwik-city-plan.js
--
14:33:57.861 | at new NodeError (node:internal/errors:399:5)
14:33:57.861 | at parsePackageName (node:internal/modules/esm/resolve:817:11)
14:33:57.861 | at packageResolve (node:internal/modules/esm/resolve:840:5)
14:33:57.861 | at moduleResolve (node:internal/modules/esm/resolve:938:20)
14:33:57.861 | at defaultResolve (node:internal/modules/esm/resolve:1153:11)
14:33:57.861 | at nextResolve (node:internal/modules/esm/loader:163:28)
14:33:57.861 | at ESMLoader.resolve (node:internal/modules/esm/loader:838:30)
14:33:57.861 | at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
14:33:57.861 | at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:77:40)
14:33:57.861 | at link (node:internal/modules/esm/module_job:76:36)
14:33:57.861 |  
14:33:57.881 | Error: Command "npm run build" exited with 1
14:33:58.249 | BUILD_UTILS_SPAWN_1: Command "npm run build" exited with 1

<!--EndFragment-->
</body>
</html>
m-caria commented 1 year ago

Same here.

I have an app with Supabase using Modular Forms and when I try to make a post action the 405 status code appear. My app is deployed on Vercel.

Any news?

manucorporat commented 1 year ago

Vercel Edge is cloudflare pages, so makes sense to fail in both. I think the problem is that SSG pages cant be posted too! gonna look into it

DevWeb13 commented 7 months ago

Hi all!

I have exactly the same problem with static deployment on vercel, have you found a solution??

image

PatrickJS commented 7 months ago

this might be an issue with vercel we're other teams that deploy to vercel getting 405 errors

wmertens commented 7 months ago

Could be VERCEL_URL https://stackoverflow.com/questions/76694040/request-failed-with-status-code-405-i-getting-this-error-after-deploying-app/77721073#77721073

Wout.

On Mon, 1 Apr 2024, 07:57 PatrickJS, @.***> wrote:

this might be an issue with vercel we're other teams that deploy to vercel getting 405 errors

— Reply to this email directly, view it on GitHub https://github.com/BuilderIO/qwik/issues/4173#issuecomment-2029211355, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAANNFURYNHZHETOVFV7BODY3DZLFAVCNFSM6AAAAAAX6NKSDWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAMRZGIYTCMZVGU . You are receiving this because you are subscribed to this thread.Message ID: @.***>

PatrickJS commented 6 months ago

update to latest version 1.5.3 and turn on vercel Skew Protection

gioboa commented 5 months ago

@PatrickJS can we solve this issue with your suggestion?