vite.define cannot be used in top-level execution in client hooks in dev server

[princescar]

Describe the bug

Defined a constant in Vite config and used it in hooks.client.js, it result in ReferenceError: __SOME_THING__ is not defined.

This only affect dev server, and it only happens when used in top-level execution.

Reproduction

1. Define a constant in vite.config.js

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
	define: {
		__SOME_THING__: { key: 'value' }
	},
	plugins: [sveltekit()]
});

2. Reference in hooks.client.js

console.log(__SOME_THING__);

3. Start the dev server

Logs

hooks.client.js:1 Uncaught (in promise) ReferenceError: __SOME_THING__ is not defined
    at hooks.client.js:1:13
(anonymous) @ hooks.client.js:1

System Info

System:
    OS: macOS 15.2
    CPU: (8) arm64 Apple M1
    Memory: 77.94 MB / 16.00 GB
    Shell: 3.7.1 - /opt/homebrew/bin/fish
  Binaries:
    Node: 22.12.0 - ~/.local/share/nvm/v22.12.0/bin/node
    Yarn: 1.22.22 - /opt/homebrew/bin/yarn
    npm: 10.9.0 - ~/.local/share/nvm/v22.12.0/bin/npm
    pnpm: 9.15.1 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 131.0.6778.205
    Safari: 18.2
  npmPackages:
    @sveltejs/adapter-auto: ^3.0.0 => 3.3.1 
    @sveltejs/kit: ^2.0.0 => 2.15.1 
    @sveltejs/vite-plugin-svelte: ^4.0.0 => 4.0.4 
    svelte: ^5.0.0 => 5.16.0 
    vite: ^5.4.11 => 5.4.11

Severity

annoyance

[teemingc]

Awaiting the client.start module import before importing client.app gives Vite a chance to define the global constant replacements before the client hooks and universal hooks modules are loaded. However, I don't think this is the right solution.

kit/packages/kit/src/runtime/server/page/render.js

Lines 411 to 414 in 9a4a411

	? `Promise.all([
	import(${s(prefixed(client.start))}),
	import(${s(prefixed(client.app))})
	]).then(([kit, app]) => {

Although, I wonder why the client.start module runs runs Vite code but client.app doesn't.

[Nic-Polumeyv]

This looks resolved as of #15971 (merged, will ship in the next 2.x patch).

That PR fixes the specific __SVELTEKIT_APP_VERSION__ case, but the part that closes this issue is more general: in dev it now eagerly imports the Vite client in the bootstrap, before any app or hook code runs:

// render.js
${DEV ? `import('${paths.base}/@vite/client')` : ''}

Vite installs define replacements as runtime globals when its client loads. Before #15971 the client was only an async <script type="module"> in the head, racing the boot, so a top-level define reference in hooks.client.js could evaluate first and throw. The eager import makes the client load before the hooks, so arbitrary user define constants are available.

Repro to confirm, on main:

// vite.config.js
export default { define: { __SOME_THING__: JSON.stringify('value') }, plugins: [sveltekit()] };

// src/hooks.client.js  (no other imports, so nothing forces the Vite client first)
export const x = __SOME_THING__;

On main the page loads without the ReferenceError. Reverting just the import('/@vite/client') line brings it back, in both a fresh app and the writes test app. It's dev-only either way; production statically replaces define at build.

Happy to open a small regression test for the user-define case (the existing options-2 test only covers $app/env) if that's useful. Otherwise this can probably be closed.

[Nic-Polumeyv]

Fixed in 2.63.1 by #15971. Vite define globals are now initialised before hooks.client.js evaluates in dev. Safe to
close.