Hono not picking up MIME types correctly (I think)

[hbjydev]

What version of Hono are you using?

4.6.12

What runtime/platform is your app running on? (with version if possible)

Node 22 LTS

What steps can reproduce the bug?

• Set up static serving for an SPA (rerouting all requests to index.html)
• Hit the endpoint and see that the page returns with a Content-Type of text/plain; charset=utf-8, not text/html.

import { Hono } from 'hono';
import { serveStatic } from "@hono/node-server/serve-static";

const app = new Hono();

app.use('/*', serveStatic({ root: './path/to/public', rewriteRequestPath: () => 'index.html' }));

serve({ fetch: app.fetch });

What is the expected behavior?

When I try to make a request to the server on any path (per my example code), I should get the content returned as text/html, not text/plain.

What do you see instead?

The content comes through as text/plain, which prevents it from rendering in the browser correctly.

Additional information

The code I'm running is being executed in a nodejs:22-slim Docker image on Fly.io.

• Source code for my specific app is here: https://github.com/recipes-blue/recipes.blue
• Tracking issue in my repo: [Bug] Hono doesn't serve HTML correctly recipes-blue/recipes.blue#1
• Live version for you to see the problem in action: https://cookware.fly.dev

[sushichan044]

Hi, I'm currently working on this issue.
I could reproduce the wrong mime-type behavior.
I will continue to investigate the cause.

[hbjydev]

Hi, I'm currently working on this issue. I could reproduce the wrong mime-type behavior. I will continue to investigate the cause.

Awesome, thanks! :)

[yusukebe]

@sushichan044 Thanks! Please do it.

[MGMehdi]

Hello,
any workaround while waiting for a fix ? I have to deploy the app 😅

For now I've done that but if you reload the page on a different route it doesn't work

import { serveStatic } from "hono/serve-static";

app.use(
  "*",
  serveStatic({
    root: "./dist",
    getContent: async (path, c) => {
      try {
        const data = await fs.readFile(path);
        let contentType = "text/plain";

        if (path.endsWith(".html")) {
          contentType = "text/html";
        } else if (path.endsWith(".js")) {
          contentType = "application/javascript";
        } else if (path.endsWith(".css")) {
          contentType = "text/css";
        } else if (path.endsWith(".json")) {
          contentType = "application/json";
        } else if (path.endsWith(".png")) {
          contentType = "image/png";
        } else if (path.endsWith(".jpg") || path.endsWith(".jpeg")) {
          contentType = "image/jpeg";
        }

        return new Response(data, {
          headers: {
            "Content-Type": contentType,
          },
        });
      } catch (error) {
        return null;
      }
    },
  })
);

[sushichan044]

This happens with different combinations of middleware that modify the c.header,
and the investigation takes a long time. Please give me some more time.