Skip to content

Commit

Permalink
docs: update FAQ entry on using client-only libraries (#10886)
Browse files Browse the repository at this point in the history
Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>
  • Loading branch information
HoldYourWaffle and benmccann committed Oct 25, 2023
1 parent 1968e15 commit 6e967ff
Showing 1 changed file with 20 additions and 17 deletions.
37 changes: 20 additions & 17 deletions documentation/docs/60-appendix/01-faq.md
Original file line number Diff line number Diff line change
Expand Up @@ -141,21 +141,24 @@ onMount(() => {
});
```
Otherwise, if the library has side effects and you'd still prefer to use static imports, check out [vite-plugin-iso-import](https://github.com/bluwy/vite-plugin-iso-import) to support the `?client` import suffix. The import will be stripped out in SSR builds. However, note that you will lose the ability to use VS Code Intellisense if you use this method.
```js
// @filename: ambient.d.ts
// @lib: ES2015
declare module 'some-browser-only-library?client';

// @filename: index.js
// ---cut---
import { onMount } from 'svelte';
import { method } from 'some-browser-only-library?client';

onMount(() => {
method('hello world');
});
Finally, you may also consider using an `{#await}` block:
```svelte
<!--- file: index.svelte --->
<script>
import { browser } from '$app/environment';

const ComponentConstructor = browser ?
import('some-browser-only-library').then((module) => module.Component) :
new Promise(() => {});
</script>

{#await ComponentConstructor}
<p>Loading...</p>
{:then component}
<svelte:component this={component} />
{:catch error}
<p>Something went wrong: {error.message}</p>
{/await}
```
### How do I use a different backend API server?
Expand Down Expand Up @@ -234,11 +237,11 @@ yarn set version berry
yarn install
```
**Yarn 3 global cache**
#### Yarn 3 global cache
One of the more interesting features of Yarn Berry is the ability to have a single global cache for packages, instead of having multiple copies for each project on the disk. However, setting `enableGlobalCache` to true causes building to fail, so it is recommended to add the following to the `.yarnrc.yml` file:
```
```yaml
nodeLinker: node-modules
```
Expand Down

0 comments on commit 6e967ff

Please sign in to comment.