ValidationError: Classes can only be applied to DOM elements, not components

In my setup I use the rollup-plugin-svelte and for the client-side routing I tried the svero svelte router. Apparently, passing a class attribute to component should be possible, see kazzkiq/svero#13 and kazzkiq/svero@26b48a6

When I try to use it as in the example from kazzkiq/svero#45 I got following compile error:

rollup v1.27.0
bundles src/main.js → public/bundle.js...
[!] (plugin svelte) ValidationError: Classes can only be applied to DOM elements, not components
src/components/Navbar.svelte
38:         <ul class="navbar-nav mx-auto">
39:             <li class="nav-item mx-2">
40:                 <Link href={MAIN_PATH} class:active={path.includes(MAIN_PATH)}>
                                           ^
41:                     Feedback
42:                 </Link>
ValidationError: Classes can only be applied to DOM elements, not components

I do not think this is actually related to svero but probably to the rollup-plugin-svelte

[alexdilley]

Sorry, yes, this line allows class to be provided as a prop. You can’t use it in directive form though, so it will need to be:

class="{path.includes(MAIN_PATH) ? 'active' : ''}"

[karlitos]

Thanks for clarification 👍 closing now