From 6e967ff1343631932366ae44c45d1b6575d15080 Mon Sep 17 00:00:00 2001
From: Ravi van Rooijen <ravivanrooijen@live.nl>
Date: Wed, 25 Oct 2023 19:19:17 +0200
Subject: [PATCH] docs: update FAQ entry on using client-only libraries
 (#10886)

Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>
---
 documentation/docs/60-appendix/01-faq.md | 37 +++++++++++++-----------
 1 file changed, 20 insertions(+), 17 deletions(-)

diff --git a/documentation/docs/60-appendix/01-faq.md b/documentation/docs/60-appendix/01-faq.md
index 1dfb031c76da..77973618ea52 100644
--- a/documentation/docs/60-appendix/01-faq.md
+++ b/documentation/docs/60-appendix/01-faq.md
@@ -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?
@@ -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
 ```