Unable to use due to errors

[jeremypeters]

I've added the <Svane /> component and import to my main +layout.svelte and I'm getting the following TypeScript error for <Svane />:

Argument of type 'typeof import("blah/node_modules/@shipbit/svane/dist/index")' is not assignable to parameter of type 'ConstructorOfATypedSvelteComponent'.
  Type 'typeof import("blah/node_modules/@shipbit/svane/dist/index")' provides no match for the signature 'new (args: { target: any; props?: any; }): ATypedSvelteComponent'.

And the error on npm run dev:

Error: <Svane> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules. Otherwise you may need to fix a <Svane>.

[jwatts777]

@jeremypeters
sveltejs/sapper#774
Is this close to the issue that you are facing?

[Shackless]

Svane is currently not SSR-ready because it interacts with client-only stuff like window. I'll take a look at this after #1.

[Shackless]

@jeremypeters I tested with a fresh SvelteKit app and could reproduce your issues.

To fix the TS problem, in your layout use import { Svane } from @shipbit/svane (docs incorrectly stated to use a default import w/o brackets).

To fix the SSR issues, embed Svane like this:

<script>
   import { Svane } from '@shipbit/svane';
   import { browser } from '$app/environment';
</script>

{#if import.meta.env.DEV && browser}
   <Svane />
{/if}

Both solutions are now also fixed in the Svane docs. Make sure to upgrade to v2.0.1.

Thank you!

[jeremypeters]

Thanks, can confirm that fixed the errors. Just a couple of other issues:

1/ I am using a sticky header and the component is hidden behind that - probably an idea to add a high z-index.
2/ The component only extends 25% of the screen width - maybe an idea to add left: 0 and right: 0 in addition to the top: 0, or use inset of course.