-
-
Notifications
You must be signed in to change notification settings - Fork 4.1k
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.
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
Svelte 5: Nested form control bindings causes runtime error #11941
Comments
This is listed as one of the breaking changes in Svelte 5. What's your use case for creating invalid HTML? |
The error here isn't actually a compiler error - it's a runtime error - but, in cases where we can see both |
No use case, just porting Svelte 4 code, this made us realize we were actually shipping invalid HTML, so it's kind of good this errors then. It was a bit hard to spot since one form lived deeply inside a component. If this is as expected you may close this, could you link where this is listed as a breaking change? I just think it's a bit hard to know what you're doing wrong since it only throws when |
Huh I tell a lie, this isn't listed yet in the breaking changes. |
I agree with this...if it's statically analizable throwing a compiler error with a nice message is preferrable. I can work on this but i would love some kind of approval if that's something we actually want to do. |
Yes, we already have a validation for this in place, seems like it's missing the form/form case. Though as others have said this only works when things are within the same component. In the mid term it would be cool to investigate if there's something we can do at runtime in dev mode |
will check on that :) |
So i've started investingating this a bit:
import * as $ from "svelte/internal/client";
var root = $.template(`<form><form><input></form></form>`); // this ends like this <form><input></form>
export default function App($$anchor) {
let value = $.source('');
var form = root();
var form_1 = $.child(form); // the child of the form is the actual input
var input = $.child(form_1); // the input doesn't have a child so this is null
$.remove_input_attr_defaults(input);
// this fails because is setting a listener on null is not possible.
$.bind_value(input, () => $.get(value), ($$value) => $.set(value, $$value));
$.append($$anchor, form);
}
import * as $ from "svelte/internal/client";
var on_input = () => {};
var root = $.template(`<form><form><input></form></form>`);
export default function App($$anchor) {
var form = root();
$.validate_element(form, "form");
var form_1 = $.child(form);
$.validate_element(form_1, "form");
var input = $.child(form_1);
$.validate_element(input, "input");
input.__input = [on_input];
$.append($$anchor, form);
}
$.delegate(["input"]); this in theory is guaranteed to error for at least 1 element (either is null or the wrong expected element) but to be fair i don't know how well it would scale and the performance hit. In the meantime i'm gonna open the PR to fix the validator we can iterate there or in another PR. |
Reopening this since we still haven't fixed |
- relax validation in some places where we know the HTML will not break or only break when using SSR - consolidate validation in one place and for better reuse, which results in more cases getting caught at runtime closes #11941
Describe the bug
When binding to inputs in nested forms, the binding fails and a runtime error is thrown:
Although nested forms are not valid according to the HTML spec, the error should be either friendlier or not throw at all since it worked just fine in Svelte 4.
Reproduction
https://svelte-5-preview.vercel.app/#H4sIAAAAAAAACkWM2wrDIBBEf0WWQloQfLe20O-ofbDJCoI3dA2EkH8vNoEwL2eGw6xgnccK8r1CNAFBwitn4EBL7qXO6AmBQ02tjH1RdSwu01NHTR6JzcY3ZA92qWQIr8Nwu-uoxGlFZVMJf_-kHuVibsS-Lk5yfxG7JQ7tAOAQ0uSswwkklYbbZ_sBkmW8mbgAAAA=
Logs
System Info
Severity
blocking an upgrade
The text was updated successfully, but these errors were encountered: