Skip to content

Commit

Permalink
Flesh out the FAQ content
Browse files Browse the repository at this point in the history
  • Loading branch information
benmccann committed Apr 5, 2021
1 parent bd0560c commit 26d451d
Show file tree
Hide file tree
Showing 6 changed files with 44 additions and 0 deletions.
5 changes: 5 additions & 0 deletions documentation/faq/200-hmr.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
question: How do I use HMR with SvelteKit?
---

SvelteKit has HMR enabled by default powered by [svelte-hmr](https://github.com/rixo/svelte-hmr). If you saw, [Rich's presentation at the 2020 Svelte Summit](https://svelte.dev/blog/whats-the-deal-with-sveltekit) you may have seen a more powerful-looking version of HMR presented. This demo had `svelte-hmr`'s `preserveLocalState` flag on. This flag is now off by default because it may lead to unexpected behavior and edge cases. But don't worry, you are still getting HMR with SvelteKit! If you'd like to preserve local state you can use the `@hmr:keep` or `@hmr:keep-all` directives as documented on the [svelte-hmr](https://github.com/rixo/svelte-hmr) page.
5 changes: 5 additions & 0 deletions documentation/faq/300-fallthrough.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
question: Why am I getting a 404?
---

Please make sure you're returning something from your page's `load` function. See the section about [fallthrough routes](../docs#routing-advanced-fallthrough-routes) for more details.
5 changes: 5 additions & 0 deletions documentation/faq/400-adapters.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
question: I'm having trouble using an adapter.
---

Please make sure the version of the adapter specified in your `package.json` is `"next"`.
7 changes: 7 additions & 0 deletions documentation/faq/500-aliases.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
question: How do I setup a path alias?
---

Please be aware that you will probably want the alias specified in two places:
* In `svelte.config.cjs` add [`vite.resolve.alias`](https://vitejs.dev/config/#resolve-alias)
* In `tsconfig.json` (for TypeScript users) or `jsconfig.json` (for JavaScript users) to make VS Code aware of the alias
7 changes: 7 additions & 0 deletions documentation/faq/600-packages.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
question: How do I fix the error I'm getting trying to include a package?
---

Most of these issues come from Vite trying to deal with non-ESM libraries. You may find helpful examples in [the Vite issue tracker](https://github.com/vitejs/vite/issues). The most common solutions would be to try moving the package between `dependencies` and `devDependencies` or trying to `include` or `exclude` it in `optimizeDeps`. Packages which use `exports` instead of `module.exports` are currently failing due to a [known Vite issue](https://github.com/vitejs/vite/issues/2579).

You should also consider asking the library author to distribute an ESM version of their package or even converting the source for the package entirely to ESM.
15 changes: 15 additions & 0 deletions documentation/faq/700-integrations.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
---
question: How do I use X with SvelteKit?
---

## How do I setup library X?

Please see [sveltejs/integrations](https://github.com/sveltejs/integrations#sveltekit) for examples of using many popular libraries like Tailwind, PostCSS, Firebase, GraphQL, mdsvex, and more.

## How do I setup a database?

Put the code to query your database in [endpoints](../docs#routing-endpoints) - don't query the database in .svelte files. You can create a `db.js` or similar that sets up a connection immediately and makes the client accessible throughout the app as a singleton. You can execute any one-time setup code in `hooks.js` and import your database helpers into any endpoint that needs them.

## How do I use Axios?

You probably don't need it. We'd generally recommend you just use `fetch` instead. If you insist, you're probably better off using an ESM-friendly alternative like `redaxios` [until axios utilizes ESM](https://github.com/axios/axios/issues/1879). Finally, if you still want to use Axios itself, try putting it in `optimizeDeps.include`.

0 comments on commit 26d451d

Please sign in to comment.