Not working with Svelte Kit (Vite)

[dit7ya]

I am not sure if there is some special configuration to do with https://github.com/sveltejs/kit but this is the error I am getting when trying to use a simple Button component.

<Button> 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

[Florian-Schoenherr]

This is probably the Vite-Version of #132. I think I saw the same error on svelte discord, might be a problem with external components right now in general.

[dit7ya]

Updating to the given vite config makes that error go away but this new error pops up.

500

window is not defined

ReferenceError: window is not defined
    at /node_modules/svelte-materialify/dist/components/Slider/nouislider.min.js:6:8
    at /node_modules/svelte-materialify/dist/components/Slider/nouislider.min.js:7:3
    at instantiateModule (/home/sudraka/code/speaking-kit-new/node_modules/vite/dist/node/chunks/dep-e0f09032.js:68041:166)

and this is the output in the terminal

[vite] Error when evaluating SSR module /node_modules/svelte-materialify/dist/components/Slider/nouislider.min.js:
ReferenceError: window is not defined
    at /node_modules/svelte-materialify/dist/components/Slider/nouislider.min.js:8:8
    at /node_modules/svelte-materialify/dist/components/Slider/nouislider.min.js:9:3
    at instantiateModule (/home/sudraka/code/speaking-kit-new/node_modules/vite/dist/node/chunks/dep-e0f09032.js:68041:166)

[Florian-Schoenherr]

Can you try something? Slider is calling the nouislider stuff, so you can basically either wrap the call to nouislider in process.browser (or whatever it is in sveltekit) OR inside the nouislider code. If you don't know how/that doesn't work, you can try importing as specific as possible, so from 'svelte-materialify/src/components/Button/Button.svelte' (hope I got that right).

[dit7ya]

Yes. Importing in that very specific way works! However I was planning to eventually use the Slider component (very few component libraries provide it!). Let's see. Hoping to see everything stabilize soon.

[dit7ya]

Unfortunately I cannot see any styling at all. The button is just plain HTML button now. :(

[Florian-Schoenherr]

The problem is that we are using nouislider underneath, which calls window and Vite doesn't like calling window, I guess, because SSR? Maybe you can specify to not SSR for Slider? In sapper you could do if(process.browser), or in this case it should also work if you do if(window !== undefined).

Styling: huh, but maybe something like our Advanced Install is just not working in Vite right now.

[dit7ya]

Steps to reproduce the error

1. Create a project with npm init svelte@next newProject
2. Create a main.svelte file inside src/routes/new.svelte with the following content

<script>
    import Button from "svelte-materialify/src/components/Button/Button.svelte";
    import MaterialApp from "svelte-materialify/src/components/MaterialApp/MaterialApp.svelte";
</script>

<MaterialApp theme="light">
    <Button class="red-text">Hello</Button>
</MaterialApp>

3. npm run dev
4. open localhost:3000/new in browser.

[Florian-Schoenherr]

You need to setup https://svelte-materialify.vercel.app/getting-started/installation/#advanced-install somehow, right? If there're no styles, preprocessing is missing probably

[dit7ya]

Can you please write a guide because the project structure is quite different in SvelteKit?

[Florian-Schoenherr]

sveltejs/kit#231

[gjovanov]

I had the same issue and I was able to fix it following suggesting from here:
this

By editing node_modules\svelte-materialify\src\components\Slider\Slider.svelte:

replacing: import noUiSlider from './nouislider.min'; with import * as noUiSlider from './nouislider.min';

However, this solution is not tested for SSR mode.

Still, I hope you find it useful.

[Florian-Schoenherr]

@V-ed What's your config? Seems vite does it differently from rollup

[V-ed]

@V-ed What's your config? Seems vite does it differently from rollup

Is the problem still happening? Vite uses rollup internally, and SvelteKit uses vite internally - I thought this would therefore fix both at the same time (it does for my project).

I just pushed a commit with a basic setup of Materialify on my repo, you can see my setup here : https://github.com/V-ed/svelte-typescript-routing-template/tree/f0735c60191efe4fb5b443b3eac21a0266780ecf