Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[🐞] New child added cannot access to parent context #6851

Open
jcfauchet opened this issue Sep 2, 2024 · 2 comments
Open

[🐞] New child added cannot access to parent context #6851

jcfauchet opened this issue Sep 2, 2024 · 2 comments
Labels
STATUS-1: needs triage New issue which needs to be triaged TYPE: bug Something isn't working

Comments

@jcfauchet
Copy link
Contributor

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
Copy link
Contributor

related to #6821

@JerryWu1234
Copy link
Contributor

@jcfauchet the latest answer is in 6821,

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
STATUS-1: needs triage New issue which needs to be triaged TYPE: bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants