[Bug]: FormEncType type is missing newly supported application/json

[nicksrandall]

What version of React Router are you using?

6.14

Steps to Reproduce

Try to use Fetcher.submit in a TS environment with encType: "application/json"

Expected Behavior

New encTypes would be allowed by TS

Actual Behavior

TS complains because types are missing.

[MichaelDeBoey]

@nicksrandall application/json is not a supported encType, which is the exact reason @brophdawg11 didn't include it if I remember correctly

• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#enctype
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#formenctype
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/submit#formenctype
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/image#formenctype

[kiliman]

Interesting. It's explicitly suggested in the Remix v1.18 release notes, so either the note is wrong, or the type wasn't updated as needed.

https://github.com/remix-run/remix/releases/tag/remix%401.18.0

[timdorr]

I'm wondering if that's a design error on Remix's part. The spec only lists three possible values for encType, so application/json would be erroneous according to the spec and therefore be invalid HTML when rendered.

But at the same time, the application/* MIME types are generally intended for application-specific definitions outside of hard specification values. And handling JSON-formatted data would be helpful for a number of different reasons.

There's probably a middle ground here. I'm not sure if the discussion should live here or the Remix repo. But it's probably worth discussing.

[kiliman]

I don't think it's a spec issue. The whole point of allowing submit and fetcher.submit to post JSON data is that the native API doesn't support it. This is an extension that explicitly enables that use case.

Technically I think it should allow any encType. For known types like application/x-www-form-urlencoded and application/json, the function will know how to convert the body. For anything else, it should just set the body and the Content-Type header of the request. The action code can check the request header and parse the body accordingly.

[brophdawg11]

@nicksrandall Can you double check your local setup and/or provide a reproduction?

FormEncType was updated in 6.14.0 to include all 4 options, and both useSubmit and fetcher.submit should support it via SubmitOptions.

Locally this works as expected for me using 6.14.0:

As noted above, application/json is not supported by <form>, and thus is not allowed on the <Form> component.

[brophdawg11]

Technically I think it should allow any encType

@kiliman That's not a bad idea, and would be pretty minor changes to allow - give us a string body and we'll just send whatever encType you specified and let you work it out via request.text(). Feel free to open a proposal and we can run it by the rest of the team.

[nicksrandall]

I closed this issue because I realized my setup was wrong.

That said, I wish the type signature of submit was narrowed by encType.