Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Hono not picking up MIME types correctly (I think) #3736

Open
hbjydev opened this issue Dec 9, 2024 · 5 comments
Open

Hono not picking up MIME types correctly (I think) #3736

hbjydev opened this issue Dec 9, 2024 · 5 comments
Labels

Comments

@hbjydev
Copy link

hbjydev commented Dec 9, 2024

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.

@hbjydev hbjydev added the triage label Dec 9, 2024
@sushichan044
Copy link
Contributor

sushichan044 commented Dec 9, 2024

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

@hbjydev
Copy link
Author

hbjydev commented Dec 9, 2024

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! :)

hbjydev added a commit to recipes-blue/recipes.blue that referenced this issue Dec 10, 2024
@yusukebe
Copy link
Member

@sushichan044 Thanks! Please do it.

@MGMehdi
Copy link

MGMehdi commented Dec 19, 2024

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
Copy link
Contributor

sushichan044 commented Dec 19, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

4 participants