diff --git a/.changeset/three-icons-behave.md b/.changeset/three-icons-behave.md new file mode 100644 index 000000000..6911fde27 --- /dev/null +++ b/.changeset/three-icons-behave.md @@ -0,0 +1,5 @@ +--- +'@sveltejs/vite-plugin-svelte': patch +--- + +Remove user-specified values for essential compilerOptions generate, format, cssHash and filename and log a warning diff --git a/docs/config.md b/docs/config.md index cdc63326c..fa06ed14f 100644 --- a/docs/config.md +++ b/docs/config.md @@ -42,6 +42,8 @@ A basic Svelte config looks like this: // svelte.config.js export default { // config options + compilerOptions: {}, + preprocess: [] }; ``` @@ -77,13 +79,11 @@ export default defineConfig({ These options are specific to the Svelte compiler and are generally shared across many bundler integrations. - - ### compilerOptions - **Type:** `CompileOptions` - See [svelte.compile](https://svelte.dev/docs#svelte_compile) - The options to be passed to the Svelte compiler. A few options are set by default, including `dev`, `format` and `css`. However, some options are non-configurable, like `filename`, `generate`, and `cssHash`. + The options to be passed to the Svelte compiler. A few options are set by default, including `dev` and `css`. However, some options are non-configurable, like `filename`, `format`, `generate`, and `cssHash` (in dev). ### preprocess diff --git a/packages/vite-plugin-svelte/src/utils/compile.ts b/packages/vite-plugin-svelte/src/utils/compile.ts index 3cdf74de1..d5f31f11d 100644 --- a/packages/vite-plugin-svelte/src/utils/compile.ts +++ b/packages/vite-plugin-svelte/src/utils/compile.ts @@ -21,7 +21,8 @@ const _createCompileSvelte = (makeHot: Function) => const compileOptions: CompileOptions = { ...options.compilerOptions, filename, - generate: ssr ? 'ssr' : 'dom' + generate: ssr ? 'ssr' : 'dom', + format: 'esm' }; if (options.hot && options.emitCss) { const hash = `s-${safeBase64Hash(normalizedFilename)}`; diff --git a/packages/vite-plugin-svelte/src/utils/options.ts b/packages/vite-plugin-svelte/src/utils/options.ts index fe971c797..21a0d7a69 100644 --- a/packages/vite-plugin-svelte/src/utils/options.ts +++ b/packages/vite-plugin-svelte/src/utils/options.ts @@ -61,10 +61,7 @@ export async function preResolveOptions( }; const defaultOptions: Partial = { extensions: ['.svelte'], - emitCss: true, - compilerOptions: { - format: 'esm' - } + emitCss: true }; const svelteConfig = await loadSvelteConfig(viteConfigWithResolvedRoot, inlineOptions); const extraOptions: Partial = { @@ -118,6 +115,7 @@ export function resolveOptions( }; const merged: ResolvedOptions = mergeConfigs(defaultOptions, preResolveOptions, extraOptions); + removeIgnoredOptions(merged); addExtraPreprocessors(merged, viteConfig); enforceOptionsForHmr(merged); enforceOptionsForProduction(merged); @@ -177,6 +175,26 @@ function enforceOptionsForProduction(options: ResolvedOptions) { } } +function removeIgnoredOptions(options: ResolvedOptions) { + const ignoredCompilerOptions = ['generate', 'format', 'filename']; + if (options.hot && options.emitCss) { + ignoredCompilerOptions.push('cssHash'); + } + const passedCompilerOptions = Object.keys(options.compilerOptions || {}); + const passedIgnored = passedCompilerOptions.filter((o) => ignoredCompilerOptions.includes(o)); + if (passedIgnored.length) { + log.warn( + `The following Svelte compilerOptions are controlled by vite-plugin-svelte and essential to its functionality. User-specified values are ignored. Please remove them from your configuration: ${passedIgnored.join( + ', ' + )}` + ); + passedIgnored.forEach((ignored) => { + // @ts-expect-error string access + delete options.compilerOptions[ignored]; + }); + } +} + // vite passes unresolved `root`option to config hook but we need the resolved value, so do it here // https://github.com/sveltejs/vite-plugin-svelte/issues/113 // https://github.com/vitejs/vite/blob/43c957de8a99bb326afd732c962f42127b0a4d1e/packages/vite/src/node/config.ts#L293 @@ -401,11 +419,13 @@ export interface Options { emitCss?: boolean; /** - * The options to be passed to the Svelte compiler + * The options to be passed to the Svelte compiler. A few options are set by default, + * including `dev` and `css`. However, some options are non-configurable, like + * `filename`, `format`, `generate`, and `cssHash` (in dev). * * @see https://svelte.dev/docs#svelte_compile */ - compilerOptions?: CompileOptions; + compilerOptions?: Omit; /** * Handles warning emitted from the Svelte compiler