Newline in child element text causes parse error in Svelte 5.17.4

[charlie-roosen]

Describe the bug

Starting with Svelte 5.17.4, there is a parse error when the text passed as a child element contains a newline.

Occurring on Windows using VS Code in runes mode.

Reproduction

Attaching images and uploading with "txt" extension as uploading "svelte" files isn't supported.

CustomDiv.txt

CustomPanel.txt
package.json

Logs

PS C:\cr-bitbucket\RMP Platform Scala\w2e-svelte\svelteui> npm run dev

> svelteui@0.0.1 dev
> vite dev

  VITE v6.0.7  ready in 4361 ms

  ➜  press h + enter to show help
09:45:47 [vite] (client) Pre-transform error: Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.
  Plugin: vite:import-analysis
  File: C:/cr-bitbucket/RMP Platform Scala/w2e-svelte/svelteui/src/lib/components/items/dialogs/CustomPanel.svelte:20:33
  18 |                          $.next();
  19 |
\nSecond line');                var text = $.text('First line
     |                                  ^
  21 |
09:45:47 [vite] Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.
  Plugin: vite:import-analysis
  File: C:/cr-bitbucket/RMP Platform Scala/w2e-svelte/svelteui/src/lib/components/items/dialogs/CustomPanel.svelte:20:33      
  18 |                          $.next();
  19 |
\nSecond line');                var text = $.text('First line
     |                                  ^
  21 |
  22 |                          $.append($$anchor, text);
      at TransformPluginContext._formatError (file:///C:/cr-bitbucket/RMP%20Platform%20Scala/w2e-svelte/svelteui/node_modules/vite/dist/node/chunks/dep-BJP6rrE_.js:47397:41)
      at TransformPluginContext.error (file:///C:/cr-bitbucket/RMP%20Platform%20Scala/w2e-svelte/svelteui/node_modules/vite/dist/node/chunks/dep-BJP6rrE_.js:47392:16)
      at TransformPluginContext.transform (file:///C:/cr-bitbucket/RMP%20Platform%20Scala/w2e-svelte/svelteui/node_modules/vite/dist/node/chunks/dep-BJP6rrE_.js:45593:14)
      at async EnvironmentPluginContainer.transform (file:///C:/cr-bitbucket/RMP%20Platform%20Scala/w2e-svelte/svelteui/node_modules/vite/dist/node/chunks/dep-BJP6rrE_.js:47223:18)
      at async loadAndTransform (file:///C:/cr-bitbucket/RMP%20Platform%20Scala/w2e-svelte/svelteui/node_modules/vite/dist/node/chunks/dep-BJP6rrE_.js:41034:27)
      at async viteTransformMiddleware (file:///C:/cr-bitbucket/RMP%20Platform%20Scala/w2e-svelte/svelteui/node_modules/vite/dist/node/chunks/dep-BJP6rrE_.js:42478:24)

System Info

PS C:\cr-bitbucket\RMP Platform Scala\w2e-svelte\svelteui> npx envinfo --system --npmPackages svelte,rollup,webpack --binaries --browsers

  System:
    OS: Windows 11 10.0.22631
    CPU: (12) x64 12th Gen Intel(R) Core(TM) i7-1265U
    Memory: 16.55 GB / 31.69 GB
  Binaries:
    Node: 20.10.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.9.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (130.0.2849.68)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    svelte: ^5.17.4 => 5.17.4

Severity

blocking an upgrade

[Prinzhorn]

Instead of posting screenshots of code and adding them as txt files here, you can create a REPL. This makes it super easy for everyone to reproduce your issue.

[charlie-roosen]

Thanks for the tip and link regarding the repl.

I've created one, and I'm not seeing the problem.

https://svelte.dev/playground/0b65b04be8dc450288d2c592e239a31f?version=5.17.4

I suspect it's a Linux/Windows difference regarding end-of-lines.

But I guess it could also be the versions of other packages. Is there a way in the repl to specify the exact version of rollup etc?

[Prinzhorn]

Is there a way in the repl to specify the exact version of rollup etc?

I don't think so. For more complex repros I often see people using https://stackblitz.com/

For me it looks more like a tooling issue. There's something in your pipeline that does not properly process the file and writes it into a new place without properly encoding the newline, making it a verbatim newline. I doubt this is an issue with Svelte itself. Are you sure this happened solely because of a Svelte upgrade?

[Prinzhorn]

Looking at the output again, this looks weird

\nSecond line');                var text = $.text('First line

So maybe you actually do have a control character in there? And the REPL prevents them.

[charlie-roosen]

It definitely happened just by changing the svelte version from 5.17.3 to 5.17.4 and doing "npm install".

I should note this is in a sveltekit application. I'll work on getting a trimmed down full project and try it with/without sveltekit.

[jsurkont]

I think, I'm hitting the same kind of error. Please see the CI logs. It only occurs on the Windows runner (Linux and Mac are fine).

Reverting esrap from 1.4.2 to 1.3.2 fixes the issue. I'm using Svelte 5.17.3, because 5.17.4 requires esrap 1.4.2, which also doesn't build on Windows.

Hopefully this provides some additional context.

[charlie-roosen]

I can confirm, the issue does seem to be due to the esrap version. With svelte 5.17.4 the issue disappears if I force the use of esrap 1.3.2 and comes back if I force the use of esrap 1.4.2 via the "overrides" in the package.json.

"overrides": {
	"svelte": {
		"esrap": "1.3.2"
	}
},

[charlie-roosen]

It works with esrap 1.3.7. Fails in a different component in 1.4.0. Fails in the current way in 1.4.1.

Could be related to this change in esrap 1.4.1?

sveltejs/esrap@10c6156

That has some replacement of "\n" being done.

[Prinzhorn]

Could be related to this change in esrap 1.4.1?

I came to the same conclusion and linked this issue with the esrap PR

[Rich-Harris]

reopening until we've bumped the dependency version

[paoloricciuti]

I think we need Windows Manager @dummdidumm to test this 😄

[PixelForm]

I'm having the same problem on svelte 5.17.4 when using prettier which formats the code to span multiple lines. I think the compiler should know to fix these text issues. Also I think it's better if strings in text nodes are properly evaluated to prevent any open door to XSS.

[paoloricciuti]

I'm having the same problem on svelte 5.17.4 when using prettier which formats the code to span multiple lines. I think the compiler should know to fix these text issues. Also I think it's better if strings in text nodes are properly evaluated to prevent any open door to XSS.

This was a bug with esrap which svelte uses under the hood. Either it's already fixed and we just need to release or it's not but obviously we will fix this problem. And no, it can't cause XSS attacks

[PixelForm]

I'm having the same problem on svelte 5.17.4 when using prettier which formats the code to span multiple lines. I think the compiler should know to fix these text issues. Also I think it's better if strings in text nodes are properly evaluated to prevent any open door to XSS.

This was a bug with esrap which svelte uses under the hood. Either it's already fixed and we just need to release or it's not but obviously we will fix this problem. And no, it can't cause XSS attacks

Ah I see! I'll wait until the fix is released then. And my bad! I thought it could be some XSS issue, just trying to help out 😅

[charlie-roosen]

I've updated to svelte 5.18.0. I can confirm that this fixes the problem that I reported in 5.17.4.

Thanks