Nesting Sprig components when using component classes

We’re building a shop (Commerce Pro) and using Sprig to render the overview pages using component classes. We’re also using Verbb’s Wishlist plugin so the customer can add products to their wishlist from an overview page.

The component class is working great. It gives us much more flexibility with filters. We’re using Sprig in combination with Alpine.js to trigger the filters and refresh.

But I’m having an issue when using the Wishlist plugin as a nested Sprig component. Even if I add the wishlist code itself to my overview template. When clicking the wishlist toggle button the Sprig action has an error.

However, this is working fine when ditching the component class and going for good ol’ Twig. So, I’m clearly missing something. Any idea what I’m doing wrong?

–

Craft CMS v3.7.45.1 Sprig v1.13.0

–

Error:

Argument 1 passed to craft\web\View::renderTemplate() must be of the type string, null given, called in /Volumes/.../vendor/putyourlightson/craft-sprig-core/src/controllers/ComponentsController.php on line 65

Books.php

class Books extends Component
{
    public $page = 1;
    public $limit;
    protected $_template = 'sprig/books';

    public function attributes()
    {
        $attributes = parent::attributes();

        $attributes[] = 'books';

        return $attributes;
    }

    public function getBooks()
    {
        $query = Craft::$app->getElements()->createElementQuery(Product::class);
        $query->limit($this->limit);
        $query->all();

        return $query;
    }
}

books/index.twig

{{ sprig('Books', { limit: 24 }, { id: 'books', 's-trigger': 'refresh' }) }}

{{ sprig.script }}

sprig/books.twig

{% set pageInfo    = sprig.paginate(books, page) %}
{% set pageResults = pageInfo.pageResults %}

{% if pageResults|length %}
    <div class="grid grid-cols-4 gap-8">
        {% for item in pageResults %}
            <ul>
                <li>{{ item.id }}</li>
                <li>{{ item.title }}</li>
                <li>
                    {{ sprig('sprig/wishlist', { bookId: item.id }, { id: 'books-wishlist-item-' ~ item.id }) }}
                </li>
            </ul>
        {% endfor %}
    </div>
{% endif %}

sprig/wishlist.twig

{% set item = craft.wishlist.item(bookId, null, 'wishlist') %}

<button sprig s-method="post" s-action="wishlist/items/toggle" s-vals="{{ { elementId: bookId }|json_encode }}">
    {% if item.inList %}
        Remove from wishlist
    {% else %}
        Add to wishlist
    {% endif %}
</button>

[stevendierick]

Yes, the update resolves it. Works like a charm now! Thanks @bencroker!

[bencroker]

I see what was going on, fixed in https://github.com/putyourlightson/craft-sprig-core/commit/5c6b72e1f11e014d35b0d1b4931d90206a837244, you can test by running composer update. Let me know if that resolves it for you.