[🐞] QWIK WARN JSX is receiving duplicated props (class).

[primozs]

Which component is affected?

Qwik Runtime

Describe the bug

"QWIK WARN msg This is likely because you are spreading {...props}, make sure the props you are spreading are not already defined in the JSX."

Why such general warning if it is not an issue? Why should I not override props or attributes with new props?

Reproduction

none

Steps to reproduce

`ts export const SearchIcon = component$((props: Props) => { return ( <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="h-5 w-5" {...props}

<path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z" clip-rule="evenodd" /> ); });`

System Info

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

Additional Information

No response

[cmbartschat]

I think this warning is working as intended. There are two different approaches, but either should make the warning go away for you:

export const SearchIcon = component$(({class: classProp, ...rest}: Props) => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 20 20"
      fill="currentColor"
      aria-hidden="true"
      // you can do either of these depending on what you want
      class={classProp ?? "h-5 w-5"}
      class={[classProp, "h-5 w-5"]}
      {...rest}
    >
      {" "}
      <path
        fill-rule="evenodd"
        d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
        clip-rule="evenodd"
      />{" "}
    </svg>
  );
});

[primozs]

I think this warning is working as intended. There are two different approaches, but either should make the warning go away for you:

export const SearchIcon = component$(({class: classProp, ...rest}: Props) => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 20 20"
      fill="currentColor"
      aria-hidden="true"
      // you can do either of these depending on what you want
      class={classProp ?? "h-5 w-5"}
      class={[classProp, "h-5 w-5"]}
      {...rest}
    >
      {" "}
      <path
        fill-rule="evenodd"
        d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
        clip-rule="evenodd"
      />{" "}
    </svg>
  );
});

thank you @cmbartschat :) You are still spreading ...rest. ?! This wont work for the rest :)

[primozs]

In the new version of Qwik this would not work any more:

1. you have styled button with default type button
2. later you use the button in a form and set is as type submit

Why spreading props is not possible or allowed any more in all cases?

const Button = component$<ButtonProps>(
  (props) => {
    return (
      <button
        type="button"
        {...props}
        // style
      >
        <Slot />
      </button>
    );
  },
);

[manucorporat]

What do you mean it does not work? isnt the spread working for you?

[manucorporat]

We could remove the warning, but it would not fix/change anything, the warning is there with the only goal to make help u. Your class is getting replaced.

[primozs]

1. In the case of a class its just a warning. Yes, and I want it to be replaced. Because its just styled component with some defaults that I want to override.

2. In the case of a button on a form it does not work as type submit any more.

So styled button has default type attribute "button" because most of the time it is used with a click handler. But when used in the form as "submit" it stopped working in the latest version. I migrated from v0.24.0 to the latest. It's not an issue for me to fix it, I would just expect it to be possible. Both cases. I understand its not the same as some other complex components.

Second case might be related with client side form submit handler preventdefault:submit onSubmit$={onSubmit} but it should work. (its a form and js)

If I remove type="button" in styled component then it works again.