I’m 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 in error:

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


 ❯ new PartialEnvironment
node_modules/vite/dist/node/chunks/dep-yUJfKD1i.js:16766:19  ❯
preprocessCSS
node_modules/vite/dist/node/chunks/dep-yUJfKD1i.js:48447:23  ❯
node_modules/@sveltejs/vite-plugin-svelte/src/preprocess.js:114:10  ❯
style
node_modules/@sveltejs/vite-plugin-svelte/src/preprocess.js:77:37  ❯
process_single_tag
node_modules/svelte/src/compiler/preprocess/index.js:283:21  ❯
replace_in_code
node_modules/svelte/src/compiler/preprocess/replace_in_code.js:70:23 
❯ process_tag
node_modules/svelte/src/compiler/preprocess/index.js:300:26  ❯
Module.preprocess
node_modules/svelte/src/compiler/preprocess/index.js:363:25  ❯
compileSvelte
node_modules/@sveltejs/vite-plugin-svelte/src/utils/compile.js:85:20