QwikDev / qwik

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

[šŸž] New child added cannot access to parent context #6851

Open jcfauchet opened 2 months ago

jcfauchet commented 2 months ago

Which component is affected?

Qwik Runtime

Describe the bug

We noticed a bug by rendering a new element under a parent with context. Qwik try to render the new element, it throws an error telling us he cannot access to the parent context :

image

Here is the corresponding code :

Parent wrapper

import { component$, createContextId, Slot,  useContextProvider, useStore } from "@builder.io/qwik";

export const WrapperContext = createContextId<{
  active: boolean
}>('FLOWBITE_QWIK_WRAPPER_CONTEXT')

export const Wrapper = component$(() => {
  useContextProvider(WrapperContext, useStore({ active: false }))

  return <div>
    <Slot />
  </div>
})

Child item added dynamically

import { component$, Slot, useContext } from "@builder.io/qwik";
import { WrapperContext } from "./Wrapper";

export const Child = component$(() =>  {
  const context = useContext(WrapperContext)

  return <div data-active={context.active}>
    <Slot />
  </div>
})

Page adding Child item to Wrapper :

import { component$, useStore } from "@builder.io/qwik";
import { Child } from "~/components/Test/Child";
import { Wrapper } from "~/components/Test/Wrapper";

export default component$(() => {
  const childs = useStore([1, 2, 3]);

  return (
    <>
      <button onClick$={() => {
        childs.push(childs.length + 1);
      }}>
        Add child
      </button>
      <Wrapper>
        {childs.map((child) => (
          <Child key={child}>{child}</Child>
        ))}
      </Wrapper>
    </>
  );
});

You can reproduce the bug on the reproduction repo attached

Reproduction

https://github.com/qwikerx/issue-table-reactivity

Steps to reproduce

pnpm install pnpm run dev click the Add child button Check the error log in the console

System Info

System:
    OS: macOS 14.5
    CPU: (10) arm64 Apple M1 Max
    Memory: 613.77 MB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.13.1 - ~/.nvm/versions/node/v20.13.1/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v20.13.1/bin/yarn
    npm: 10.5.2 - ~/.nvm/versions/node/v20.13.1/bin/npm
    pnpm: 9.1.1 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 128.0.6613.113
    Safari: 17.5
  npmPackages:
    @builder.io/qwik: ^1.8.0 => 1.8.0
    @builder.io/qwik-city: ^1.8.0 => 1.8.0
    typescript: 5.4.5 => 5.4.5
    undici: * => 6.19.8
    vite: 5.3.5 => 5.3.5

Additional Information

No response

JerryWu1234 commented 2 months ago

related to #6821

JerryWu1234 commented 2 months ago

@jcfauchet the latest answer is in 6821,