An SSR warning when running Jetstream

[jitterbux]

• Laravel Version: 10.1.5
• PHP Version: 8.2.3
• Splade JS Version (npm): 1.3.1
• Splade PHP Version (composer): 1.3.1
• Dev environment (OS, Sail/Valet/etc): macOS, Valet

Description:

After a fresh installation (I did migrate and added SPLADE_SSR_ENABLED=true in my .env file) and running:

$ node bootstrap/ssr/ssr.mjs

I get in terminal when the SSR server is running this warning:

$ node bootstrap/ssr/ssr.mjs

Splade SSR server started on port 9000.

[Vue warn]: Extraneous non-props attributes (style) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.

However, after I run:

$ npm run build and then again $ node bootstrap/ssr/ssr.mjs the warning haven't shown again.

[pascalbaljet]

Thanks for sharing, I'll look into it!

[jitterbux]

Thank you, Pascal. While we are at it, I posted a question about the difference between SSR by Vite and "fallback" SSR by Blade in the laravel-splade-docs repository. Splade is new and I am new to SSR and Laravel so I really don't know the difference and pros and cons - especially if you don't have the option to run Node SSR process on your hosting and you are forced to use the "fallback" blade rendering, whatever it means ;).

[stuartcusackie]

I'm having this problem with Splade Jetstream, but only when NOT running ssr mode. It works fine with node bootstrap/ssr/ssr.js, but npm run dev shows the warnings.

[pascalbaljet]

@jitterbux @stuartcusackie On which page does the warning occur? I can't reproduce it (both with and without SSR)

[stuartcusackie]

Sorry, I should have provided more detail. I have modified my Splade Jetstream welcome page to use a Blade Layout Component. I have stripped down my files below to their most basic. I still get the warning with this simple structure:

Welcome Page

<x-layouts.guest>
    <h1>Test</h1>
</x-layouts.guest>

Layout Component

@include('partials.guest.layout.header')

{{ $slot }}

Header Partial

<p>Test Header Partial</p>

I think I've found the crux the problem. It seems that Splade needs a wrapper div around the contents in my layout, e.g.:

<div>
  @include('partials.guest.layout.header')

  {{ $slot }}
</div>

With this extra element my warnings have gone away. Is this expected behaviour? I'm used to having to do this with Vue but I didn't consider it with Splade.

The app-layout component that comes with Splade Jetstream doesn't have a wrapper like this, yet there are no warnings. Seems likes there's some inconsistency.

Thanks for checking! I can move this to another issue if you want, since it's not exactly related to Jetstream.

[ryahpalma]

This warning also happens with x-splade-toggle.

Sorry, I should have provided more detail. I have modified my Splade Jetstream welcome page to use a Blade Layout Component. I have stripped down my files below to their most basic. I still get the warning with this simple structure:

Welcome Page

<x-layouts.guest>
    <h1>Test</h1>
</x-layouts.guest>

Layout Component

@include('partials.guest.layout.header')

{{ $slot }}

Header Partial

<p>Test Header Partial</p>

I think I've found the crux the problem. It seems that Splade needs a wrapper div around the contents in my layout, e.g.:

<div>
  @include('partials.guest.layout.header')

  {{ $slot }}
</div>

With this extra element my warnings have gone away. Is this expected behaviour? I'm used to having to do this with Vue but I didn't consider it with Splade.

The app-layout component that comes with Splade Jetstream doesn't have a wrapper like this, yet there are no warnings. Seems likes there's some inconsistency.

Thanks for checking! I can move this to another issue if you want, since it's not exactly related to Jetstream.

Thanks, my app.blade.php showed this warning because of this, now it's fixed.

Before:

<x-splade-toggle></x-splade-toggle>
<div class="flex bg-gray-100"></div>

After:

<div>
  <x-splade-toggle></x-splade-toggle>
  <div class="flex bg-gray-100"></div>
</div>