<Select> is not a valid SSR component in Sapper

[hdeyana]

i'm using sapper, if you install it with npm i svelte-select, and use it.
you will get this error

<Select> is not a valid SSR component

to resolve it, just install it in dev dependency

npm i --save-dev svelte-select

relate to this
sveltejs/sapper#774

if this is good way to solve, maybe you can add in readme ?

[rob-balfre]

Thanks. I'll take a look.

…

On Sat, 19 Oct 2019, 17:11 hdeyana, ***@***.***> wrote: i'm using sapper, if you install it with npm i svelte-select, and use it. you will get this error <Select> is not a valid SSR component to resolve it, just *install it in dev dependency* npm i --save-dev svelte-select relate to this sveltejs/sapper#774 <sveltejs/sapper#774> — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#87?email_source=notifications&email_token=AAUAM7TR4MS6T66SRWXJRE3QPKQKDA5CNFSM4JCOMXU2YY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4HS43SLQ>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAUAM7WH5ZIJ3NCPOGWQHFLQPKQKDANCNFSM4JCOMXUQ> .

[rob-balfre]

@hdeyana strange, I just tried adding svelte-select to a sapper application and didn't see the error. What version of Sapper are you using?

[hdeyana]

@rob-balfre try in slow 3G connection you'll see the error, then error disapear.

[rob-balfre]

@hdeyana are you using webpack or rollup? If webpack make sure you do this.. https://github.com/rob-balfre/svelte-select#configuring-webpack

[hdeyana]

@rob-balfre im using rollup.
here my screencast video.
https://drive.google.com/file/d/1_J1tmXBeWEqL1laM8Sg6qKrL20drNCe8/view?usp=sharing

[rob-balfre]

How are you importing svelte-select?

[rob-balfre]

Working for me... https://svelte-select-sapper-demo.robertbalfre.now.sh

Code @ https://github.com/rob-balfre/svelte-select-sapper-demo

[rob-balfre]

OH WAIT! I SEE IT NOW! I will debug :D

[rob-balfre]

Updated README, thanks for spotting that @hdeyana 👍

[softwarerero]

It is also possible to render the select only on the client:

{#if (process.browser) }
	<Select items={items} ></Select>
{/if}

[shailesh345]

Thank you @softwarerero

{#if (process.browser) }

{/if}

[Absleepy]

import { browser } from '$app/environment';

  {#if browser}
  <YourComponent />

  {/if}