Hono•2mo ago

swagger-ui and @hono/zod-openapi mismatch

Hello, I'm trying to make the swagger-ui middleware work with the @hono/zod-openapi package. It does work when I run my project but I get this deno-ts error in VS code and I wondered if it was possible to solve it?

app.use("/ui", swaggerUI({ url: "/api/docs" }));

app.use("/ui", swaggerUI({ url: "/api/docs" }));

No overload matches this call.
  The last overload gave the following error.
    Argument of type 'MiddlewareHandler<Env>' is not assignable to parameter of type 'MiddlewareHandler<Env, "/api/ui", {}>'.
      Types of parameters 'c' and 'c' are incompatible.
        Type 'Context<Env, "/api/ui", {}>' is missing the following properties from type 'Context<Env, string, {}>': #rawRequest, #req, #var, #status, and 9 more.

No overload matches this call.
  The last overload gave the following error.
    Argument of type 'MiddlewareHandler<Env>' is not assignable to parameter of type 'MiddlewareHandler<Env, "/api/ui", {}>'.
      Types of parameters 'c' and 'c' are incompatible.
        Type 'Context<Env, "/api/ui", {}>' is missing the following properties from type 'Context<Env, string, {}>': #rawRequest, #req, #var, #status, and 9 more.

Thanks for your help 🙏

24 Replies

Musanna Al Akil•2mo ago

try -> app.get("/ui", swaggerUI({ url: "/api/docs" }));

32clsOP•2mo ago

i tried it unfortunately didn't change anything 🙁

ambergristle•2mo ago

could be a hono version issue (e.g., if you're using @hono/zod-openapi but MiddlewareHandler<Env, "/api/ui", {}> seems funky. where's that path type coming from?

32clsOP•2mo ago

i'm using these dependencies:

import { swaggerUI } from "@hono/swagger-ui";
import { OpenAPIHono } from "@hono/zod-openapi";

import { swaggerUI } from "@hono/swagger-ui";
import { OpenAPIHono } from "@hono/zod-openapi";

and in my deno.json:

"imports": {
    "@hono/swagger-ui": "jsr:@hono/swagger-ui@^0.5.2",
    "@hono/zod-openapi": "npm:@hono/zod-openapi@^1.1.3",
    "hono": "jsr:@hono/hono@^4.9.10",
}

"imports": {
    "@hono/swagger-ui": "jsr:@hono/swagger-ui@^0.5.2",
    "@hono/zod-openapi": "npm:@hono/zod-openapi@^1.1.3",
    "hono": "jsr:@hono/hono@^4.9.10",
}

ambergristle•2mo ago

have you taken a look at this? https://github.com/honojs/middleware/tree/main/packages/zod-openapi#combining-with-hono

32clsOP•2mo ago

actually i don't have a reference in my code to hono package i could remove it i think yes indeed i'm not using it, i removed it, still the same error message it's not blocking but just I'd like to understand why I have this ts error

ambergristle•2mo ago

you removed the package? the issue is with this type Context<Env, "/api/ui", {}>, so the place to start would be wherever that comes from how is app defined?

32clsOP•2mo ago

yes

const app = new OpenAPIHono().basePath("/api");

const app = new OpenAPIHono().basePath("/api");

ambergristle•2mo ago

ambergristle•2mo ago

can you share your tsconfig? it could have something to do w JSR, tbh

32clsOP•2mo ago

i don't even have one lmao since i use deno i think it's not really needed

ambergristle•2mo ago

rip might be worth posting this thread in #deno

32clsOP•2mo ago

ok will do now, thanks ❤️ actually could these options in my deno.json explain the ts error i get? "compilerOptions": { "jsx": "precompile", "jsxImportSource": "hono/jsx" } i think these are set by default when creating an app with deno: deno init --npm hono@latest my-app

ambergristle•2mo ago

i don't think so. the issue you're facing has to do with how Context is typed. jsx settings shouldn't affect it at all those are just hono defaults it might be worth creating a minimal reproducible example + creating an issue on github, probably the middleware repo or, try posting in the deno server, if you haven't already

32clsOP•2mo ago

I will check tonight also if that’s not my typescript which could be broken even if I think Deno comes with its own bundled tsc You tested this on Node right?

ambergristle•2mo ago

bun, but yeah

32clsOP•2mo ago

Ok thanks

ambergristle•2mo ago

yeah, that's the thing. i have 0 experience with deno or jsr, but i know that folks have occasionally come in with type issues related to both unfortunately there aren't a lot of folks on the server who use those tools could be worth a try searching through the server history though. any previous solutions might be helpful

32clsOP•2mo ago

I’ll give it a try I have a few errors with typescript on drizzle too, unsure if it comes from Deno itself or my setup

ambergristle•2mo ago

i'm happy to take a look at those as well

32clsOP•2mo ago

I’ll share them tonight, thank you so much for the help ok by reading my code i realize i was a dummy i can fix my drizzle issues, but for the hono swagger-ui / zod-openapi compatibility idk

32clsOP•2mo ago

i opened that https://github.com/32cls/repr_hono

GitHub

GitHub - 32cls/repr_hono

Contribute to 32cls/repr_hono development by creating an account on GitHub.

ambergristle•2mo ago

so i'm thinking the issue relates to a mix of jsr + npm dependencies, but i don't really know. i can repro with deno though if you also use npm for @hono/swagger-ui the error goes away my deno.json

{
  "imports": {
    "@hono/swagger-ui": "npm:@hono/swagger-ui@^0.5.2",
    "@hono/zod-openapi": "npm:@hono/zod-openapi@^1.1.3",
    "hono": "jsr:@hono/hono@^4.9.10"
  },
  "tasks": {
    "start": "deno run --allow-net main.ts"
  },
  "compilerOptions": {
    "jsx": "precompile",
    "jsxImportSource": "hono/jsx"
  }
}

{
  "imports": {
    "@hono/swagger-ui": "npm:@hono/swagger-ui@^0.5.2",
    "@hono/zod-openapi": "npm:@hono/zod-openapi@^1.1.3",
    "hono": "jsr:@hono/hono@^4.9.10"
  },
  "tasks": {
    "start": "deno run --allow-net main.ts"
  },
  "compilerOptions": {
    "jsx": "precompile",
    "jsxImportSource": "hono/jsx"
  }
}

32clsOP•2mo ago

you're right thank you very much, it seems i also did not enable deno vscode extension so the error was still showing up but now it's fixed, thank you again 🙂

Gaming

Programming

swagger-ui and @hono/zod-openapi mismatch

Did you find this page helpful?