[🐞] Code(13): Actual value for useContext(button-context) can not be found, make sure some ancestor component has set a value using useContextProvider()

[steffanek]

Which component is affected?

Qwik Runtime

Describe the bug

I get an error on the client when using the Context API, when I want to update a signal from a child. See the repro to understand.

The error looks like: Error: Code(13): Actual value for useContext(button-context) can not be found, make sure some ancestor component has set a value using useContextProvider(). In the browser make sure that the context was used during SSR so its state was serialized.

Reproduction

https://stackblitz.com/edit/github-n3deah?file=src%2Froutes%2Findex.tsx

Steps to reproduce

Open the Repro url above: There is 2 examples.

1. Open the browser console
2. Click on any button

Depend on the example you will get an error that looks like: Error: Code(13): Actual value for useContext(button-context) can not be found, make sure some ancestor component has set a value using useContextProvider(). In the browser make sure that the context was used during SSR so its state was serialized.

System Info

System:
    OS: macOS 14.3
    CPU: (8) arm64 Apple M3
    Memory: 1.21 GB / 24.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.2.0 - /opt/homebrew/bin/node
    npm: 10.7.0 - /opt/homebrew/bin/npm
    pnpm: 9.7.0 - /opt/homebrew/bin/pnpm
  Browsers:
    Safari: 17.3
  npmPackages:
    @builder.io/qwik: 1.7.3 => 1.7.3
    @builder.io/qwik-city: 1.7.3 => 1.7.3
    typescript: 5.4.5 => 5.4.5
    undici: 5.28.4 => 5.28.4
    vite: 5.2.11 => 5.2.11

Additional Information

No response

[JerryWu1234]

let me take a look

[maiieul]

I looked into it with @Steff, seems to happen only when when change the signal value and the signal is listening on the key prop if you remove the key prop, the error goes away

[wmertens]

There's a chance this is fine in V2 so we'll just keep this open until we hit alpha to test

[wmertens]

Seems fixed in v2. @steffanek can you verify that that's indeed the case?

v2 playground link: https://qwikdev-build-v2.qwik-8nx.pages.dev/playground/#f=7VaxbsIwEP2VbI4ETZuKqQoeUnWmv8BAGTo0KkJVifLv3PPz2QlxgAkJCRYSx3d%2B7%2B589%2FpF81oGPoAYK2COt2G5YUlqsdmtvvDI6eyepOjxH0t2%2BKYF7FfV8IrKZCRrpz4Cjmw5xlZ5rcABZG1uKFme0KdkhxHqQ6efa0k9EpSseu5xk0c8y66AO3%2BBqxS9%2FATnPNiLxWT6ETzNWczSCC6HUR9t5XNReapGWOdtVhSFU2lZd5aM9pkTzA5pX0QZNTORTiF9cL9JkCKQrFUM3QRLLyfHXM92ItJws%2Bt9KjHTt6y09X57kOtTWqSPiwsbQyECcbuT74tg09gPPwLLN857Fs0zk8HQoReqAWStXTUy7CGm6t%2BfP%2Bg%2BH07RXlAWGJRrOYu2zkLN6b13nXnO9%2BZ%2F2Q5oMwFdlKEto5TYNJuFJOCX9BMPJLPYQBTRBYQ3wzG6JI%2F5c3%2Fz5wg

[brandonpittman]

Getting a similar error on a button with a key but the click handler isn't using the key's value.

[wmertens]

@brandonpittman can you try to repro in the playground and then try on the V2 Playground (linked above)

[brandonpittman]

@brandonpittman can you try to repro in the playground and then try on the V2 Playground (linked above)

Mine's buried in work code, can't really pull it out. Tried taking the key off and letting people test it at work. It doesn't happen every time a user goes through the flow. But it's the error code 13 each time. 🤷🏻

[wmertens]

We should be releasing V2 alpha soonish so you can try it in there

[shairez]

Alpha is released, @brandonpittman did you have a chance to check if V2 fixes it?

[brandonpittman]

@shairez I think my issue was not calling useContext during SSR.

[shairez]

@brandonpittman thanks, so it works for you now?

@steffanek can you please verify it works with V2?

[brandonpittman]

@brandonpittman Maybe. Haven't seen the same Sentry error since making the SSR call.

[steffanek]

@wmertens I've just tested with v2, the 2nd example (ToggleGroup) and it still has that issue:

• here is the repro: https://stackblitz.com/edit/github-7ygh5v-bpgfjzzf?file=src%2Froutes%2Findex.tsx <- this is the same example using the ToggleGroup from my initial repro.

• here is the same repro as above, but here I'm using the current ToggleGroup from @qwik-ui (which has evolve a little bit), and here I got another issue SyntaxError: redeclaration of import viteinjectQuery prior to the one mentioned: https://stackblitz.com/edit/github-7ygh5v-9rpmdd2h?file=src%2Froutes%2Findex.tsx

ps. I couldn't find a shorter repro

cc: @Varixo (just showed it today)

[Varixo]

Fixed in v2 by #7234 and #7204