diff --git a/documentation/faq/200-hmr.md b/documentation/faq/200-hmr.md new file mode 100644 index 000000000000..e511f356437b --- /dev/null +++ b/documentation/faq/200-hmr.md @@ -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. diff --git a/documentation/faq/300-fallthrough.md b/documentation/faq/300-fallthrough.md new file mode 100644 index 000000000000..cb88fea20479 --- /dev/null +++ b/documentation/faq/300-fallthrough.md @@ -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. diff --git a/documentation/faq/400-adapters.md b/documentation/faq/400-adapters.md new file mode 100644 index 000000000000..afa096beb760 --- /dev/null +++ b/documentation/faq/400-adapters.md @@ -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"`. diff --git a/documentation/faq/500-aliases.md b/documentation/faq/500-aliases.md new file mode 100644 index 000000000000..25c452433a2a --- /dev/null +++ b/documentation/faq/500-aliases.md @@ -0,0 +1,34 @@ +--- +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): + +``` +// svelte.config.cjs +const path = require('path'); +module.exports = { + kit: { + vite: { + resolve: { + alias: { + '$utils': path.resolve('./src/utils') + } + } + } + } +}; +`` + +In `tsconfig.json` (for TypeScript users) or `jsconfig.json` (for JavaScript users) to make VS Code aware of the alias: +``` +{ + "compilerOptions": { + "paths": { + "$utils/*": ["src/utils/*"] + } + } +} +``` diff --git a/documentation/faq/600-packages.md b/documentation/faq/600-packages.md new file mode 100644 index 000000000000..c2cfffee3589 --- /dev/null +++ b/documentation/faq/600-packages.md @@ -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. diff --git a/documentation/faq/700-integrations.md b/documentation/faq/700-integrations.md new file mode 100644 index 000000000000..6612c02614d0 --- /dev/null +++ b/documentation/faq/700-integrations.md @@ -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 the ESM drop-in replacement `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`.