[🐞] "Missing Object ID for captured object" error when using useComputed$ with mutable props

[jessezhang91]

Which component is affected?

Qwik Runtime

Describe the bug

I have an <Icon> component that modifies the props in a useComputed$ and spreads the result in an <i> element. I expect this to work (it was working in v1.2.6) but I get a "QWIK ERROR Error: Code(27): Missing Object ID for captured object" instead.

I'm not sure what the exact problem is but I've managed to replicate it in a simpler form that doesn't represent the actual real-world use case. From what I can tell the replication requires: (1) mapping over an array, (2) accessing the entire props object (i.e. not just a field of props) in useComputed$, and (3) mutating a value that gets put into the component's props.

Reproduction

https://stackblitz.com/edit/qwik-starter-t3qhf8?file=package.json,src%2Froutes%2Findex.tsx

Steps to reproduce

1. npm install && npm run dev

It immediately fails but if it doesn't I've noticed refreshing the page will cause the error to be thrown.

System Info

System:
    OS: macOS 13.5.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 1.29 GB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.13.0 - ~/.nvm/versions/node/v18.13.0/bin/node
    npm: 8.19.3 - ~/.nvm/versions/node/v18.13.0/bin/npm
  Browsers:
    Chrome: 116.0.5845.96
    Firefox Developer Edition: 116.0
    Safari: 16.6
  npmPackages:
    @builder.io/qwik: ^1.2.7 => 1.2.7
    @builder.io/qwik-city: ^1.2.7 => 1.2.7
    undici: ^5.23.0 => 5.23.0
    vite: 4.4.9 => 4.4.9

Additional Information

I believe this is related to https://github.com/BuilderIO/qwik/pull/4872. My code was working in v1.2.6.

[stackblitz[bot]]

Start a new pull request in StackBlitz Codeflow.

• qwik-starter-t3qhf8 (Open reproduction)

[tzdesign]

We experience the same for a polymorphic component which is rendered dynamically inside of a campaign coming from our cms. If we add an ID outside, it works, but this can't be the solution.

@jessezhang91 good that you reproduced it.

[mhevery]

I have a smaller repro:

import { component$, useComputed$, useSignal } from '@builder.io/qwik';

export default component$(() => {
  const count = useSignal(123);
  return (
    <>
      <button onClick$={() => (count.value += 1)}>Next</button>
      {[count.value].map((o) => (
        <Child key={o} value={o} />
      ))}
    </>
  );
});

export const Child = component$<{ value: number }>((props) => {
  const foo = useComputed$(() => props.value);
  return <div>{JSON.stringify(foo.value)}</div>;
});

[mhevery]

Bisect yields https://github.com/BuilderIO/qwik/commit/4e032935ad57c0c0bd947e0ee506d5e5465a022f as culprit

[xmimiex]

"useComputed$" has been almost unusable since the end of August, in my opinion this is a critical bug, do you have the time to take a closer look? thank you very much.

[mhevery]

let me have a look.

[sarat1669]

I am facing this issue. Is this a regression?

Internal server error: Code(27): Missing Object ID for captured object

[wmertens]

@sarat1669 can you repro, preferably with https://qwik.dev/playground ?

Are you using noSerialize somewhere?

[gnemanja]

@sarat1669 have you found what the issue was? Getting the same error when SSR a specific route

[gnemanja]

In our code, the bug occurs when component A passes a prop to component B like this: <B someValue={chooseValue ? 1 : 2} /> and B uses someValue in useComputed.

Tried reproducing it in playground but didn't work. We are kinda stuck on version 1.5.6 of Qwik so maybe the bug has been fixed. Or more things that are happening in our code are coming together to produce the issue.

@sarat1669 if you have the same issue as us, moving chooseValue ? 1 : 2 to a useComputed solves the issue

EDIT: chooseValue has to be a prop of component A for this to crash

[wmertens]

@gnemanja under console -> options you can choose the Qwik version of the repl

Here's a direct link to 1.5.6: https://qwik.dev/playground/#v=1.5.6&f=G000o4mG5EQDAA

[gnemanja]

@gnemanja under console -> options you can choose the Qwik version of the repl

Here's a direct link to 1.5.6: https://qwik.dev/playground/#v=1.5.6&f=G000o4mG5EQDAA

Thanks. It works, so it's not because of the qwik version... :(

[wmertens]

Can you paste your attempt?

Ideally you'd compare the playground client modules output with your build, to see if the generated code is similar or not