[🐞] usePopover with Cloudflare adapter fails to respond/causes qwik error 20

osdiab commented 2 weeks ago

Which package is affected?

Headless Kit

Describe the bug

I tried deploying a small Qwik website with a manual usePopover() in it, and it worked locally; but when deploying to Cloudflare Pages, I got this error on the production logs:

  `Calling a 'use*()' method outside 'component$(() => { HERE })' is not allowed. 'use*()' methods provide hooks to the 'component$' state and lifecycle, ie 'use' hooks can only be called synchronously within the 'component$' function or another 'use' method.\nSee https://qwik.dev/docs/components/tasks/#use-method-rules`

From the stack trace looks like it's something inside of the usePopover() hook. That said I am pretty new to Qwik so maybe I'm holding it wrong.

EDIT

I tried to make a minimal reproduction, but then instead now I'm seeing that the example nearly straight copy-pasted from the usePopover() example on the Qwik UI website just doesn't seem to call the handler at all (but something outside of the Popover.Root works fine):

Repro: https://github.com/osdiab/repro-qwik-ui-popover-cloudflare-fail

Result on Cloudflare Pages: https://5bc62893.repro-qwik-ui-popover-cloudflare-fail.pages.dev

first button should toggle a popover and log to console, it doesn't
second button logs to console outside of Popover root, it's fine

Reproduction

https://github.com/osdiab/personal-website/blob/93179b5ae60e1c23fc821f75541b5b4a7778e332/apps/web-app/src/components/tooltip.tsx#L48

Steps to reproduce

Locally no error, but when I deployed this on Cloudflare Pages then try to access the page, it returns a 500 and I get the error.

make a qwik app
add cloudflare adapter
make a component that uses usePopover() in it
see it works locally
deploy to Cloudflare
set NODE_VERSION env var
set node_compat compat flag
see that it doesn't respond/in the case of my personal website, it errors

I tried to remove all the other use*, event handlers, etc from my personal website Tooltip example, but it crashes until I comment out the usePopover() altogether.

System Info

System:
    OS: macOS 14.5
    CPU: (10) arm64 Apple M1 Max
    Memory: 292.73 MB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 21.7.3 - ~/.asdf/installs/nodejs/21.7.3/bin/node
    npm: 10.5.0 - ~/.asdf/plugins/nodejs/shims/npm
    pnpm: 9.0.4 - ~/.asdf/shims/pnpm
    Watchman: 2024.05.06.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 125.0.6422.142
    Edge: 125.0.2535.92
    Safari: 17.5
  npmPackages:
    @builder.io/qwik: ^1.5.5 => 1.5.5
    @builder.io/qwik-city: ^1.5.5 => 1.5.5
    @builder.io/vite-plugin-macro: ~0.0.7 => 0.0.7
    @qwik-ui/headless: ^0.4.4 => 0.4.4
    typescript: 5.4.5 => 5.4.5
    undici: * => 6.13.0
    vite: ^5.2.13 => 5.2.13

Additional Information

Error: Code(20) https://github.com/QwikDev/qwik/blob/main/packages/qwik/src/core/error/error.ts#L28
    at createAndLogError (functionsWorker-0.5285299984186582.js:4936:52)
    at logErrorAndStop (functionsWorker-0.5285299984186582.js:4927:55)
    at qError (functionsWorker-0.5285299984186582.js:4968:10)
    at useInvokeContext (functionsWorker-0.5285299984186582.js:6327:11)
    at useSequentialScope (functionsWorker-0.5285299984186582.js:5260:16)
    at useConstant (functionsWorker-0.5285299984186582.js:6038:24)
    at useSignal (functionsWorker-0.5285299984186582.js:6041:35)
    at usePopover (functionsWorker-0.5285299984186582.js:11174:32)
    at AsyncFunction.S1 [as resolved] (functionsWorker-0.5285299984186582.js:12808:50)
    at AsyncFunction.ui (functionsWorker-0.5285299984186582.js:2333:19)

osdiab commented 6 days ago

same thing seems to happen on vercel edge

thejackshelton commented 3 days ago

Working on this @osdiab 🫡

thejackshelton commented 3 days ago

@osdiab try @builder.io/qwik and @builder.io/qwik-city w/ the key of dev and see if this fixes your problem. Seems to work for me

osdiab commented 1 day ago

@thejackshelton sorry I don’t think I understand what you mean - do you mean the latest dev build of qwik/qwik-city? Thanks!

thejackshelton-kunaico commented 1 day ago

@thejackshelton sorry I don’t think I understand what you mean - do you mean the latest dev build of qwik/qwik-city? Thanks!

Try Qwik 1.6, as I think this should fix the issue.

qwikifiers / qwik-ui