`vite preview` does not set correct mime types for some static files (e.g. xml)

[jasongitmail]

Describe the bug

When a prerendered route's static file is served via vite preview, the content type is text/html and not what is expected, in at least a few scenarios:

• sitemap.xml should be application/xml
• manifest.webmanifest should be application/manifest+json
• atom.xml and arguably feed.xml should be application/atom+xml
• rss.xml should be application/rss+xml

Possibly others, but those are the only I'm aware of.

Given this is for the preview server, imo it'd be fine to simplify to:

• *.xml -> application/xml
• *.webmanifest -> application/manifest+json

Reproduction

1. npm i super-sitemap
2. Create this route:

// /src/routes/sitemap.xml/+server.ts
import * as sitemap from 'super-sitemap';
import type { RequestHandler } from '@sveltejs/kit';

export const prerender = true;

export const GET: RequestHandler = async () => {
  return await sitemap.response({
    origin: 'https://example.com'
  });
};

3. npm run build && npm run preview

Visit http://localhost:4173/sitemap.xml, open web inspector and observe content type is text/html, not application/xml as expected.

Or

// /src/routes/sitemap.xml/+server.js

export const prerender = true;

export async function GET() {
	return new Response(
		`
		<?xml version="1.0" encoding="UTF-8" ?>
		<urlset
			xmlns="https://www.sitemaps.org/schemas/sitemap/0.9"
			xmlns:xhtml="https://www.w3.org/1999/xhtml"
			xmlns:mobile="https://www.google.com/schemas/sitemap-mobile/1.0"
			xmlns:news="https://www.google.com/schemas/sitemap-news/0.9"
			xmlns:image="https://www.google.com/schemas/sitemap-image/1.1"
			xmlns:video="https://www.google.com/schemas/sitemap-video/1.1"
		>
			<url>
                            <loc>https://example.com/</loc>
                         </url>
		</urlset>`.trim(),
		{
			headers: {
				'Content-Type': 'application/xml'
			}
		}
	);
}

Logs

No response

System Info

npmPackages:
    @sveltejs/adapter-cloudflare: ^2.3.3 => 2.3.3 
    @sveltejs/kit: ^1.25.1 => 1.25.1 
    svelte: ^4.2.1 => 4.2.1 
    vite: ^4.4.9 => 4.4.10

Severity

annoyance

Additional Information

No response

[jasongitmail]

Helpful comment from @s3812497

do you mind opening a separate issue regarding vite preview and the incorrect mime types? I have a feeling that is something we could fix. The code for how requests are handled during vite preview is located here https://github.com/sveltejs/kit/blob/master/packages/kit/src/exports/vite/preview/index.js . Perhaps we can add some extra logic to ensure it handles these mime types correctly? (or maybe it's an issue we should fix in vite?)

[benmccann]

Prerendered files are served in preview mode via sirv, which uses mrmime, which is generated from mime-db. xml and webmanifest are in the database, so I'd expect them to be served appropriately: https://github.com/jshttp/mime-db/blob/a76e5a824c228e2e58363c9404e42a54ee1d142f/db.json#L6500. I guess there must be a bug somewhere if that's not happening.

It looks like you may need to use the .rss and .atom extensions for those file types

[benmccann]

Oh, actually, it turns out we don't use sirv for prerendered pages, but only for static assets and we always set the response header to text/html:

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

Line 144 in 715dfdd

'content-type': 'text/html',

Until #9408 is implemented, it's quite difficult to know what the appropriate header to use would be. But looking it up based on file extension and falling back to text/html is probably a good enough heuristic to address a lot of use cases and it matches what would already be happening in production

I also notice that we use the mime dependency in SvelteKit, but it'd probably be better to switch to mrmime since sirv is already pulling that in and it would reduce the number of dependencies being used.

[Rishab49]

tried it with mrmime package and it is working fine

...
if (prerendered) {
        const mimetype = lookup(pathname);
	res.writeHead(200, {
	  'content-type': mimetype ?? 'text/html',
	   etag
	});

	fs.createReadStream(filename).pipe(res);
} 
...

It looks like you may need to use the .rss and .atom extensions for those file types

though as @benmccann mentioned we have to use

• .rss -> application/rss+xml
• .atom -> application/atom+xml

there must be some other edge cases

also we are using mime package only for one line so its easily replaceable

kit/packages/kit/src/core/sync/create_manifest_data/index.js

Line 51 in 715dfdd

type: mime.getType(file)

[jasongitmail]

To note: I've confirmed that Cloudflare Pages serves pre-rendered *.atom extension routes with application/atom+xml as hoped. So this would work on the preview server and production on CF's edge.