Typescript errors when trying to accept Context type in 3rd party package

[travierm]

Hi all,

Really enjoying working with Hono but running into a typescript issue. I'm adding some helper functions to an NPM package and whenever I try passing the context I get typescript errors.

Is there a proper way to accept a context in a 3rd party library?

I'll start with the typescript errors:

Argument of type 'Context<{ Variables: RequestVariables; }, "/public/*", {}>' is not assignable to parameter of type 'Context<any, any, {}>'.
  Property '#private' in type 'Context' refers to a different member that cannot be accessed from within type 'Context'.

function in package:

import { Context } from "hono";

export function canHandleContext(c: Context) {
  console.log(c.req.header("content-type"));
}

The error happens over (c) when I'm using the function in my app:

app.use("/public/*", (c, next) => {
  canHandleContext(c);

  c.res.headers.set("Cache-Control", "public, max-age=31536000");
  return next();
});

Thanks!

[travierm]

Created an example project to show the typescript error: https://github.com/travierm/enzo-ts-error-example

[yusukebe]

@travierm

Probably because the Hono that enzo-core refers to is different from the Hono that the application refers to. I suggest you remove hono from the dependencies of enzo-core.

[travierm]

I'll give it a try @yusukebe thanks!

[travierm]

@yusukebe this is what I came up with.

import { Context } from "hono";
import { CookieOptions } from "hono/utils/cookie";
import { StatusCode } from "hono/utils/http-status";

interface MinimalContext {
  redirect: (location: string, status?: StatusCode) => Response;
  cookie: (name: string, value: string, opt?: CookieOptions) => void;
  notFound: () => Response | Promise<Response>;
  header: (
    name: string,
    value: string | undefined,
    options?: {
      append?: boolean;
    }
  ) => void;
}

export function canHandleContextTwo(c: MinimalContext) {
  const context = c as Context;

  console.log(context.req.header("content-type"));
}

Its not perfect but it prevents users from passing something that is drastically different then the actual Hono context.

[yusukebe]

@travierm

Hmm. I don't think it's a good solution. As I wrote before, it would be better to remove hono from enzo-core dependencies and let users refer to the same hono.

[travierm]

@yusukebe if I were to remove hono from my package. How can I ensure users are passing a valid hono context to the function in my package?

My objective here is to pull some functions out of my hono application and put them in a helper package on NPM. I want to use these functions in different hono applications I create.

a function like below works great within a hono application but when placed in a package I get typescript errors related to context. This is why I think the interface is my best option at the moment.

import type { Context } from "hono";

export function canHandleContext(c: Context) {
  console.log(c.req.header("content-type"));
}

Really appreciate your time! Sorry for any confusion.

[yusukebe]

I am sorry if I am wrong too.

What you are trying to do is the same as HonoX or 3rd party Middleware. So please refer to that.

https://github.com/honojs/middleware/tree/main/packages/zod-validator

That is, put hono in your package's devDependencies and do not include hono in your package's dependencies. Users will install hono with your package when they use it.

npm i enzo-core hono

This way, user applications can refer to the same hono and there will be no type errors.

[travierm]

@yusukebe moving hono to devDependencies solved my issue 😄

I am new to package dev and didn't realize the importance of putting hono in devDependencies vs dependencies

Thanks for the help!

[yusukebe]

Greeeeat!

[arrudaricardo]

I encountered an issue when importing a Hono app from a different workspace project. The error was as follows:

import { Hono } from "hono";
import { localApp } from "@local/libs/src/router";

const app = new Hono();

// Error: Property '#private' in type 'Hono' refers to a different member that cannot be accessed from within type 'Hono'.ts(2345)
app.route("/", localApp);

The problem was resolved by adding hono to the devDependencies in the project’s package.json file.