Svelte 5 : Basic HTML Javascript Functions do NOT work in Svelte Anymore #9437
Comments
svelteagen
changed the title
Could you clarify why you wrote it like this / why you want/need this?
What do you mean by that? Could you give details / an example / a reproducible? |
I've always had it. I thought Svelte would continue to work with normal HTML, I guess not anymore? This imo is a horrible decision to get rid of support for HTML. I dont want Svelte's on:click function, I want HTML's onclick function. This was why I and many others loved Svelte, because it works with HTML. It does not anymore. Please fix. I will be on Svelte 4 forever because I need full HTML support. I guess time to rewrite a lot of my app into Svelte and out of HTML. It uses Svelte but written in HTML so everything broke...... Didn't expect Svelte to ever drop support for HTML........ that's why people loved it. The ease of use for anyone to use. |
|
Firstly, calm down. Secondly, String |
Sorry and I understand. This change could divide the Svelte community and the portion of it that were using it for HTML. I have hundreds if not thousands of functions I have to change around to match Svelte's syntax. This change broke my entire app, completely, because it's written in HTML, not Svelte. Svelte was the only framework that worked with HTML and this is why I originally chose Svelte. Nonetheless, I'll take a long time and try to change everything so Svelte 5 works. |
|
Please try to give details on why you originally wrote your app that way, using strings. Was it because you have a preexisting "plain-old" html site and you have upgraded it to use Svelte over time? |
Yes, I brought HTML to Svelte. Here's the problem : Svelte's on:click does not work with things like document.getElementById I have on:click={main} for an img and <script>function main() { document.getElementById("main").style.marginLeft = "320px"; } </script> I have to rewrite EVERY function of my app in Svelte now, this is crazy. Svelte dropping HTML support is the biggest L it has ever taken. Rich Harris promised Svelte would be flexible to every situation. Svelte just sucks now, I don't want to use it anymore. This is a horrible change. Svelte is becoming React, and getting rid of support for HTML............. That's the best way to put it. This change will kill Svelte and the community will leave. Tons of people love Svelte for its HTML support. Why get rid of it? Ugh just sucks. I want to use onclick=main() in Svelte which I've been able to use up til now. If it's not broke why fix it? I don't want Svelte's syntax. I want HTML's syntax in Svelte. It's way easier, and honestly I like it better than Svelte's version. Heck, you can't even use html body tags in Svelte anymore. It's sooooooo broken. I cant use jquery anymore which my app relies on because of how complex it is to make that work with Svelte functions. In HTML, jquery is a breeze. This update broke that too. I'm staying on Svelte 4 forever and ever until you add back HTML support because this is BS. I'm sorry for being so harsh but the Svelte community will riot until HTML support is back. This IS why so many people started using Svelte, because it supports HTML out of the box unlike other frameworks. Getting rid of HTML is the worst decision this team has ever made. |
It does work! Here is an example: https://svelte.dev/repl/d346ea633944475c8741bdd7bed32b7f?version=4.2.3 - You have full access to the dom just like you do with any javascript code you ship to a browser environment.
What do you mean here by HTML? Svelte provides an easier way to write apps but at the end of the day, just like with something like react, it's just HTML/CSS/JS.
If you to write something vanilla you should just write in a regular .html file, rather than a .svelte file I do appreciate that historically it's been significantly easier than other frameworks to drop in an old html page and have it "just work", but talking from experience it's not even completely possible with Svelte 4 and this happen a bit more with Svelte 5.
It's was never intended for anyone do have a body tag in Svelte, you can only have one body tag per page and the nature of components is that they can be mounted more than once per document. |
That REPL is Svelte 4 not Svelte 5. HTML does NOT NOT NOT work in Svelte 5. |
It works here on REPL but not in my own project. It does nothing in Svelte 5. I dont know if its because Im using Sveltekit? I'm on the latest versions of Vite, Node JS. I tried deleting different parts of my project and still cant find where the conflict is. This one's on the Svelte team to fix. My project was perfectly fine until Svelte 5 came. All my functions worked and now I gotta change everything. I think the most irritating part is that this IS a bug that needs an emergency fix, but the Svelte team acts like they're moving on from allowing HTML and this change is perfectly fine. Huge shock, and I hate it. |
If you can share a reproduction I can take a look, please remember that Svelte 5 is still in development and things will take time to iron out |
https://github.com/SaucyOfficiale/Saucy Keep in mind this is still in Svelte 4 and not updated. I've updated the functions for Svelte 5 from for example onclick=something() to : on:click={something} which only I can see locally. However that basic function in the REPL doesn't work anywhere in this Svelte project. I do have Svelte 5 locally installed, but the REPL doesn't work in project. |
Saucy is one of the largest projects on Svelte. Svelte 5 needs to do better to support HTML because this is not okay and it screws us over. It should work just like it did in Svelte 4. I'm confused as to why they dropped support for it. We don't use Svelte for just Svelte. We use it for Sveltekit so we can have a fast HTML app. I love the way Svelte 4 worked with HTML it was flawless. Svelte should NEVER have gotten rid of allowing onclick="function()" that is perfectly fine HTML. I hate this decison. I'm either stuck with Svelte 4, or I will leave Svelte and have to find another way. There is no reason why that repository can't work with Svelte 5. It did with Svelte 4. Why would they do this......... I can't be the only one complaining. I've seen on tons of blogs people talking about Svelte HTML support. Looks like those days are over. Svelte doesn't care about or want HTML. |
SvelteKit is designed for you to build apps with Svelte, not with vanilla HTML - there are plenty of ways to make an app with vanilla HTML if that's what works best for you. Changing Svelte's syntax is part of what we do as we learn what works and what doesn't to build the best apps possible, and to keep improving the language overtime. The change to how event handlers are written in Svelte has been added in line with this idea of improving Svelte. As Rich (and others) have already pointed out, listeners such as
It being easier to convert vanilla HTML apps to Svelte has always been something that the Svelte community loves, but it's never been 100% foolproof as I shared before in this thread. This change will harm this ability you are correct, however, it's not as heavy of a change as you're making it out to be. It's simple enough to convert old code using these listeners to something Svelte can understand whilst still running those old functions if you must. Finally, it is not intended for you to author new Svelte 3/4 code using these vanilla HTML event handlers, as it's Svelte code. You should be using the Svelte event handlers here. I'd recommend you take a look at learn.svelte.dev because I feel like you're missing out on some awesome features whilst trying to write out of date HTML code and jquery. If you want some genuine help please reach out, but otherwise spamming issues here won't get you any further. We're all trying to make the best framework possible. Please also take some time to read our Code of Conduct. |
I dont care how bad it is. It works for my Svelte app. I need full HTML support. Let people use Svelte how they want! Stop forcing Svelte's features on everyone. Imo this is the death of Svelte. I will be moving elsewhere that supports HTML. |
|
For anyone looking for a workaround, here are three: use eval- onclick="foo()"
+ onclick={() => eval("foo()")}This makes the code work as before (careful what you pass into use preprocessor and postprocessor
wrap places with
|
Describe the bug
In Svelte 4 and previous versions, I could write this code and it would be fine
<div onload="svelteloader()"
with the funtion svelteloader defined in a /js/main.js file.
Now when I try this in Svelte 5 it FORCES me to use Svelte's on:load instead of HTML, and throws the error
"Event attribute must be a JavaScript expression, not a string svelte (invalid-event-attribute-value)"
Please fix. It broke my entire project! This is really broken.
Also it wouldn't let me use tags like body and other very weird things that are basic HTML Svelte should allow.
Reproduction
N/A (private repo)
Logs
No response
System Info
Severity
blocking all usage of svelte
The text was updated successfully, but these errors were encountered: