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 PartialEnvironmentnode_modules/vite/dist/node/chunks/dep-yUJfKD1i.js:16766:19 ❯preprocessCSSnode_modules/vite/dist/node/chunks/dep-yUJfKD1i.js:48447:23 ❯node_modules/@sveltejs/vite-plugin-svelte/src/preprocess.js:114:10 ❯stylenode_modules/@sveltejs/vite-plugin-svelte/src/preprocess.js:77:37 ❯process_single_tagnode_modules/svelte/src/compiler/preprocess/index.js:283:21 ❯replace_in_codenode_modules/svelte/src/compiler/preprocess/replace_in_code.js:70:23 ❯ process_tagnode_modules/svelte/src/compiler/preprocess/index.js:300:26 ❯Module.preprocessnode_modules/svelte/src/compiler/preprocess/index.js:363:25 ❯compileSveltenode_modules/@sveltejs/vite-plugin-svelte/src/utils/compile.js:85:20