No "query"-procedure on path "trpc/hello" #166

import { initTRPC } from '@trpc/server';
import superjson from 'superjson';
import { ZodError } from 'zod';

const t = initTRPC.create({
  transformer: superjson,
  errorFormatter({ shape, error }) {
    return {
      ...shape,
      data: {
        ...shape.data,
        zodError:
          error.cause instanceof ZodError ? error.cause.flatten() : null,
      },
    };
  },
});

export const publicProcedure = t.procedure;

export const TRPCRouter = t.router;

import { z } from 'zod';
import { publicProcedure, TRPCRouter } from './init';

export const appRouter = TRPCRouter({
  hello: publicProcedure.input(z.string().nullish()).query(({ input }) => {
    return `Hello ${input ?? 'World'}!`;
  }),

  got: publicProcedure.query(() => {
    return `Hello 'World'!`;
  }),

  nest: TRPCRouter({
    hello: publicProcedure.input(z.string()).query(({ input }) => {
      return `Hello ${input}!`;
    }),
  }),
});

export type AppRouter = typeof appRouter;

import { Hono } from 'hono';
import { trpcServer } from '@hono/trpc-server';
import { serve } from '@hono/node-server';
import { renderTrpcPanel } from 'trpc-panel';
import { compress } from 'hono/compress';
import { cors } from 'hono/cors';
import { logger } from 'hono/logger';
import { appRouter } from './trpc';
import { env } from './env';

const app = new Hono();

app.use('*', cors());
app.use('*', compress());
app.use('*', logger());

console.log('Starting server...');

console.log({
  env,
});

app.get('/panel', (c) => {
  return c.html(
    renderTrpcPanel(appRouter, {
      url: 'http://localhost:9879/back/trpc',
      transformer: 'superjson',
    })
  );
});

app.use(
  '/back/trpc/*',
  trpcServer({
    router: appRouter,
  })
);

serve({
  fetch: app.fetch,
  port: 9879,
});