Errors

A message reads like this, with the values involved and a link to its code:

[sveltier SV3001] Portal: no element matches "#dialogs". Render the target first, or pass the element itself. https://sveltier.com/errors#SV3001

A code keeps its meaning in every version, so it is safe to search for; the words may improve. The same list ships in the package as ERROR_CODES.

Errors are thrown in every build. Warnings come from checks that run only under your bundler's development condition, such as the Vite dev server: a prop value outside its list, a field without a name. Production builds leave them out.

Themes

SV1001 The root ThemeProvider has no themes

The outermost <ThemeProvider>, which <UIProvider> renders, registers the themes an app can show. None were passed, so there is nothing to paint.

Fix: Pass at least one theme pack: themes={monolith} from 'sveltier/themes/monolith', or several at once: themes={{ ...monolith, ...maison }}.

SV1002 Unknown theme

A theme was chosen by a name that is not registered: through the theme prop, useTheme().set(), or the light, dark or fallback options of themeCss().

Fix: Use a registered name, such as "monolith-light", or "system" to follow the operating system. To offer another theme, register it in the themes of the root provider.

SV1003 Invalid colour or variable name

The colours and variables of a theme become CSS custom properties, so their names must be valid identifiers.

Fix: Start the name with a letter and use only letters, digits, - and _, for example brand or radius-card.

SV1004 Unsafe theme value

Theme values are written into a <style> element. A value containing <, >, {, } or ; could end the rule or the element early.

Fix: Use a plain CSS value, such as oklch(0.62 0.19 255) or 8px.

SV1005 Invalid theme name

Theme names are written into the data-sv-theme attribute and its CSS selectors.

Fix: Start the name with a letter and use only letters, digits, - and _. "system" is reserved for following the operating system.

SV1006 Invalid nonce

The nonce is copied into the attributes of the theme's <style> and <script>, so it must be a plain base64 value.

Fix: Pass the nonce of your Content Security Policy as it is, for example SvelteKit's %sveltekit.nonce%.

SV1007 useTheme() outside a ThemeProvider

useTheme() reads the theme from the component tree, and there is no <UIProvider> or <ThemeProvider> above the component that called it.

Fix: Wrap the app in <UIProvider> in the root layout, and call useTheme() while a component inside it initialises.

Core engine

SV2001 Display thresholds out of order

Breakpoints are minimum widths, so each one must be wider than the one before it.

Fix: Give widths that increase from sm to xxl, for example { sm: 600, md: 960, lg: 1280, xl: 1920, xxl: 2560 }.

SV2002 Invalid prop value Development warning

A prop that takes one of a fixed set of values got another one, for example variant="primary" on a Button. Types catch this when the code is checked; the warning catches values that get past them, such as data from an API.

Fix: Use one of the values the message lists. The type of the prop and the props table of the component list them too.

Primitives

SV3001 Portal target not found

A Portal moves its content into its target, and no element matched the target selector when the Portal mounted.

Fix: Render the target before the Portal, correct the selector, or pass the element itself.

SV3002 Invalid item size

virtualList places items by their sizes, so every size must be a positive number of pixels.

Fix: Pass a positive number, or a function that returns one for every index. For items whose size is unknown, pass an estimate and measure them with {@attach list.measure}.

SV3003 Measured item without an index

list.measure reads the index of each measured element from its data-index attribute.

Fix: Add data-index={item.index} to every element that has {@attach list.measure}.

Components

SV4001 Closable chip that is also a button or a link

A closable chip contains a close button, and a button cannot be placed inside another button or a link.

Fix: Keep the chip closable and put its action in a Button next to it, or remove closable.

Forms

SV5001 Field without an accessible name Development warning

Assistive technology announces a form control by its name, and this control has no label, aria-label or aria-labelledby.

Fix: Give the field a label, or name the control with aria-label, or with aria-labelledby when its label is visible elsewhere.