Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update for sveltekit? #27

Open
djmaze opened this issue Apr 25, 2021 · 7 comments
Open

Update for sveltekit? #27

djmaze opened this issue Apr 25, 2021 · 7 comments

Comments

@djmaze
Copy link

djmaze commented Apr 25, 2021

It seems this library is not yet compatible with the new sveltekit (beta). As there is no App.svelte anymore, I tried adding an import 'chota' to $layout.svelte, but the compilation fails:

SyntaxError: Unexpected token ':'                                 [0/5423]
    at wrapSafe (internal/modules/cjs/loader.js:979:16)
    at Module._compile (internal/modules/cjs/loader.js:1027:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:
10)               
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at nodeRequire (/tmp/svelte-chota-test2/node_modules/vite/dist/node/ch
unks/dep-60ed4f87.js:69069:17)       
    at ssrImport (/tmp/svelte-chota-test2/node_modules/vite/dist/node/chun
ks/dep-60ed4f87.js:69027:20)         
    at eval (/tmp/svelte-chota-test2/src/routes/$layout.svelte:7:31)

Not sure how to get this working.

@AlexxNB
Copy link
Owner

AlexxNB commented Apr 27, 2021

Try this in vite section of the kit config:

 ...
  optimizeDeps: {
    exclude: ['chota']
  },
  ...

@djmaze
Copy link
Author

djmaze commented Apr 29, 2021

// svelte.config.cjs
const preprocess = require('svelte-preprocess');

/** @type {import('@sveltejs/kit').Config} */
module.exports = {
    // Consult https://github.com/sveltejs/svelte-preprocess
    // for more information about preprocessors
    preprocess: preprocess(),

    kit: {
        // hydrate the <div id="svelte"> element in src/app.html
        target: '#svelte',
        vite: {
            optimizeDeps: {
                exclude: ['chota']
            }
        }
    }
};

That unfortunately did not help.

@juodumas
Copy link

You can use import 'chota/dist/chota.css' instead of import 'chota'.

@jjgumucio
Copy link

You can use import 'chota/dist/chota.css' instead of import 'chota'.

Worked for me!
Thanks!

@VirgileD
Copy link

VirgileD commented Aug 15, 2021

I try to use svelte-chota with SvelteKit, so maybe it's related but when I

<Nav>
<a slot="left" >Menu1</a>
<a slot="left" >Menu2</a>
</Nav>

It throws: Duplicate slot name "left" in <Nav>
Any advice?

@AlexxNB
Copy link
Owner

AlexxNB commented Aug 15, 2021

@VirgileD #25 (comment)

@VirgileD
Copy link

Oh, yes indeed, tx @AlexxNB !!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants