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.

Sign up for GitHub

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

Jump to bottom

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

Open
yasserlens opened this issue Jul 28, 2024 · 3 comments
Open

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

yasserlens opened this issue Jul 28, 2024 · 3 comments
Assignees
@fabian-hiller
Labels
question Further information is requested

Comments

@yasserlens
Copy link

yasserlens commented Jul 28, 2024 •
edited
Loading

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

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.

@fabian-hiller fabian-hiller self-assigned this Jul 29, 2024
@fabian-hiller fabian-hiller added the question Further information is requested label Jul 29, 2024
@yasserlens
Copy link
Author

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

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@fabian-hiller fabian-hiller

Labels
question Further information is requested
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@yasserlens @fabian-hiller