Git Product home page Git Product logo

navneetsharmaui / sveltekit-starter Goto Github PK

View Code? Open in Web Editor NEW
590.0 11.0 101.0 214.31 MB

Sveltekit starter project created with sveltekit, typescript, tailwindcss, postcss, husky, and storybook. The project has the structure set up for the scaleable web application.

Home Page: https://sveltekit-starter-one.vercel.app

License: MIT License

JavaScript 5.61% HTML 1.30% Svelte 64.83% TypeScript 24.02% Shell 0.52% CSS 3.71%
svelte sveltejs typescript sveltekit sveltekit-tailwind-template sveltekit-template ssr husky postcss storybook

sveltekit-starter's Introduction

🚀 Sveltekit Starter

Powered By Sveltekit Language: TypeScript ECMAScript: 2019 Tailwindcss Postcss SCSS StorybookJS Jest Prettier Eslint License: MIT

Svektekit Blog

Use the above link if you want to use the sveltekit blog template.

sveltekit

Sveltekit starter project created with Sveltekit, Typescript, Tailwindcss, Postcss, SCSS, Husky, ESLint, Prettier, Storybook, and Jest. The project has the SSR (Server Side Rendering) setup. These template is easy to configure and built upon as it has scalable structure.

💯 🔥 Project LightHouse Report

sveltekit-starter-lighthouse-report

📎 Menu

💡 Features

  • [:heavy_check_mark:] Server side rendering built with SEO in mind.
  • [:heavy_check_mark:] PWA + Service Worker + Offline.
  • [:heavy_check_mark:] Tailwindcss + Postcss + SCSS Syntax Support in Postcss.
  • [:heavy_check_mark:] Global Style and Variable preconfigured for Postcss.
  • [:heavy_check_mark:] StorybookJS preconfigured (with postcss support).
  • [:heavy_check_mark:] Browser sync, auto refresh, auto reload.
  • [:heavy_check_mark:] 100% on Google Speedpage and 100% Lighthouse report.
  • [:heavy_check_mark:] Friendly and Scalable boilerplate.
  • [:heavy_check_mark:] Typescript + TSPaths (absolute for imports in component) preconfigured.
  • [:heavy_check_mark:] Prettiers, ESLint, and Husky preconfigured.
  • [:heavy_check_mark:] Github and Vscode dotfiles preconfigured.

🔨 Project Setup

  1. npx degit navneetsharmaui/sveltekit-starter my-app or Clone this repository.
  2. npm install or yarn install or pnpm install.
  3. npm run dev or yarn run dev or pnpm run dev.
  4. npm run build:static:ssr or yarn run build:static:ssr or pnpm run build:static:ssr.
  5. npm run preview or yarn run preview or pnpm run preview.

💫 License

  • Code and Contributions have MIT License

Copyright (c) 2021 Navneet Sharma (@asnavneetsharma)

sveltekit-starter's People

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Forkers

lguzzon-js boleggs6969 jcald flomang alexander-mart cedrickchee yuthstyle88 omargnagy91 kieranhall swyxio fernandolguevara anndream faatihi arnoldpropagandaph rohanhacker jacegem ahmedaisar robitx t234190591 keyolk mrtnbroder optusgroup gcollard samyzkhalil svelterun shortcutspro yieldflux chranditho lgs sukrillah mugpet micio86dev designingsparks johndundee21 krr9 juribadev oskar031 domtronn iyobkim mrkeksi ssi379 glockio fxmt2009 suryatmodulus chaostheorie datanotion cer-vic wawaiguntang murocodes enriquecastill0 rmsff rickyjanuari mojoaxel kitae-yun senior0909 ilkersigirci alexnm detectiveosint guillermocalleja geauxweisbeck4 nurdiansyah msh2050 ansarnisargill lukecarbis e-ntro-py jhpaige ngocanh1233 smavo-all nstringham deorac ptrxyz braden-w yndotdev jace-sh dickiesanders taeold beck-ganjatechs jefripunza mikehostetler yuasys patrickphat ohmaha doggino dgrunsted1 ramaid marcelkfactor the-keeper 0xo0o0 stupiddawg2412 uerkw unreal-kingdoms balteg omerharuncetin belphvegor farlandliu fergiferg ctavolazzi mhhukiewitz jknohr itekdev

