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

<svelte:element this={"script"}>{@html str}</svelte:element> crashes due to persistent HTML_TAG_START #11225

Closed
samijaber opened this issue Dec 7, 2023 · 2 comments
Closed

<svelte:element this={"script"}>{@html str}</svelte:element> crashes due to persistent HTML_TAG_START #11225

samijaber opened this issue Dec 7, 2023 · 2 comments

Comments

@samijaber
Copy link

Describe the bug

  • add <svelte:element this={"script"}>{@html "console.log(\"hello world\")"}</svelte:element> to your code
  • inspect the SSR'd HTML: it is <script><!-- HTML_TAG_START -->console.log("hello world")<!-- HTML_TAG_END --></script>
  • the script does not run as a result of crashing (due to the invalid syntax inside of it)

Reproduction

https://stackblitz.com/edit/sveltejs-kit-template-default-4aozhb?description=The%20default%20SvelteKit%20template,%20generated%20with%20create-svelte&file=src%2Froutes%2F%2Bpage.svelte,src%2Froutes%2F%2Blayout.svelte&title=SvelteKit%20Default%20Template

resulting URL: https://sveltejskittemplatedefault4aoz-01al--5173--d3416dfd.local-credentialless.webcontainer.io/ (inspect response to see SSR source)

Logs

Resulting SSR'd HTML:


<!doctype html>
<html lang="en">
	<head><script src="/.localservice@runtime.d3416dfd.js"></script>
		<meta charset="utf-8" />
		<link rel="icon" href="./favicon.png" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		
	</head>
	<body data-sveltekit-preload-data="hover">
		<div style="display: contents">  <div class="app"><main><script><!-- HTML_TAG_START -->console.log("hello world")<!-- HTML_TAG_END --></script></main></div> 
			
			<script>
				{
					__sveltekit_dev = {
						base: new URL(".", location).pathname.slice(0, -1),
						env: {}
					};

					const element = document.currentScript.parentElement;

					const data = [null,null];

					Promise.all([
						import("/node_modules/@sveltejs/kit/src/runtime/client/start.js"),
						import("/@fs/home/projects/sveltejs-kit-template-default-4aozhb/.svelte-kit/generated/client/app.js")
					]).then(([kit, app]) => {
						kit.start(app, element, {
							node_ids: [0, 2],
							data,
							form: null,
							error: null
						});
					});
				}
			</script>
		</div>
	</body>
</html>

System Info

N/A

Severity

blocking an upgrade

Additional Information

I work on a Svelte SDK that needs to provide a script that will execute immediately on the client-side. This approach is the only way that I am aware off to try and accomplish that.

NOTE: I had the same issue with <style> tags, however in that case I was able to workaround it by including the tag itself inside of @html:

{@html `<style>${styles}</style>`}

However, this same solution doesn't work with scripts
@samijaber
Copy link
Author

samijaber commented Dec 7, 2023 •
edited
Loading

I did some more testing, and this is a bit more complciated. Given the two approaches I am aware of:

  • 1: have the entire tag inside @html:
{@html "<script>console.log(\"hello 1\")</script>"}
  • 2: use <svelte:element> and only put the inner contents in @html
<svelte:element this={"script"}>{@html "console.log('hello 2')"}</svelte:element>

Option 1) works in Sveltekit SSR but not in a plain CSR'd svelte app.
Option 2) works in a CSR svelte app but not in Sveltekit SSR.

For reference, here's a Svelte REPL: https://svelte.dev/repl/c44e0e81e0fa4eb2886ade37db86f74e?version=4.2.8

As a library author, I would like whatever approach I use to work in both scenarios, hence this issue still being valid IMHO.

@eltigerchino
Copy link
Member

Closing this because I can't reproduce the crash using Svelte 5 and the latest version of SvelteKit. Note however there is a hydration mismatch warning produced by Svelte in the browser logs.

[svelte] hydration_mismatch
Hydration failed because the initial UI does not match what was rendered on the server

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@samijaber @eltigerchino