Not working with Svelte Kit (Vite)

Question

Not working with Svelte Kit (Vite)

dit7ya opened this issue 3 years ago · comments

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 · Answer 1 · Fri Mar 12 2021 23:55:30 GMT+0800 (China Standard Time)

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.

Shayon · Answer 2 · Fri Mar 12 2021 23:59:26 GMT+0800 (China Standard Time)

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 · Answer 3 · Sat Mar 13 2021 00:14:56 GMT+0800 (China Standard Time)

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).

Shayon · Answer 4 · Sat Mar 13 2021 00:25:56 GMT+0800 (China Standard Time)

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.

Shayon · Answer 5 · Sat Mar 13 2021 00:33:31 GMT+0800 (China Standard Time)

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

Florian-Schoenherr · Answer 6 · Sat Mar 13 2021 00:34:19 GMT+0800 (China Standard Time)

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.

Shayon · Answer 7 · Sat Mar 13 2021 00:36:47 GMT+0800 (China Standard Time)

Steps to reproduce the error

Create a project with npm init svelte@next newProject
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>

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

Florian-Schoenherr · Answer 8 · Sat Mar 13 2021 00:57:40 GMT+0800 (China Standard Time)

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

Shayon · Answer 9 · Sat Mar 13 2021 01:02:42 GMT+0800 (China Standard Time)

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

Florian-Schoenherr · Answer 10 · Sat Mar 13 2021 16:54:59 GMT+0800 (China Standard Time)

sveltejs/kit#231

Goran Jovanov · Answer 11 · Sat Mar 20 2021 01:22:40 GMT+0800 (China Standard Time)

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 · Answer 12 · Tue Mar 30 2021 21:18:06 GMT+0800 (China Standard Time)

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

Guillaume Marcoux · Answer 13 · Tue Mar 30 2021 21:25:35 GMT+0800 (China Standard Time)

@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