fix: revert mjs extension usage by default, make it an option

.changeset/light-oranges-complain.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: revert mjs extension usage by default, make it an option

packages/kit/src/core/config/index.spec.js

@@ -90,6 +90,7 @@ const get_defaults = (prefix = '') => ({
 		},
 		inlineStyleThreshold: 0,
 		moduleExtensions: ['.js', '.ts'],
+		output: { mjs: false },
 		outDir: join(prefix, '.svelte-kit'),
 		serviceWorker: {
 			register: true

packages/kit/src/core/config/options.js

@@ -138,6 +138,10 @@ const options = object(
 
 			outDir: string('.svelte-kit'),
 
+			output: object({
+				mjs: boolean(false)
+			}),
+
 			paths: object({
 				base: validate('', (input, keypath) => {
 					assert_string(input, keypath);

packages/kit/src/core/sync/write_server.js

@@ -36,6 +36,7 @@ export const options = {
 	embedded: ${config.kit.embedded},
 	env_public_prefix: '${config.kit.env.publicPrefix}',
 	hooks: null, // added lazily, via \`get_hooks\`
+	mjs: ${config.kit.output.mjs},
 	root,
 	service_worker: ${has_service_worker},
 	templates: {

packages/kit/src/exports/vite/index.js

@@ -519,9 +519,14 @@ export function set_building() {
 								// we use .mjs for client-side modules, because this signals to Chrome (when it
 								// reads the <link rel="preload">) that it should parse the file as a module
 								// rather than as a script, preventing a double parse. Ideally we'd just use
-								// modulepreload, but Safari prevents that
-								entryFileNames: ssr ? '[name].js' : `${prefix}/[name].[hash].mjs`,
-								chunkFileNames: ssr ? 'chunks/[name].js' : `${prefix}/chunks/[name].[hash].mjs`,
+								// modulepreload, but Safari prevents that. We hide it behind an option because
+								// many CDN's don't have the proper MIME type for mjs files yet.
+								entryFileNames: ssr
+									? '[name].js'
+									: `${prefix}/[name].[hash]${kit.output.mjs ? '.mjs' : '.js'}`,
+								chunkFileNames: ssr
+									? 'chunks/[name].js'
+									: `${prefix}/chunks/[name].[hash]${kit.output.mjs ? '.mjs' : '.js'}`,
 								assetFileNames: `${prefix}/assets/[name].[hash][extname]`,
 								hoistTransitiveImports: false
 							},

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

@@ -276,9 +276,14 @@ export async function render_response({
 			// we use modulepreload with the Link header for Chrome, along with
 			// <link rel="preload"> for Safari. This results in the fastest loading in
 			// the most used browsers, with no double-loading. Note that we need to use
-			// .mjs extensions for `preload` to behave like `modulepreload` in Chrome
+			// .mjs extensions for `preload` to behave like `modulepreload` in Chrome.
+			// Because the .mjs MIME type is not correct on some CDNs, it's behind a flag.
 			link_header_preloads.add(`<${encodeURI(path)}>; rel="modulepreload"; nopush`);
-			head += `\n\t\t<link rel="preload" as="script" crossorigin="anonymous" href="${path}">`;
+			if (options.mjs) {
+				head += `\n\t\t<link rel="preload" as="script" crossorigin="anonymous" href="${path}">`;
+			} else if (state.prerendering) {
+				head += `\n\t\t<link rel="modulepreload" href="${path}">`;
+			}
 		}
 
 		const blocks = [];

packages/kit/test/apps/basics/svelte.config.js

@@ -1,6 +1,10 @@
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
 	kit: {
+		output: {
+			mjs: true
+		},
+
 		prerender: {
 			handleHttpError: 'warn'
 		},

packages/kit/test/apps/options/test/test.js

@@ -233,7 +233,7 @@ test.describe('trailingSlash', () => {
 		if (process.env.DEV) {
 			expect(requests.filter((req) => req.endsWith('.svelte')).length).toBe(1);
 		} else {
-			expect(requests.filter((req) => req.endsWith('.mjs')).length).toBeGreaterThan(0);
+			expect(requests.filter((req) => req.endsWith('.js')).length).toBeGreaterThan(0);
 		}
 
 		expect(requests.includes(`/path-base/preloading/preloaded/__data.json`)).toBe(true);
@@ -262,7 +262,7 @@ test.describe('trailingSlash', () => {
 		if (process.env.DEV) {
 			expect(requests.filter((req) => req.endsWith('.svelte')).length).toBe(1);
 		} else {
-			expect(requests.filter((req) => req.endsWith('.mjs')).length).toBeGreaterThan(0);
+			expect(requests.filter((req) => req.endsWith('.js')).length).toBeGreaterThan(0);
 		}
 
 		requests = [];

packages/kit/types/index.d.ts

@@ -422,6 +422,16 @@ export interface KitConfig {
 	 * @default ".svelte-kit"
 	 */
 	outDir?: string;
+	/**
+	 * Options related to the build output format
+	 */
+	output?: {
+		/**
+		 * Whether or not to use the `.mjs` extension for JavaScript files. This makes it possible to preload JavaScript files in Safari, too (else only works in Chromium-based browsers).
+		 * Check if your provider has the correct MIME type for `.mjs` files before turning this on.
+		 */
+		mjs?: boolean;
+	};
 	paths?: {
 		/**
 		 * An absolute path that your app's files are served from. This is useful if your files are served from a storage bucket of some kind.

packages/kit/types/internal.d.ts

@@ -337,6 +337,7 @@ export interface SSROptions {
 	embedded: boolean;
 	env_public_prefix: string;
 	hooks: ServerHooks;
+	mjs: boolean;
 	root: SSRComponent['default'];
 	service_worker: boolean;
 	templates: {