DEV Community

Sveltekit Vite with Tailwind 2

dan on December 14, 2020

svelte@next with postcss and tailwind UPDATE : 5.update to SvelteKit Vite, all work. This post outdate and will not maintain anymore, c...

Read full post

Eugenio • Dec 17 '20

I think this its only working with the initial kit version, with the latest version its not working :(
I try different things and always is the same error;
Error: NOT_FOUND
at Object.loadUrl (....../svelte-next/node_modules/.pnpm/snowpack@3.0.0-rc.2/node_modules/snowpack/src/commands/dev.ts:607:13)
at ....../svelte-next/node_modules/.pnpm/@sveltejs/kit@1.0.0-next.14/node_modules/@sveltejs/kit/src/api/dev/index.js:165:14

Jeremias Nunez • Dec 17 '20

it was not working for my at first also, but i manage to get it working on my way, here are my config.

first create a project like you normal do pnpm init svelte@next project-name
then edit your files as the one that im using, after that run pnpm i, and wait for the install to finish after that, pnpm run dev and done.

URL: codeshare.io/5XbRjj

Eugenio • Dec 20 '20

with this change the preload function hook its not working

Eugenio • Dec 18 '20

well that did work! buuut, know the i18n is broken :*(

Error: [svelte-i18n] Cannot format a message without first setting the initial locale.
:(

Jeremias Nunez • Dec 18 '20

that's some error regarding svelte-i18n follow this instructions to make it work github.com/kaisermann/svelte-i18n/...

dan • Dec 19 '20

thanks, i already update the post for this error,,

Gabriel Espinel • Jan 3 '21

Hi, Dan. This is very helpful.

Have you experienced an issued with the "hover:underline" in the index.svelte file?. I'm getting an error

Build Error: @snowpack/plugin-svelte
Semicolon or block is expected (31:32)
29: }
30: a {
31: @apply text-indigo-600 hover:underline;
^
32: }

It seems it's not able to process the CSS correctly. Once I remove that, it works.

dan • Jan 3 '21

hm,, it's hard because you don't use the code style,,

i think it would be the

a {
  @apply text-indigo-600 hover: underline; /* use space after colon will make error in preprocess */
  @apply text-indigo-600 hover:underline;
}

div {
  @apply md: px-4; /* not works */
  @apply md:px-4; /* work fine */
}

Gabriel Espinel • Jan 4 '21

I think I found the issue.
The file svelte.config does not have the ´postcss: true´ in the repo
github.com/dansvel/sveltekit-types...

However, it does instruct that property in this current page. Once I applied that config, it worked fine. Thanks.

You may want to apply that fix in the repo as well.

dan • Jan 4 '21

aw man,, thanks,, i already update the file,,

i still in experiment to make the repo as simple as possible,,

Gabriel Espinel • Jan 3 '21

Thanks. I'm sorry about the format. I didn't make any change to your code, I simply clone the repo and it didn´t worked for me as is. The code doesn´t have any space.

Zen • Mar 5 '21

I try Svelte Kit today and get this error:

Error: No element indexed by 0
    at ArraySet$2.ArraySet_at [as at] (D:\zen\latihan-svelte-kit\node_modules\.pnpm\vite@2.0.5\node_modules\vite\dist\node\chunks\dep-e0f09032.js:24278:9)
    at BasicSourceMapConsumer.<anonymous> (D:\zen\latihan-svelte-kit\node_modules\.pnpm\vite@2.0.5\node_modules\vite\dist\node\chunks\dep-e0f09032.js:25193:67)
    at Array.map (<anonymous>)
    at BasicSourceMapConsumer.SourceMapConsumer_eachMapping [as eachMapping] (D:\zen\latihan-svelte-kit\node_modules\.pnpm\vite@2.0.5\node_modules\vite\dist\node\chunks\dep-e0f09032.js:25192:14)
    at merge (D:\zen\latihan-svelte-kit\node_modules\.pnpm\vite@2.0.5\node_modules\vite\dist\node\chunks\dep-e0f09032.js:26656:18)
    at ssrTransform (D:\zen\latihan-svelte-kit\node_modules\.pnpm\vite@2.0.5\node_modules\vite\dist\node\chunks\dep-e0f09032.js:61382:15)
    at transformRequest (D:\zen\latihan-svelte-kit\node_modules\.pnpm\vite@2.0.5\node_modules\vite\dist\node\chunks\dep-e0f09032.js:61650:48)
    at async instantiateModule (D:\zen\latihan-svelte-kit\node_modules\.pnpm\vite@2.0.5\node_modules\vite\dist\node\chunks\dep-e0f09032.js:67994:10)

dan • Mar 7 '21

currently you cannot use any postcss or typescript. But you could init a project with no typescript and and only css and you should also get the dev server running. This is the tracking issue as far as I know:

github.com/vitejs/vite/issues/2391

Zen • Mar 8 '21

Thanks

Nikos • Mar 4 '21

tried to run dev

(node:92442) ExperimentalWarning: The ESM module loader is experimental.

Listening on localhost:3000
Error: No element indexed by 0
at ArraySet$2.ArraySet_at as at
at BasicSourceMapConsumer. (/U

I'll stop now)

dan • Mar 5 '21

for now, the latest version of svelte kit is using esm, and vite as builder and everything is broken,,

if you want to try sveltekit work,, you need specify the version,, maybe nex.29 or next.34 in your package.json file,,

for more information, check sk-incognito.vercel.app/learn/what...

the maintaner of sveltekit said, better to work with sapper, coz migrating will easy,,

Nikos • Mar 5 '21

thx

dan • Jan 30 '21

oh,, sorry,,

i think i know why it doesn't export index.html is because in svelte.config.js the adapter is node,

try to install @sveltejs/adapter-static and change the svelte.config.js adapter to static

dan • Dec 30 '20 • Edited

@avorona , I think I've found the problem, I think it's because svelte compiles all files into .js ,, soglobal.pcss becomes global.js ,, or index.pcss or other name

what we can do to run the run build without problems,

rename the file global.pcss toGlobalStyle.svelte
edit the contents of GlobalStyle.svelte to be something like this

<style global>
/* preprocessing css goes here */
</style>

and in the $layout.svelte

<script>
  // import './global.pcss'
  import GlobalStyle from './GlobalStyle.svelte'

  // other code
</script>

<GlobalStyle/> <!-- call the component  -->
<main>
  <slot/>
</main>

do the run build,, and,, BOOM!!! no error

please CMIIW

Eugenio • Jan 6 '21

Why not inside the $layout.svelte?

Markus Hatvan • Dec 17 '20

As far as I know from the Svelte Discord channel, running it is broken right now for Typescript, for JavaScript it should work.

For Typescript, a workaround is to add

"resolutions": {
  "snowpack": "2.17.0"
}

to the package.json

dan • Jan 3 '21 • Edited

I still haven't found a way ,,

from npmjs.com/package/@sveltejs/kit

This project aims to replicate Sapper's functionality in its entirety, minus building for deployment (which can be handled by 'adapters' that do various opinionated things with the output of snowpack build).

Jacob Babich • Dec 20 '20

Hi dan, it may help to clarify that "$layout.svelte on root" means src/routes/$layout.svelte and to fix the typo in "Create src\routes.pcss" to src/routes/global.pcss

dan • Dec 20 '20

very thanks,

i write it in late night, like 2.30 am,,

Eugenio • Dec 20 '20

I think now the preload funcition tis not working;

export async function preload({ host, path, params, query }, session) {
console.log('working')
}

dan • Dec 21 '20

i think it's sveltekit problem different from sapper,, need to wait for documentation for more

Eugenio • Jan 6 '21

preload function has been renamed to load;
twitter.com/Rich_Harris/status/134...

dan • Jan 30 '21

i found the way to generate build/ directory,,

just run npx svelte-kit adapt after you run build command

Vitalii • Dec 22 '20

Thanks, dan!
adding a @snowpack/plugin-svelte at the initial kit version helped me run the project

dan • Dec 22 '20

the problem i face is, when i try to run build on fresh install project it's always give me error.

have you tried too?

Vitalii • Dec 22 '20 • Edited

yeap :( got an error
dev-to-uploads.s3.amazonaws.com/i/...

dan • Dec 17 '20

thanks for mention it, i really forgot about snowpack.config.js i already update it,,

tw1t611 • Dec 17 '20 • Edited

same for me, was anyone able to get this to work?

Jeremias Nunez • Dec 18 '20

check my reply above to Dan, i manage to get it working

dan • Dec 19 '20

i made more update to fix more things,, hope that will help,,

youssef • Feb 7 '21

how can i run the build using Node?
i mean abuild cpntaining client and sever parts
thank you