Duplicate key "checked" in object literal: <input type="checkbox" checked={field.value} />

[yasserlens]

The following warning is thrown at build time by Vite. I couldn't find a way to conditionally set the "checked" value based on the "checked" prop/attr being there or not.

I see I can use Modular Form's "Checkbox" element - not sure if that has the same issue or not - but I want to use a vanilla field instead.

Error:

[plugin vite:esbuild] src/routes/info/index.tsx: Duplicate key "checked" in object literal
502|                                          return field.value;
503|                                      },
504|                                      checked: _wrapSignal(field, "value")
   |                                      ^
505|                                  }, {
506|                                      type: _IMMUTABLE,

FYI Here's the whole html block where this is happening:

<Field type="boolean" name="checkboxFieldExample">
  {(field, props) => (
    <label>
      <input type="checkbox" {...props} checked={field.value} />
      <span>Field label goes here..</span>
    </label>
  )}
</Field>

Ideally - I should be able to do something like this (doesn't work obviously):

<input 
  type="checkbox" 
  {...(props.checked !== undefined ? {} : { checked: field.value })} 
  {...props} 
/>

Any recommendations?

[fabian-hiller]

Interesting. I never had this problem. The second should overwrite the first. I have no idea and recommend creating an issue at Vite or SolidJS.

[yasserlens]

Thanks @fabian-hiller. Is the suggestion solution feasible though?
Could the "checked" attr and others associated with an input field be exposed via props or field?

<Field type="boolean" name="checkboxFieldExample">
  {(field, props) => (
    <label>
      <input 
        type="checkbox" 
        {...(props.checked !== undefined ? {} : { checked: field.value })} 
        {...props} 
      />
      <span>Field label goes here..</span>
    </label>
  )}
</Field>

[fabian-hiller]

This is currently not possible because <Field /> only provides the data layer and does not dictate how to use it. I am still confused as to why this error occurs at all. I have never heard of this problem before.