diff --git a/.changeset/fine-nights-mix.md b/.changeset/fine-nights-mix.md new file mode 100644 index 000000000..7f4502dfb --- /dev/null +++ b/.changeset/fine-nights-mix.md @@ -0,0 +1,5 @@ +--- +'@sveltejs/vite-plugin-svelte': patch +--- + +add `svelte > clsx` to optimizeDeps.include to avoid page reload when using vite6 and npm diff --git a/packages/e2e-tests/kit-node/__tests__/kit.spec.ts b/packages/e2e-tests/kit-node/__tests__/kit.spec.ts index 10412f711..2d36c82fb 100644 --- a/packages/e2e-tests/kit-node/__tests__/kit.spec.ts +++ b/packages/e2e-tests/kit-node/__tests__/kit.spec.ts @@ -318,6 +318,7 @@ describe('kit-node', () => { 'svelte/store', 'svelte/transition', 'svelte', + 'svelte > clsx', 'svelte/internal/disclose-version', 'svelte/internal/flags/legacy', 'svelte/internal/flags/tracing', diff --git a/packages/e2e-tests/prebundle-svelte-deps/__tests__/prebundle-svelte-deps.spec.ts b/packages/e2e-tests/prebundle-svelte-deps/__tests__/prebundle-svelte-deps.spec.ts index fd5bcf1f5..8f4de11f6 100644 --- a/packages/e2e-tests/prebundle-svelte-deps/__tests__/prebundle-svelte-deps.spec.ts +++ b/packages/e2e-tests/prebundle-svelte-deps/__tests__/prebundle-svelte-deps.spec.ts @@ -33,6 +33,8 @@ if (!isBuild) { expect(optimizedPaths).toContain('e2e-test-dep-svelte-api-only'); expect(optimizedPaths).toContain('e2e-test-dep-svelte-nested'); expect(optimizedPaths).toContain('e2e-test-dep-svelte-module'); + expect(optimizedPaths).toContain('svelte'); + expect(optimizedPaths).toContain('svelte > clsx'); }); test('should not optimize excluded svelte dependencies', () => { diff --git a/packages/vite-plugin-svelte/src/utils/constants.js b/packages/vite-plugin-svelte/src/utils/constants.js index 3cc59d40f..a69fe5589 100644 --- a/packages/vite-plugin-svelte/src/utils/constants.js +++ b/packages/vite-plugin-svelte/src/utils/constants.js @@ -1,8 +1,13 @@ import { createRequire } from 'node:module'; -export const SVELTE_IMPORTS = Object.entries( - createRequire(import.meta.url)('svelte/package.json').exports -) +const sveltePkg = createRequire(import.meta.url)('svelte/package.json'); + +// list of svelte runtime dependencies to optimize together with svelte itself +export const SVELTE_RUNTIME_DEPENDENCIES = [ + 'clsx' // avoids dev server restart after page load with npm + vite6 (see #1067) +].filter((dep) => !!sveltePkg.dependencies?.[dep]); + +export const SVELTE_IMPORTS = Object.entries(sveltePkg.exports) .map(([name, config]) => { // ignore type only if (typeof config === 'object' && Object.keys(config).length === 1 && config.types) { diff --git a/packages/vite-plugin-svelte/src/utils/options.js b/packages/vite-plugin-svelte/src/utils/options.js index 6582e6e7e..1cd0f69fd 100644 --- a/packages/vite-plugin-svelte/src/utils/options.js +++ b/packages/vite-plugin-svelte/src/utils/options.js @@ -12,7 +12,8 @@ import { DEFAULT_SVELTE_EXT, FAQ_LINK_MISSING_EXPORTS_CONDITION, SVELTE_EXPORT_CONDITIONS, - SVELTE_IMPORTS + SVELTE_IMPORTS, + SVELTE_RUNTIME_DEPENDENCIES } from './constants.js'; import path from 'node:path'; @@ -550,8 +551,9 @@ function buildExtraConfigForSvelte(config) { const svelteImportsToInclude = SVELTE_IMPORTS.filter( (si) => !(si.endsWith('/server') || si.includes('/server/')) ); + svelteImportsToInclude.push(...SVELTE_RUNTIME_DEPENDENCIES.map((dep) => `svelte > ${dep}`)); log.debug( - `adding bare svelte packages to optimizeDeps.include: ${svelteImportsToInclude.join(', ')} `, + `adding bare svelte packages and runtime dependencies to optimizeDeps.include: ${svelteImportsToInclude.join(', ')} `, undefined, 'config' );