Beta release with Svelte 5 runes about dotlottie-web

[Antoine-lb]

Hello 👋
After installing @lottiefiles/dotlottie-svelte 0.3.7 is giving me a runes error. I'm on Svelte 4 so I don't have them, how can I disable runes?
Thanks

[dummdidumm]

The PR that added the option should be reverted. In general, when using Svelte 5 together with component libraries one should not set the runes compiler option, and instead opt in to runes mode by using runes in components. That solves OP's issue (this Library did nothing wrong so to speak).

[theashraf]

Thanks @Antoine-lb @abegehr, I've reverted the runes attribute in the DotLottieSvelte component.

@moonlitgrace You can disable the runes mode only in your application. We're reverting this change as it causes compatibility issues for Svelte v4 users.

[moonlitgrace]

@theashraf Thank you for the explanation, hope things are going well there.

Since Svelte v5 and v4 are backward compatible (without the runes mode enabled), we could disable the runes mode for the DotLottie svelte component

Yep thats right, but our app was running on runes mode, so yea that showed up, obviously. disabling runes mode for component only is another good idea (so that I can again run my app on runes mode yeey! ^_^)

If you're interested, we would appreciate your contribution to update the dotlottie-svelte component to support this setup

Yes I'm interested, I'll send a PR right away.

[theashraf]

This issue has been resolved in @lottiefiles/[email protected]

[theashraf]

Thank you, @moonlitgrace, for your suggestion. Currently, Svelte v5 is not yet stable, and we plan to refactor from v4 to v5 only after it has been stabilized, based on the recommendation from the Svelte team here

Since Svelte v5 and v4 are backward compatible (without the runes mode enabled), we could disable the runes mode for the DotLottie svelte component. This would provide an easy transition without the need for a refactor or a beta release

If you're interested, we would appreciate your contribution to update the dotlottie-svelte component to support this setup

[abegehr]

I'm also experiencing an issue on Svelte 4 with 0.3.7 (I also tried 0.3.6 and 0.3.5 without luck).

Stack trace:

app dev: 16:38:15 [ERROR] [UnhandledRejection] Astro detected an unhandled rejection. Here's the stack trace:
app dev: Error: Build failed with 1 error:
app dev: ../node_modules/.pnpm/@[email protected][email protected]/node_modules/@lottiefiles/dotlottie-svelte/dist/Dotlottie.svelte:1:16: ERROR: [plugin: vite-plugin-svelte:optimize-svelte] $DIR/node_modules/.pnpm/@[email protected][email protected]/node_modules/@lottiefiles/dotlottie-svelte/dist/Dotlottie.svelte:1:16 <svelte:options> unknown attribute 'runes'
app dev:     at failureErrorWithLog ($DIR/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1472:15)
app dev:     at $DIR/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:945:25
app dev:     at $DIR/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1353:9
app dev:     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
app dev:   Hint:
app dev:     Make sure your promises all have an `await` or a `.catch()` handler.
app dev:   Error reference:
app dev:     https://docs.astro.build/en/reference/errors/unhandled-rejection/
app dev:   Stack trace:
app dev:     at $DIR/node_modules/.pnpm/@[email protected][email protected]/node_modules/@lottiefiles/dotlottie-svelte/dist/Dotlottie.svelte: ERROR: [plugin: vite-plugin-svelte:optimize-svelte] $DIR/node_modules/.pnpm/@[email protected][email protected]/node_modules/@lottiefiles/dotlottie-svelte/dist/Dotlottie.svelte <svelte:options> unknown attribute 'runes':1:16
app dev:     [...] See full stack trace in the browser, or rerun with --verbose.

The error seems to be Dotlottie.svelte <svelte:options> unknown attribute 'runes':1:16 (see here).

So the change introduced in 0.3.0 seems to break support for Svelte 4 (specifically, I'm on 4.2.18). Downgrading to package version 0.2.0 makes the error go away.

[Antoine-lb]

I'm also experiencing an issue on Svelte 4 with 0.3.7 (I also tried 0.3.6 and 0.3.5 without luck).

Stack trace:

app dev: 16:38:15 [ERROR] [UnhandledRejection] Astro detected an unhandled rejection. Here's the stack trace:

app dev: Error: Build failed with 1 error:

app dev: ../node_modules/.pnpm/@[email protected][email protected]/node_modules/@lottiefiles/dotlottie-svelte/dist/Dotlottie.svelte:1:16: ERROR: [plugin: vite-plugin-svelte:optimize-svelte] $DIR/node_modules/.pnpm/@[email protected][email protected]/node_modules/@lottiefiles/dotlottie-svelte/dist/Dotlottie.svelte:1:16 <svelte:options> unknown attribute 'runes'

app dev:     at failureErrorWithLog ($DIR/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1472:15)

app dev:     at $DIR/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:945:25

app dev:     at $DIR/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1353:9

app dev:     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

app dev:   Hint:

app dev:     Make sure your promises all have an `await` or a `.catch()` handler.

app dev:   Error reference:

app dev:     https://docs.astro.build/en/reference/errors/unhandled-rejection/

app dev:   Stack trace:

app dev:     at $DIR/node_modules/.pnpm/@[email protected][email protected]/node_modules/@lottiefiles/dotlottie-svelte/dist/Dotlottie.svelte: ERROR: [plugin: vite-plugin-svelte:optimize-svelte] $DIR/node_modules/.pnpm/@[email protected][email protected]/node_modules/@lottiefiles/dotlottie-svelte/dist/Dotlottie.svelte <svelte:options> unknown attribute 'runes':1:16

app dev:     [...] See full stack trace in the browser, or rerun with --verbose.

The error seems to be Dotlottie.svelte <svelte:options> unknown attribute 'runes':1:16 (see here).

So the change introduced in 0.3.0 seems to break support for Svelte 4 (specifically, I'm on 4.2.18). Downgrading to package version 0.2.0 makes the error go away.

I down graded to v0.2.0 and it works

[theashraf]

@dummdidumm makes sense, enabling/disabling the runes mode in v5 should be the responsibility of the consumer of DotLottieSvelte

The PR that added the option should be reverted. In general, when using Svelte 5 together with component libraries one should not set the runes compiler option, and instead opt in to runes mode by using runes in components. That solves OP's issue (this Library did nothing wrong so to speak).

[theashraf]

fixed in [email protected]