sveltekit-starter's Issues

Removing yarn cache

The yarn cache (.yarn folder) is 105MB huge which is a completely big no-no for such projects.
Considering I and many other use pnpm for most of the workflow, yarn as default might not a good choice. I think keeping the repo package manager independent would be a good choice.

How to get .env values

Hello

I cannot get any on the values from a .env file to work.

For example:

console.log(`chucknoris var is ${ environment.apiUrls.CHUCK_NORRIS}`)

prints chucknoris var is undefined,

I've tried also sorts of variations of yarn run dev --mode=local --configurations=local.

And I have both a .env.local and .local.env` file.

Any help is appreciated.

Does not work with npm

npm install fails with:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/svelte-loader
npm ERR!   dev svelte-loader@"^3.0.0" from the root project
npm ERR!   peer svelte-loader@"*" from @storybook/[email protected]
npm ERR!   node_modules/@storybook/svelte
npm ERR!     dev @storybook/svelte@"^6.2.2" from the root project
npm ERR!     peer @storybook/svelte@"^6.1.20" from @storybook/[email protected]
npm ERR!     node_modules/@storybook/addon-svelte-csf
npm ERR!       dev @storybook/addon-svelte-csf@"^1.0.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer svelte-loader@"^2.9.1" from @storybook/[email protected]
npm ERR! node_modules/@storybook/addon-svelte-csf
npm ERR!   dev @storybook/addon-svelte-csf@"^1.0.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See ~/.npm/eresolve-report.txt for a full report.

It looks like storybookjs/addon-svelte-csf#19 would fix this

Build breaks when running "npm run dev"

Describe the bug
The project throws an error when building.

To Reproduce
Steps to reproduce the behavior:

  1. E.g. Run script "npm run dev"
  2. Build processes throws error

Expected behavior
Project builds and starts a dev server

Screenshots

Screenshot 2021-10-23 at 12 10 56

Desktop (please complete the following information):

  • OS: Macos Big Sur
  • Browser none
  • Version 11.6

ERR_UNKNOWN_FILE_EXTENSION Unknown file extension ".ts"

Describe the bug
I got TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts"

To Reproduce
Steps to reproduce the behavior:

  1. npm install
  2. npm run dev

> [email protected] dev
> npm run check-env && npm run add-css && npm run dev:sveltekit


> [email protected] check-env
> node --loader ts-node/esm scripts/js/check-env.ts

(node:16092) ExperimentalWarning: --experimental-loader is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for E:\projects\Newfolder\sveltekit-starter-main\scripts\js\check-env.ts
    at new NodeError (node:internal/errors:371:5)
    at Object.file: (node:internal/modules/esm/get_format:72:15)
    at defaultGetFormat (node:internal/modules/esm/get_format:85:38)
    at defaultLoad (node:internal/modules/esm/load:13:42)
    at ESMLoader.load (node:internal/modules/esm/loader:303:26)
    at ESMLoader.moduleProvider (node:internal/modules/esm/loader:230:58)
    at new ModuleJob (node:internal/modules/esm/module_job:63:26)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:244:11)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:281:24) {
  code: 'ERR_UNKNOWN_FILE_EXTENSION'
}

Here is the system info:

  System:
    OS: Windows 10 10.0.19043
    CPU: (12) x64 AMD Ryzen 5 5600X 6-Core Processor
    Memory: 3.89 GB / 15.91 GB
  Binaries:
    Node: 16.12.0 - C:\Program Files\nodejs\node.EXE
    npm: 8.1.1 - C:\Program Files\nodejs\npm.CMD
  npmPackages:
    @sveltejs/adapter-netlify: ^1.0.0-next.30 => 1.0.0-next.30
    @sveltejs/adapter-node: ^1.0.0-next.43 => 1.0.0-next.43
    @sveltejs/adapter-static: ^1.0.0-next.17 => 1.0.0-next.17
    @sveltejs/adapter-vercel: ^1.0.0-next.26 => 1.0.0-next.26
    @sveltejs/kit: ^1.0.0-next.142 => 1.0.0-next.142
    svelte: ^3.42.3 => 3.42.3

Demonstrations of tests

I have been unable to get TypeScript tests to work in SvelteKit.

I would love to see demonstrations of tests in this demo.

The README says it includes jest, but it does not.

Upgrade to latest version of svelte

Describe the solution you'd like

Due to the recent changes with svelte mentioned here, this template needs an update to support the breaking changes.

Main developer Rich Harris has created a guide to upgrade a repo to the newest stadards: sveltejs/kit#5774

Error with transition fade/blur when page is not reloaded @Home

Describe the bug
Fade transition with blur only works if you refresh the page @home, and not the other routes.

To Reproduce
Steps to reproduce the behavior:

  1. Go to another page than Home and click refresh -
  2. Click on another page than Home (no fade)
  3. Click on @Home
  4. Fade works again

Expected behavior
Expect transition with blur to work no matter what the start page is.

Desktop (please complete the following information):

  • OS: Win10
  • Browser Chrome
  • Version 95.0.4638.69

Can this be used to make a component library

Hi

Apologies if this is a super simple question.

I'm wanting to build a component library, using tailwind, storybook and of course svelte.

Are there any reasons why this template would not be a good fit?

[vite-plugin-svelte] ENOENT: no such file or directory, open 'node:http/package.json'

Describe the bug
I upgraded all the packages in package.json using https://www.npmjs.com/package/npm-check-updates , and then when I executed command npm run build , it throws this error: ENOENT: no such file or directory, open 'node:http/package.json'

npm run dev is working fine.

To Reproduce
Steps to reproduce the behavior:

  1. npm install
  2. npm install -g npm-check-updates
  3. ncu
  4. ncu -u
  5. change pages to entries in svelte.config.js on object kit.prerender
  6. npm run build
[vite-plugin-svelte] ENOENT: no such file or directory, open 'node:http/package.json'
> ENOENT: no such file or directory, open 'node:http/package.json'
Error: ENOENT: no such file or directory, open 'node:http/package.json'
    at Object.openSync (node:fs:585:3)
    at Object.readFileSync (node:fs:453:35)
    at resolveViaPackageJsonSvelte (file:///E:/projects/Newfolder/sveltekit-starter-main/node_modules/@sveltejs/vite-plugin-svelte/dist/index.js:1094:40)
    at Object.resolveId (file:///E:/projects/Newfolder/sveltekit-starter-main/node_modules/@sveltejs/vite-plugin-svelte/dist/index.js:1424:26)
    at Object.<anonymous> (E:\projects\Newfolder\sveltekit-starter-main\node_modules\vite\dist\node\chunks\dep-e0fe87f8.js:43315:19)
    at E:\projects\Newfolder\sveltekit-starter-main\node_modules\rollup\dist\shared\rollup.js:22706:25
node:events:368
      throw er; // Unhandled 'error' event
      ^

Error: spawn svelte-kit ENOENT
    at notFoundError (E:\projects\Newfolder\sveltekit-starter-main\node_modules\cross-env\node_modules\cross-spawn\lib\enoent.js:6:26)
    at verifyENOENT (E:\projects\Newfolder\sveltekit-starter-main\node_modules\cross-env\node_modules\cross-spawn\lib\enoent.js:40:16)
    at ChildProcess.cp.emit (E:\projects\Newfolder\sveltekit-starter-main\node_modules\cross-env\node_modules\cross-spawn\lib\enoent.js:27:25)
    at Process.ChildProcess._handle.onexit (node:internal/child_process:290:12)
Emitted 'error' event on ChildProcess instance at:
    at ChildProcess.cp.emit (E:\projects\Newfolder\sveltekit-starter-main\node_modules\cross-env\node_modules\cross-spawn\lib\enoent.js:30:37)
    at Process.ChildProcess._handle.onexit (node:internal/child_process:290:12) {
  code: 'ENOENT',
  errno: 'ENOENT',
  syscall: 'spawn svelte-kit',
  path: 'svelte-kit',
  spawnargs: [ 'build' ]
}
ERROR: "build:sveltekit" exited with 1.

System info:

  System:
    OS: Windows 10 10.0.19043
    CPU: (12) x64 AMD Ryzen 5 5600X 6-Core Processor
    Memory: 3.25 GB / 15.91 GB
  Binaries:
    Node: 16.12.0 - C:\Program Files\nodejs\node.EXE
    npm: 8.1.1 - C:\Program Files\nodejs\npm.CMD
  npmPackages:
    @sveltejs/adapter-netlify: 1.0.0-next.35
    @sveltejs/adapter-node: 1.0.0-next.55
    @sveltejs/adapter-static: 1.0.0-next.21
    @sveltejs/adapter-vercel: 1.0.0-next.31
    @sveltejs/kit: 1.0.0-next.201
    svelte: 3.44.2

postcss / scss and Storybook - styles not being appllied

Hello

I am experiencing some odd results in Storybook.

I have the below global style of lang postcss.
When I run yarn run dev styles are applied as expected. But in Storybook these are not applied.

// src/routes/index.svelte

<style global lang="postcss">
	@tailwind base;
	@tailwind components;
	@tailwind utilities;

	@layer base {
        :root{
            --color-text-base: #666666;
            --color-text-muted: #c7d2fe;
            --color-text-inverted: #4f46f5;
            --color-fill: #666666;
            --color-button-accent: #ffffff;
            --color-button-accent-hover: #33f2ff;
            --color-button-muted: #636651;
        }
	.theme-one {
	   --color-text-base: #666666;
            --color-text-muted: #c7d2fe;
            --color-text-inverted: #4f46f5;
            --color-fill: #666666;
            --color-button-accent: #ffffff;
            --color-button-accent-hover: #33f2ff;
            --color-button-muted: #636651;
		}
    }
</style>

Deploy to Netlify

Deploying to Netlify

Hi, I used to be able to deploy with Netlify with your template previously but now I get build errors whenever I try to deploy. Did you remove support for deploying to Netlify? I see that there isn't a netlify.toml file anymore and I added it but it still give me errors.

StorybookJS support?

Hi, your Readme says you have "StorybookJS preconfigured", but I don't see it in package.json

Is this a bug or did you drop storybook-support?

Doesn't work

Describe the bug

Lots of errors and depreciated things

To Reproduce

  1. Clone using npx degit navneetsharmaui/sveltekit-starter --force
  2. pnpm install
  3. pnpm dev
    • See error

Expected behavior

A clear and concise description of what you expected to happen.

Screenshots

If applicable, add screenshots to help explain your problem.

Desktop

Please complete the following information

  • OS: [e.g. iOS]
  • Browser [e.g. chrome, safari]
  • Version [e.g. 22]

Smartphone

Please complete the following information

  • Device: [e.g. iPhone6]
  • OS: [e.g. iOS8.1]
  • Browser [e.g. stock browser, safari]
  • Version [e.g. 22]

Additional context

Error log:

gitpod /workspace/ideashare (main) $ pnpm install
 WARN  deprecated [email protected]: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
Packages: +519
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Packages are cloned from the content-addressable store to the virtual store.
  Content-addressable store is at: /workspace/.pnpm-store/v3
  Virtual store is at:             node_modules/.pnpm
Progress: resolved 561, reused 221, downloaded 297, added 519, done
node_modules/.pnpm/[email protected]/node_modules/esbuild: Running postinstall script, done in 809ms
node_modules/.pnpm/[email protected]_nyu6umbehu4wjk4fztvoy55uia/node_modules/svelte-preprocess: Running postinstall script, done in 30ms

> [email protected] prepare /workspace/ideashare
> husky install

husky - Git hooks installed

devDependencies:
+ @sveltejs/adapter-vercel 1.0.0-next.26 (1.0.0-next.65 is available)
+ @sveltejs/kit 1.0.0-next.142 (1.0.0-next.392 is available)
+ @tailwindcss/typography 0.4.1 (0.5.4 is available)
+ @types/node 16.11.45 (18.0.6 is available)
+ @types/node-fetch 2.6.2
+ @types/nprogress 0.2.0
+ @typescript-eslint/eslint-plugin 5.30.7
+ @typescript-eslint/parser 5.30.7
+ autoprefixer 10.4.7
+ cross-env 7.0.3
+ cssnano 5.1.12
+ cssnano-preset-advanced 5.3.8
+ dotenv 10.0.0 (16.0.1 is available)
+ eslint 7.32.0 (8.20.0 is available)
+ eslint-config-airbnb-typescript 16.2.0 (17.0.0 is available)
+ eslint-config-prettier 8.5.0
+ eslint-import-resolver-typescript 2.7.1 (3.3.0 is available)
+ eslint-plugin-eslint-comments 3.2.0
+ eslint-plugin-import 2.26.0
+ eslint-plugin-promise 6.0.0
+ eslint-plugin-svelte3 3.4.1 (4.0.0 is available)
+ eslint-plugin-tsdoc 0.2.16
+ husky 7.0.4 (8.0.1 is available)
+ lint-staged 11.2.6 (13.0.3 is available)
+ node-fetch 2.6.7 (3.2.9 is available)
+ npm-run-all 4.1.5
+ nprogress 0.2.0
+ postcss 8.4.14
+ postcss-cli 8.3.1 (10.0.0 is available)
+ postcss-load-config 3.1.4 (4.0.1 is available)
+ prettier 2.2.1 (2.7.1 is available)
+ prettier-plugin-svelte 2.7.0
+ rimraf 3.0.2
+ svelte 3.49.0
+ svelte-check 2.8.0
+ svelte-loader 3.1.3
+ svelte-preprocess 4.10.7
+ tailwindcss 2.2.19 (3.1.6 is available)
+ ts-node 10.9.1
+ tslib 2.4.0
+ typescript 4.7.4

 ERR_PNPM_PEER_DEP_ISSUES  Unmet peer dependencies

.
└─┬ @sveltejs/kit
  └─┬ @sveltejs/vite-plugin-svelte
    └── ✕ unmet peer vite@^3.0.0: found 2.9.14 in @sveltejs/kit

hint: If you don't want pnpm to fail on peer dependency issues, add "strict-peer-dependencies=false" to an .npmrc file at the root of your project.
gitpod /workspace/ideashare (main) $ pnpm dev

> [email protected] dev /workspace/ideashare
> npm run check-env && npm run dev:sveltekit


> [email protected] check-env
> node --loader ts-node/esm scripts/js/check-env.ts

(node:6157) ExperimentalWarning: --experimental-loader is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)

> [email protected] dev:sveltekit
> svelte-kit dev


  SvelteKit v1.0.0-next.142

  local:   http://localhost:3000
  network: not exposed

  Use --host to expose server to other devices on this network



warn - You have enabled the JIT engine which is currently in preview.
warn - Preview features are not covered by semver, may introduce breaking changes, and can change at any time.
1:47:52 PM [vite-plugin-svelte] /workspace/ideashare/src/lib/shared/ui/components/navigation-progress-bar/NavigationProgressBar.svelte:79:1 No scopable elements found in template. If you're using global styles in the style tag, you should move it into an external stylesheet file and import it in JS. See https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#where-should-i-put-my-global-styles.
Function called outside component initialization
Error: Function called outside component initialization
    at get_current_component (/node_modules/.pnpm/[email protected]/node_modules/svelte/internal/index.mjs:953:15)
    at Module.setContext (/node_modules/.pnpm/[email protected]/node_modules/svelte/internal/index.mjs:985:5)
    at root.svelte:17:1
    at $$render (/node_modules/.pnpm/[email protected]/node_modules/svelte/internal/index.mjs?v=383e787c:1770:22)
    at Object.render (/node_modules/.pnpm/[email protected]/node_modules/svelte/internal/index.mjs?v=383e787c:1778:26)
    at render_response (file:///workspace/ideashare/node_modules/.pnpm/@[email protected][email protected]/node_modules/@sveltejs/kit/dist/ssr.js:472:28)
    at async respond$1 (file:///workspace/ideashare/node_modules/.pnpm/@[email protected][email protected]/node_modules/@sveltejs/kit/dist/ssr.js:1309:10)
    at async render_page (file:///workspace/ideashare/node_modules/.pnpm/@[email protected][email protected]/node_modules/@sveltejs/kit/dist/ssr.js:1353:19)
    at async resolve (file:///workspace/ideashare/node_modules/.pnpm/@[email protected][email protected]/node_modules/@sveltejs/kit/dist/ssr.js:1613:10)
    at async respond (file:///workspace/ideashare/node_modules/.pnpm/@[email protected][email protected]/node_modules/@sveltejs/kit/dist/ssr.js:1588:10)
Function called outside component initialization
Error: Function called outside component initialization
    at get_current_component (/node_modules/.pnpm/[email protected]/node_modules/svelte/internal/index.mjs:953:15)
    at Module.setContext (/node_modules/.pnpm/[email protected]/node_modules/svelte/internal/index.mjs:985:5)
    at root.svelte:17:1
    at $$render (/node_modules/.pnpm/[email protected]/node_modules/svelte/internal/index.mjs?v=383e787c:1770:22)
    at Object.render (/node_modules/.pnpm/[email protected]/node_modules/svelte/internal/index.mjs?v=383e787c:1778:26)
    at render_response (file:///workspace/ideashare/node_modules/.pnpm/@[email protected][email protected]/node_modules/@sveltejs/kit/dist/ssr.js:472:28)
    at async respond_with_error (file:///workspace/ideashare/node_modules/.pnpm/@[email protected][email protected]/node_modules/@sveltejs/kit/dist/ssr.js:1087:10)
    at async respond$1 (file:///workspace/ideashare/node_modules/.pnpm/@[email protected][email protected]/node_modules/@sveltejs/kit/dist/ssr.js:1323:10)
    at async render_page (file:///workspace/ideashare/node_modules/.pnpm/@[email protected][email protected]/node_modules/@sveltejs/kit/dist/ssr.js:1353:19)
    at async resolve (file:///workspace/ideashare/node_modules/.pnpm/@[email protected][email protected]/node_modules/@sveltejs/kit/dist/ssr.js:1613:10)
Function called outside component initialization
Error: Function called outside component initialization
    at get_current_component (/node_modules/.pnpm/[email protected]/node_modules/svelte/internal/index.mjs:953:15)
    at Module.setContext (/node_modules/.pnpm/[email protected]/node_modules/svelte/internal/index.mjs:985:5)
    at root.svelte:17:1
    at $$render (/node_modules/.pnpm/[email protected]/node_modules/svelte/internal/index.mjs?v=383e787c:1770:22)
    at Object.render (/node_modules/.pnpm/[email protected]/node_modules/svelte/internal/index.mjs?v=383e787c:1778:26)
    at render_response (file:///workspace/ideashare/node_modules/.pnpm/@[email protected][email protected]/node_modules/@sveltejs/kit/dist/ssr.js:472:28)
    at async respond$1 (file:///workspace/ideashare/node_modules/.pnpm/@[email protected][email protected]/node_modules/@sveltejs/kit/dist/ssr.js:1309:10)
    at async render_page (file:///workspace/ideashare/node_modules/.pnpm/@[email protected][email protected]/node_modules/@sveltejs/kit/dist/ssr.js:1353:19)
    at async resolve (file:///workspace/ideashare/node_modules/.pnpm/@[email protected][email protected]/node_modules/@sveltejs/kit/dist/ssr.js:1613:10)
    at async respond (file:///workspace/ideashare/node_modules/.pnpm/@[email protected][email protected]/node_modules/@sveltejs/kit/dist/ssr.js:1588:10)
Function called outside component initialization
Error: Function called outside component initialization
    at get_current_component (/node_modules/.pnpm/[email protected]/node_modules/svelte/internal/index.mjs:953:15)
    at Module.setContext (/node_modules/.pnpm/[email protected]/node_modules/svelte/internal/index.mjs:985:5)
    at root.svelte:17:1
    at $$render (/node_modules/.pnpm/[email protected]/node_modules/svelte/internal/index.mjs?v=383e787c:1770:22)
    at Object.render (/node_modules/.pnpm/[email protected]/node_modules/svelte/internal/index.mjs?v=383e787c:1778:26)
    at render_response (file:///workspace/ideashare/node_modules/.pnpm/@[email protected][email protected]/node_modules/@sveltejs/kit/dist/ssr.js:472:28)
    at async respond_with_error (file:///workspace/ideashare/node_modules/.pnpm/@[email protected][email protected]/node_modules/@sveltejs/kit/dist/ssr.js:1087:10)
    at async respond$1 (file:///workspace/ideashare/node_modules/.pnpm/@[email protected][email protected]/node_modules/@sveltejs/kit/dist/ssr.js:1323:10)
    at async render_page (file:///workspace/ideashare/node_modules/.pnpm/@[email protected][email protected]/node_modules/@sveltejs/kit/dist/ssr.js:1353:19)
    at async resolve (file:///workspace/ideashare/node_modules/.pnpm/@[email protected][email protected]/node_modules/@sveltejs/kit/dist/ssr.js:1613:10)

Storybook crashes when path aliases are used

If I try

import { Button } from '$ui/components/button';

from Card.svelte, storybook crashes.

Pretty much I can't use path aliases in components that have stories.

The error

ModuleNotFoundError: Module not found: Error: Can't resolve '$ui/components/button'

config.kit.prerender.pages has been renamed to `entries`.

Describe the bug
Clean project doesn't run and produces error 'config.kit.prerender.pages has been renamed to entries.'

To Reproduce
Steps to reproduce the behavior:

  1. Clone repo
  2. Use npm/yarn/pnpm install -> run dev

Expected behavior
Stuff works

Screenshots
image

Desktop (please complete the following information):

  • OS: Win 10
  • Browser: Brave

All in all im completely lost and feel like it isn't related to repo but to my pc somehow, but i've no idea how to fix it xD

error on build storybook

build the storybook fails with error:

Error: Can't find stylesheet to import.
  ╷
1 │ @import 'src/styles/_variables.scss';

because of src/stlles/variables/ path structure

Upgrade to Tailwind 2.1 and simplify config

This is just an advisory / notice that you can make things even nicer.

You no longer need @tailwindcss/jit since tailwindcss 2.1.
You then reduce the Tailwind config to this:

module.exports = {
	mode: "jit",
	purge: [
		"./src/**/*.{html,js,svelte,ts}",
	],
	theme: {
		extend: {},
	},
	plugins: [],
};

because the custom purge extractor is not supported in JIT, and because variants don't need to be configured (as far as I know) in JIT either.

tsyringe requires a reflect polyfill. Please add 'import "reflect-metadata"' to the top of your entry point.

On a fresh install of the template, following instructions exactly the following error is received:

    at Object.<anonymous> (/Users/admin/github/project-sprawl/node_modules/tsyringe/dist/cjs/index.js:5:11)
    at Module._compile (node:internal/modules/cjs/loader:1092:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1121:10)
    at Module.load (node:internal/modules/cjs/loader:972:32)
    at Function.Module._load (node:internal/modules/cjs/loader:813:14)
    at Module.require (node:internal/modules/cjs/loader:996:19)
    at require (node:internal/modules/cjs/helpers:92:18)
    at nodeRequire (/Users/admin/github/project-sprawl/node_modules/vite/dist/node/chunks/dep-e9a16784.js:68211:17)
    at ssrImport (/Users/admin/github/project-sprawl/node_modules/vite/dist/node/chunks/dep-e9a16784.js:68164:20)
    at eval (/src/lib/core/services/https/http-json.ts:14:31)```

