diff --git a/docs/headingsDetached.tsx b/docs/headingsDetached.tsx index f93e19f907..c0154abe56 100644 --- a/docs/headingsDetached.tsx +++ b/docs/headingsDetached.tsx @@ -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' diff --git a/docs/pages/client-runtime-twice/+Page.mdx b/docs/pages/client-runtime-twice/+Page.mdx new file mode 100644 index 0000000000..6aab8b3b33 --- /dev/null +++ b/docs/pages/client-runtime-twice/+Page.mdx @@ -0,0 +1,16 @@ +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' +``` diff --git a/docs/pages/client-runtimes-conflict/+Page.mdx b/docs/pages/client-runtimes-conflict/+Page.mdx index 904376e18b..a0d092382a 100644 --- a/docs/pages/client-runtimes-conflict/+Page.mdx +++ b/docs/pages/client-runtimes-conflict/+Page.mdx @@ -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 Server Routing as well as the client runtime of Client Routing. + +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 @@ -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 such as `prefetch()` or `navigate()`, for a page that uses . + - You're importing a utility that is only available to Client Routing such as `prefetch()` or `navigate()`, for a page that uses Server Routing. ```js // ❌ Don't import these for pages that use Server Routing import { prefetch } from 'vike/client/router' diff --git a/vike/utils/assertSingleInstance.ts b/vike/utils/assertSingleInstance.ts index e16d59b6db..44432c9f8d 100644 --- a/vike/utils/assertSingleInstance.ts +++ b/vike/utils/assertSingleInstance.ts @@ -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() { {