From 2.5.2 csp types in svelte.config.js are broken
#11906The inclusion of svelte.config.js
is a breaking change since it's type-checked now and that can break projects which did type-check without errors previously
closes #11906
Also relaxes the report-uri types, fully qualified urls are also ok closes #11905
pnpm test
and lint the project with pnpm lint
and pnpm check
pnpm changeset
and following the prompts. Changesets that add features should be minor
and those that fix bugs should be patch
. Please prefix changeset messages with feat:
, fix:
, or chore:
.After upgrading from kit 2.5.1 to 2.5.2 the follwing svelte.config.js is broken:
import adapter from "@sveltejs/adapter-static";
import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
/** @type {import('@sveltejs/kit').Config} */
const config = {
preprocess: vitePreprocess(),
kit: {
// ... others
csp: csp(),
},
};
export default config;
function csp() {
if (dev) return;
let directives = {
"default-src": ["something"],
"style-src": ["something", "unsafe-inline"],
"img-src": ["*", "data:"],
"connect-src": ["self"],
"object-src": ["data:"],
"frame-src": ["data:"],
};
return { directives };
}
The error I get from typescript is:
Type '{ directives: { 'default-src': string[]; 'style-src': string[]; 'img-src': string[]; 'connect-src': string[]; 'object-src': string[]; 'frame-src': string[]; }; } | undefined' is not assignable to type '{ mode?: "nonce" | "hash" | "auto" | undefined; directives?: CspDirectives | undefined; reportOnly?: CspDirectives | undefined; } | undefined'.
Type '{ directives: { 'default-src': string[]; 'style-src': string[]; 'img-src': string[]; 'connect-src': string[]; 'object-src': string[]; 'frame-src': string[]; }; }' is not assignable to type '{ mode?: "nonce" | "hash" | "auto" | undefined; directives?: CspDirectives | undefined; reportOnly?: CspDirectives | undefined; }'.
The types of 'directives['default-src']' are incompatible between these types.
Type 'string[]' is not assignable to type '(Source | ActionSource)[]'.
Type 'string' is not assignable to type 'Source | ActionSource'.ts(2322)
I don't understand how to fix.
I'll post soon.
No response
npmPackages:
@sveltejs/adapter-static: 3.0.1 => 3.0.1
@sveltejs/kit: 2.5.2 => 2.5.2
@sveltejs/vite-plugin-svelte: 3.0.2 => 3.0.2
svelte: 4.2.12 => 4.2.12
blocking an upgrade
No response
This is because the directive inferred as strings from the csp()
method instead of their actual values (usually achieved by doing as const
in TypeScript).
SvelteKit seems to have "smart" types for the CSP config, but it's kinda difficult to resolve these when the svelte config is a JS file instead of TS...
The jsconfig vs Typescript thing is a mess.