FAQ

Things I see a lot on Discord

• hmr questions - we should document the configuration
• load fallthrough
• vite aliases (also in jsconfig.json). can use this as a workaround to fix package imports. e.g. alias: { 'firebase/app': resolve('firebase/app/dist/index.cjs.js') }
• packages not working with vite (try moving between dependencies and devDependencies as in https://github.com/sveltejs/kit/issues/655. or trying to include or exclude it in optimizeDeps)
• adapter broken because using old version (https://github.com/sveltejs/kit/issues/686 would be a better solution than documenting however)
• how do I use X with SvelteKit?
  • how do I setup Tailwind (pointing people to https://github.com/svelte-add/tailwindcss always works)
  • how do I setup a database? (put querying code in endpoints and not .svelte files. tips for database setup code and https://github.com/sveltejs/kit/issues/693#issuecomment-809845036)
  • how do I use Axios (you probably don’t need it. just use fetch instead. or if you insist you’re probably better off using an ESM-friendly alternative like redaxios. finally, if you still want to use axios itself, try putting it in optimizeDeps.include)

[rmunn]

I feel like a quick guide to Vite’s dependency-related options would be a good thing to put in Svelte-Kit’s FAQ. The Vite documentation does contain what you need to know, but for a newbie it can feel a bit confusing. Why is there different behavior between dependencies and devDependencies? What does optimizeDeps do, anyway? And what will happen if I specify ssr.external vs ssr.noExternal? What’s this “externalizing” dependencies thing?

I’ve been doing Javascript for several years and I myself am not 100% clear on some of those questions, certainly not enough to be able to answer newbie questions. Someone new to Javascript is going to feel lost at sea with this stuff. Since Svelte-Kit comes configured with SSR out-of-the-box, I think something in the documentation should include a gentle guide to SSR, the difference between ESM and CJS modules, and what it all means, followed by some suggested troubleshooting steps if you run into the dreaded “require is not defined” error trying to import some NPM package. No need to go into too much detail since it’s going to be a document intended for newbies, and you don’t want to overwhelm them with too much information, but just something like “Javascript modules have two different formats, CJS that uses ‘require’ and ESM that uses ‘import’. We try to hide the difference from you and make things Just Work™ as much as possible, but you’ll occasionally run into trouble with NPM packages you’re trying to import. When you do, here are some steps to try.”

In other words, something like the “How do I fix the error I’m getting trying to include a package?” section in #877 but fleshed out a little more, with a couple sentences to explain the most basic of the concepts and a few different common scenarios: the error message you’ll see, the solution that works for that scenario.

[benmccann]

The FAQ content has been merged into this repo, but still needs to be published: https://github.com/sveltejs/sites/issues/19