Hono•4mo ago

Type 'Hono<App {...}>' does not satisfy the constraint 'Hono<any, any, any> Property '#private' in t

Hi, I'm trying to use hono RPC client on my frontend project. But the type not working properly. I'm using "hono": "^4.3.7", on server and client. // On /web-api/src/routes/index.ts [Server]

import { App } from "@/@types/app";
import { Hono } from "hono";
import UserRoutes from "@/routes/users";

const app = new Hono<App>().route("/users", UserRoutes);

export type AppType = typeof app;
export default app;

import { App } from "@/@types/app";
import { Hono } from "hono";
import UserRoutes from "@/routes/users";

const app = new Hono<App>().route("/users", UserRoutes);

export type AppType = typeof app;
export default app;

// On /web-api/src/routes/users/index.ts [Server]

import { App } from "@/@types/app";
import { Hono } from "hono";

const app = new Hono<App>()
    .get("/", async (c) => {
        return c.json({});
    })
    .get("/test", async (c) => {
        return c.json({});
    });

export default app;

import { App } from "@/@types/app";
import { Hono } from "hono";

const app = new Hono<App>()
    .get("/", async (c) => {
        return c.json({});
    })
    .get("/test", async (c) => {
        return c.json({});
    });

export default app;

// On /web-api/tsconfig.json [Server]

{
    "compilerOptions": {
        "composite": true,
        "target": "ESNext",
        "module": "ESNext",
        "moduleResolution": "Bundler",
        "strict": true,
        "skipLibCheck": true,
        "lib": ["ESNext"],
        "types": ["@cloudflare/workers-types"],
        "jsx": "react-jsx",
        "jsxImportSource": "hono/jsx",
        "paths": {
            "@/*": ["./src/*"]
        }
    }
}

{
    "compilerOptions": {
        "composite": true,
        "target": "ESNext",
        "module": "ESNext",
        "moduleResolution": "Bundler",
        "strict": true,
        "skipLibCheck": true,
        "lib": ["ESNext"],
        "types": ["@cloudflare/workers-types"],
        "jsx": "react-jsx",
        "jsxImportSource": "hono/jsx",
        "paths": {
            "@/*": ["./src/*"]
        }
    }
}

// On /web-ui/tsconfig.json [Client]

{
    "compilerOptions": {
        "target": "ES2020",
        "useDefineForClassFields": true,
        "lib": ["ES2020", "DOM", "DOM.Iterable"],
        "module": "ESNext",
        "skipLibCheck": true,

        /* Bundler mode */
        "moduleResolution": "bundler",
        "allowImportingTsExtensions": true,
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,
        "jsx": "react-jsx",

        /* Other */
        "baseUrl": ".",
        "paths": {
            "@/*": ["./src/*"],
            "@api/*": ["../web-api/src/*"]
        }
    },
    "include": ["src"],
    "references": [{ "path": "./tsconfig.node.json" }, { "path": "../web-api" }]
}

{
    "compilerOptions": {
        "target": "ES2020",
        "useDefineForClassFields": true,
        "lib": ["ES2020", "DOM", "DOM.Iterable"],
        "module": "ESNext",
        "skipLibCheck": true,

        /* Bundler mode */
        "moduleResolution": "bundler",
        "allowImportingTsExtensions": true,
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,
        "jsx": "react-jsx",

        /* Other */
        "baseUrl": ".",
        "paths": {
            "@/*": ["./src/*"],
            "@api/*": ["../web-api/src/*"]
        }
    },
    "include": ["src"],
    "references": [{ "path": "./tsconfig.node.json" }, { "path": "../web-api" }]
}

2 Replies

Sakib•4mo ago

// On /web-ui/src/lib/hc.ts

import { AppType } from "@api/routes";
import { hc } from "hono/client";

const client = hc<AppType>("http://localhost:8787/");

import { AppType } from "@api/routes";
import { hc } from "hono/client";

const client = hc<AppType>("http://localhost:8787/");

AppType showing type error Type: Hono<App, { "/users": { $get: { input: {}; output: {}; outputFormat: "json"; status: 100 | 101 | 102 | 103 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 226 | 300 | 301 | 302 | 303 | 304 | ... 44 more ... | -1; }; }; "/users/test": { ...; }; }, "/">' does not satisfy the constraint Hono. 'Hono<any, any, any>'
Property '#private' in type 'Hono' refers to a different member that cannot be accessed from within type 'Hono'.ts(2344)

Nico•4mo ago

You have an error and your Hono entry point. The routes need to be set as the types not the app

import { App } from "@/@types/app";
import { Hono } from "hono";
import UserRoutes from "@/routes/users";

const app = new Hono<App>()

const routes = app.route("/users", UserRoutes);

export type AppType = typeof routes;
export default app;

import { App } from "@/@types/app";
import { Hono } from "hono";
import UserRoutes from "@/routes/users";

const app = new Hono<App>()

const routes = app.route("/users", UserRoutes);

export type AppType = typeof routes;
export default app;

Gaming

Programming

Type 'Hono<App {...}>' does not satisfy the constraint 'Hono<any, any, any> Property '#private' in t