PurgeCSS remove svelte component CSS

How to reproduce:

  1. clone repo and install project
  2. add any svelte component to page, Button for example
  3. run build:static
  4. PROFIT: component display and work at page, but loose styles
    PurgeCSS find selectors correctly.

Not being able to use @layer based components/utilities

It appears with the current config we are not able to detect @layer definitions inside svelte files at build time...
but by asking for some guidance I discovered I've got to add

// tailwind.config.js
module.exports = {
  purge: {
    options: {
	  content: ['./src/**/*.{html,js,svelte,ts}'],
      defaultExtractor: content => [
        ...(content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || []),
        ...(content.match(/(?<=class:)[^=>\/\s]*/g) || []),
      ],
    },
  },

but I don't fully understand how exactly it fixes. I don't mind pushing a PR, but for the reason I don't dominate it very well yet, first I would like to open a issue to discover if it would be against something this repo aims to accomplish...

sveltekit-starter/tailwind.config.cjs

Line 6 in 8d7cbb3

content: ['./src/**/*.{html,js,svelte,ts}'],

Storybook and Tailwind

Hello

I'm unable to get the Tailwind css to display when viewing in Storybook.

Do you have any suggestions for what might be the problem?

Documentation needed

Is your feature request related to a problem? Please describe.
The main reason I look for a starter is the fact that I am still not used to Svelte-kit. This starter brings a lot of features. It would be interesting if there was documentation of this starter that explained what is what here. There are many folders and files that are not part of the vanilla svelte-kit (that is the point of building a starter), but it is very difficult to figure out everything.

Describe the solution you'd like
A folder by folder, file by file description of the starter.

Importing from '$app/env'

Describe the bug

when importing from $app/env a typescript error is raised.

To Reproduce

  • open the project in VSCode
  • go to routes/index.svelte
  • add import { browser } from '$app/env'; to the imports
  • hover the import: see an error.

Screenshots

image

Entire Home Page HTML body tag is not showing fully

Describe the bug

Home page does not show entire HTML body tag.

To Reproduce

Steps to reproduce the behavior:

  1. Git clone sveltekit-starter
  2. yarn install
  3. yarn run dev -- --open

Expected behavior

By removing the tailwind.css starter class css, flex display.

#starter {
	/* display: flex; */
	flex-direction: column;
	min-height: 100%;
	height: 100%;
}

