Skip to content

Commit

Permalink
fix: more lightweight and succint client-side err msg
Browse files Browse the repository at this point in the history
  • Loading branch information
brillout committed Aug 6, 2024
1 parent cb20a38 commit 52e0e49
Show file tree
Hide file tree
Showing 4 changed files with 32 additions and 8 deletions.
4 changes: 4 additions & 0 deletions docs/headingsDetached.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -367,6 +367,10 @@ const headingsDetached = [
title: 'Client runtimes conflict',
url: '/client-runtimes-conflict'
},
{
title: 'Client runtime loaded twice',
url: '/client-runtime-twice'
},
{
title: '`includeAssetsImportedByServer`',
url: '/includeAssetsImportedByServer'
Expand Down
18 changes: 18 additions & 0 deletions docs/pages/client-runtime-twice/+Page.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { Link } from '@brillout/docpress'

If you get this warning:

```
Client runtime loaded twice
```

Then this means that the page has loaded more than one copy of Vike's client runtime. In other words, the client-side bundle of the page includes Vike's client runtime twice (or more).

In order to reduce the size of your client, make sure that the client-side JavaScript of a given page includes Vike's client runtime only once.

You can, for example with Unix, inspect where Vike's client runtime is included:

```bash
cd dist/client/
grep -r 'loaded twice'
```
13 changes: 8 additions & 5 deletions docs/pages/client-runtimes-conflict/+Page.mdx
Original file line number Diff line number Diff line change
@@ -1,13 +1,16 @@
import { Link } from '@brillout/docpress'

If you get the following warning:
If you get this warning:

```
The client runtime of Server Routing as well as the client runtime of Client Routing are both
being loaded. Make sure they aren't loaded both at the same time for a given page.
Client runtime of both Server Routing and Client Routing loaded
```

Then the problem is likely due to one the following.
Then this means that the page loads the client runtime of <Link href="/server-routing">Server Routing</Link> as well as the client runtime of <Link href="/client-routing" />Client Routing</Link>.

A given page should *either* use Server Routing *or* Client Routing, never both. Thus only one runtime should be loaded.

The problem is often due to one the following.
- You configured [Rollup's code splitting](https://vitejs.dev/guide/build.html#chunking-strategy) in a way that includes both runtimes inside a same bundle. For example:
```js
// vite.config.js
Expand All @@ -28,7 +31,7 @@ Then the problem is likely due to one the following.

export default { build: { rollupOptions } }
```
- You're importing a utility that is only available to <Link text="Client Routing" href="/client-routing" /> such as `prefetch()` or `navigate()`, for a page that uses <Link text="Server Routing" href="/server-routing" />.
- You're importing a utility that is only available to <Link href="/client-routing" />Client Routing</Link> such as `prefetch()` or `navigate()`, for a page that uses <Link href="/server-routing" />Server Routing</Link>.
```js
// ❌ Don't import these for pages that use Server Routing
import { prefetch } from 'vike/client/router'
Expand Down
5 changes: 2 additions & 3 deletions vike/utils/assertSingleInstance.ts
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,8 @@ const globalObject = getGlobalObject<{
})

const clientRuntimesClonflict =
"The client runtime of Server Routing as well as the client runtime of Client Routing are both being loaded. Make sure they aren't loaded both at the same time for a given page. See https://vike.dev/client-runtimes-conflict"
const clientNotSingleInstance =
"Two vike client runtime instances are being loaded. Make sure your client-side bundles don't include vike twice. (In order to reduce the size of your client-side JavaScript bundles.)"
'Client runtime of both Server Routing and Client Routing loaded https://vike.dev/client-runtimes-conflict'
const clientNotSingleInstance = 'Client runtime loaded twice https://vike.dev/client-runtime-duplicated'

function assertSingleInstance() {
{
Expand Down

0 comments on commit 52e0e49

Please sign in to comment.