QwikDev / qwik

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

`useContext()` can not be found for `Link` when conditionally rendered with updates from `useClientEffect$` #1971

Closed jessezhang91 closed 6 months ago

jessezhang91 commented 1 year ago

Qwik Version

0.12.1

Operating System (or Browser)

Mac OSX

Node Version (if applicable)

No response

Which component is affected?

Qwik City

Expected Behaviour

I do not expect to see this error when conditionally rendering Links based on a value updated in useClientEffect$.

Actual Behaviour

Reproduced here: https://stackblitz.com/edit/qwik-starter-z3bthd?file=src/root.tsx

Error:

Code(13): Actual value for useContext() can not be found, make sure some ancestor component has set a value using useContextProvider() Error: Code(13): Actual value for useContext() can not be found, make sure some ancestor component has set a value using useContextProvider()
    at logError (https://qwik-starter-z3bthd--5173.local-credentialless.webcontainer.io/node_modules/@builder.io/qwik/core.mjs?v=a877a9a1:61:54)
    at logErrorAndStop (https://qwik-starter-z3bthd--5173.local-credentialless.webcontainer.io/node_modules/@builder.io/qwik/core.mjs?v=a877a9a1:67:17)
    at qError (https://qwik-starter-z3bthd--5173.local-credentialless.webcontainer.io/node_modules/@builder.io/qwik/core.mjs?v=a877a9a1:132:12)
    at useContext (https://qwik-starter-z3bthd--5173.local-credentialless.webcontainer.io/node_modules/@builder.io/qwik/core.mjs?v=a877a9a1:1921:11)
    at useNavigate (https://qwik-starter-z3bthd--5173.local-credentialless.webcontainer.io/node_modules/@builder.io/qwik-city/index.qwik.mjs?v=a877a9a1:126:29)
    at Link_component_mYsiJcA4IBc (https://qwik-starter-z3bthd--5173.local-credentialless.webcontainer.io/src/link_component_mysijca4ibc.js?v=a877a9a1:9:17)
    at invoke (https://qwik-starter-z3bthd--5173.local-credentialless.webcontainer.io/node_modules/@builder.io/qwik/core.mjs?v=a877a9a1:636:26)
    at https://qwik-starter-z3bthd--5173.local-credentialless.webcontainer.io/node_modules/@builder.io/qwik/core.mjs?v=a877a9a1:6150:28
    at async Promise.all (index 0)
    at async Promise.all (index 0)
    at async renderMarked (https://qwik-starter-z3bthd--5173.local-credentialless.webcontainer.io/node_modules/@builder.io/qwik/core.mjs?v=a877a9a1:4471:25)

Additional Information

No response

stackblitz[bot] commented 1 year ago

Fix this issue in StackBlitz Codeflow Start a new pull request in StackBlitz Codeflow.

wmertens commented 1 year ago

So the problem is that Link uses useContext and the contextProvider hasn't started.

This feels like a bug to me, I would expect useContext to wake up the provider first on resume.

manucorporat commented 1 year ago

it's a bug, but it's not about waking up, it's about the context was not serialized, when it should, I will look into it with priority

ramsaylanier commented 1 year ago

probably the same issue but this is happening when conditionally rendering links in a Resource as well.

jmsegrev commented 9 months ago

Im having this exact same problem qwik v1.2.19

wmertens commented 9 months ago

@jmsegrev minimaal repro please, preferably in the playground.

Are you sure it's not because you're rendering slots optionally and the children don't see the context provided by a needed slot?

jmsegrev commented 9 months ago

@wmertens you are correct, it seems related to the condition. Here I replicated it with a simple condition. It does not seem to be the correct behavior. (check the browser console for the error). https://stackblitz.com/edit/qwik-starter-ccnona?file=src%2Froutes%2Findex.tsx

tri2820 commented 6 months ago

This issue still persists with

"@builder.io/qwik": "^1.4.5",
 "@builder.io/qwik-city": "^1.4.5",

Minimal example (nearly the same as what @jmsegrev given above)

import { component$, useSignal } from "@builder.io/qwik";
import { Link, type DocumentHead } from "@builder.io/qwik-city";

export default component$(() => {
  const clicked = useSignal(false);
  return (
    <>
      <button
        onClick$={() => {
          clicked.value = true;
        }}
      >
        Click me
      </button>
      {clicked.value && <Link href="https://google.com">Hello</Link>}
    </>
  );
});

@wmertens Can we re-open the issue?

wmertens commented 6 months ago

The reason is that in this repro nothing is using the qwik city context during SSR, so it's not sent along with the state.

wmertens commented 6 months ago

Actually, this is basically a duplicate of #5411