search

inertiajs / inertia

Inertia.js lets you quickly build modern single-page React, Vue and Svelte apps using classic server-side routing and controllers.
https://inertiajs.com
MIT License
6.3k stars 423 forks source link

SSR error: Component.render(...) is no longer valid in Svelte 5 #1801

Closed harryqt closed 3 months ago

harryqt commented 7 months ago

Version:

Starting SSR server on port 13714...
Inertia SSR server started.
1132 |   $$payload.out += `${anchor}</div>`;
1133 |   bind_props($$props, { id, initialPage });
1134 |   pop();
1135 | }
1136 | SSR.render = function() {
1137 |   throw new Error("Component.render(...) is no longer valid in Svelte 5. See https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes for more information");
               ^
error: Component.render(...) is no longer valid in Svelte 5. See https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes for more information
      at /Users/harry/Projects/laravel-test/bootstrap/ssr/ssr.js:1137:9
      at /Users/harry/Projects/laravel-test/bootstrap/ssr/ssr.js:1175:35
punyflash commented 7 months ago

This is a huge breaking change since Svelte moving to functional components and will require rework for how the app is created. Right now, the server component is hard-coded in the adapter. Ideally, SSR app should be created from setup function exposed to devs in a same way as client rendered to avoid issues like this. I plan to implement it in my adapter soon, but it will require some undocumented steps from developers to configure it properly. As I'm not a fan of rewriting docs just for my adapter, in case there is no decision from inertia team since initial release of Svelte 5, I'll write docs as well.

punyflash commented 7 months ago

I was able to implement Svelte 5 SSR support - use @westacks/inertia-svelte@next version of the package. To setup SSR follow the guide here: https://github.com/westacks/inertia-svelte/tree/2.x

harryqt commented 7 months ago

Thank you so much for the hard work. I've tested it and it worked perfectly. 🎉

buhrmi commented 7 months ago

Nice, I like this more than my implementation. A PR when Svelte 5 is released would be cool

jamesst20 commented 3 months ago

Version:

  • @inertiajs/svelte version: 1.0.14
Starting SSR server on port 13714...
Inertia SSR server started.
1132 |   $$payload.out += `${anchor}</div>`;
1133 |   bind_props($$props, { id, initialPage });
1134 |   pop();
1135 | }
1136 | SSR.render = function() {
1137 |   throw new Error("Component.render(...) is no longer valid in Svelte 5. See https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes for more information");
               ^
error: Component.render(...) is no longer valid in Svelte 5. See https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes for more information
      at /Users/harry/Projects/laravel-test/bootstrap/ssr/ssr.js:1137:9
      at /Users/harry/Projects/laravel-test/bootstrap/ssr/ssr.js:1175:35

Sorry late to the party, I have opened a PR a while ago to fix this: https://github.com/inertiajs/inertia/pull/1872 and I am also maintaining at the moment a full Svelte 5 TypeScript version https://github.com/jamesst20/inertia/commits/svelte5-adapter-playground https://www.npmjs.com/~jamesstp20

Right now Inertia team is not interested to have a separate adapter for Svelte 5 like they do for Vue 2 and 3 but hopefully they change their mind someday. I have a few projects depending on the Svelte 5 adapter so I should be maintaining it for a while

driesvints commented 3 months ago

Hi all. Going to close this one for now since we're not planning on a separate adapter for Svelte 5 (for now). Thanks

punyflash commented 3 months ago

Hi all. Going to close this one for now since we're not planning on a separate adapter for Svelte 5 (for now). Thanks

The issue itself is not related to separate adapter

driesvints commented 3 months ago

I'm sorry, maybe I misunderstood. You're using Svelte 5 which we don't directly support right now?

punyflash commented 3 months ago

Yes, It is possible to implement Svelte 5 support without creating a separate adapter: https://github.com/westacks/inertia-svelte/tree/2.x

driesvints commented 3 months ago

Right gotcha, thanks @punyflash. Since Svelte 5 isn't out yet we don't feel we can consider this a real "bug". We would however appreciate PR's to make the current Svelte adapter compatible with it without introducing any breaking changes for older versions. Seems @jamesst20 has already worked on this here: https://github.com/inertiajs/inertia/pull/1872

reinink commented 3 months ago

Yup yup! We're definitely going to want to add Svelte 5 support soon. As noted, @jamesst20 already has a PR for this (#1872), so I am hoping that we can get that included with our next release, which will also include TypeScript support for Svelte.

I think it's probably fine to leave this issue closed, as we have that PR in progress.

Excited to get the Svelte adapter in better shape finally! 💪