The correct layout was achieved
image

Screenshots

Current issue
image

Desktop

Please complete the following information

  • OS: Ubuntu 22.04
  • Browser Firefox v99.0.1
  • Package Manger: Yarn v1.22.18

[ERR_LOADER_CHAIN_INCOMPLETE]: "ts-node/esm 'resolve'" did not call the next hook

After following installation instructions

npm i

and running the dev server:

npm run dev

I get the following error:

> [email protected] dev
> npm run check-env && npm run dev:sveltekit


> [email protected] check-env
> node --loader ts-node/esm scripts/js/check-env.ts

(node:279536) ExperimentalWarning: `--experimental-loader` may be removed in the future; instead use `register()`:
--import 'data:text/javascript,import { register } from "node:module"; import { pathToFileURL } from "node:url"; register("ts-node/esm", pathToFileURL("./"));'
(Use `node --trace-warnings ...` to show where the warning was created)

node:internal/process/esm_loader:40
      internalBinding('errors').triggerUncaughtException(
                                ^
Error [ERR_LOADER_CHAIN_INCOMPLETE]: "ts-node/esm 'resolve'" did not call the next hook in its chain and did not explicitly signal a short circuit. If this is intentional, include `shortCircuit: true` in the hook's return.
    at new NodeError (node:internal/errors:406:5)
    at Hooks.resolve (node:internal/modules/esm/hooks:286:13)
    at async MessagePort.handleMessage (node:internal/modules/esm/worker:168:18) {
  code: 'ERR_LOADER_CHAIN_INCOMPLETE'
}

Node.js v20.8.0

Running main branch on Linux Mint 21.3 Cinnamon.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.