can I take this issue and try to solve it @mhevery ?

Yes, but let’s discuss the solution first. I don’t think there is an easy fix, so I don’t want you to spend time on a solution that will not be mergeable into a repo.

Yep @damianpumar let’s go for it. thanks 💪

using useComputed$ also gives this error in a similar way, like in this following code:

    const swiper = useSignal<Element & { swiper: SwiperClass }>();
    const active = useComputed$(() => swiper.value ? swiper.value!.swiper.activeIndex : 0)

yes, it is the same issue. useCompute and useTask are essentially the same under the hood.

OK here is what is happening.

• The useTask$ tracks ref.
• The task runs before JSX and sets up a subscription on ref
• The component is rendered, and the ref is updated with MockElement (since SSR). This update marks the task as dirty.
• During serialization the QWIK WARN Serializing dirty task. Looks like an internal error. is shown because we are serializing a task that is dirty (Task needs to re-run) But during SSR we don’t re-run tasks.

Solution

It is not clear to me what the right solution is. Here are the options:

• Suppress error, but that is kind of wrong since the task is dirty and needs to re-run. For example, during CSR you would expect the task to run twice. Once with ref of null and once when ref gets set. But in the case of SSR the second execution of the task is swallowed by the serializer. One can’t eagerly execute the tasks on the client as this is not a useVisibleTask$
• Logically one would expect that the task runs twice. Once during initialization as part of SSR and then eagerly on the client once the ref is set to the actual DOM references. So is this another way to run code eagerly??? I don’t like that idea since in wast number of cases we are only interested when ref changes not when it is deserialized.

🤔

Workaround

1. Ignore the error…
2. Use useVisibleTask$ when you want to track if the element changes and want to be eagerly notified about the change.

Simpler reproduction:

import { component$, useSignal, useTask$ } from "@builder.io/qwik";

export default component$(() => {
  const ref = useSignal<HTMLElement>();

  useTask$(({ track }) => {
    track(() => ref.value);
  });
  return <h1 ref={ref}>TEST</h1>;
});