svelte: Svelte 5 : Basic HTML Javascript Functions do NOT work in Svelte Anymore

Describe the bug

In Svelte 4 and previous versions, I could write this code and it would be fine <div onload=“svelteloader()”</div> 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

Windows 10

Severity

blocking all usage of svelte

About this issue

  • Original URL
  • State: closed
  • Created 8 months ago
  • Comments: 17 (9 by maintainers)

Most upvoted comments

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? From understanding your use case better we can get a better idea of how to solve it or at least give you a workaround.

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 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.

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.

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.

Could you clarify why you wrote it like this / why you want/need this?

Also it wouldn’t let me use tags like body and other very weird things that are basic HTML Svelte should allow.

What do you mean by that? Could you give details / an example / a reproducible?