Im checking out Svelte 5 and I have this simple component

<script lang="ts">
    let {
        name
    }: {
        name: string;
    } = $props();
</script>

<h1>
    Hello! {name}
</h1>

I made a unit test

import { render, screen } from '@testing-library/svelte';
import { describe, it, expect } from 'vitest';
import '@testing-library/jest-dom';
import Header from '../components/Header.svelte';

describe('Header.svelte', () => {
  it('renders with default name', () => {
    render(Header);
    expect(screen.getByText('Hello!')).toBeInTheDocument();
  });

  it('renders with a custom name', () => {
    render(Header, { props: { name: 'John' } });
    expect(screen.getByText('Hello! John')).toBeInTheDocument();
  });
});

This works fine. But if I update/add a style on Header.svelte like:

<script lang="ts">
    let {
        name
    }: {
        name: string;
    } = $props();
</script>

<h1>
    Hello! {name}
</h1>
<style>
    // I added a style tag here. empty and not empty
</style>

This results to error

TypeError: Error while preprocessing path/to/component/Header.svelte –
Cannot create proxy with a non-object as target or handler