argcast Posts - Answer Overflow

argcast

•Created by argcast on 5/15/2024 in #questions

'use client' with tRPC? Type error: This expression is not callable

From boiler npx create-t3-app@latest using the app router: On simple tRPC file src/server/api/routers/test.ts:

export const dataRouter = createTRPCRouter({
  getCountryList: publicProcedure.query(() => {
    return ["Example1", "Example2"];
  }),

export const dataRouter = createTRPCRouter({
  getCountryList: publicProcedure.query(() => {
    return ["Example1", "Example2"];
  }),

On src/server/api/root.ts :

export const appRouter = createTRPCRouter({
  post: postRouter,
  test: dataRouter
});

export const appRouter = createTRPCRouter({
  post: postRouter,
  test: dataRouter
});

And when calling it from src/app/page.tsx I have no issues at all. But when I do call it from a component in _components folder that has a 'use client' directive it gives me this error. I don't understand since it is the same code replication already available on the boilerplate on the _components/create-post.tsx . So basically:

// src/app/page.tsx
const countries = api.test.getCountryList(); // this works

// src/app/page.tsx
const countries = api.test.getCountryList(); // this works

// src/app/_components/sample-component.tsx
'use client';
const countries = api.test.getCountryList(); // Error

// src/app/_components/sample-component.tsx
'use client';
const countries = api.test.getCountryList(); // Error

Error:

Type error: This expression is not callable.
  Type 'DecoratedQuery<{ input: void; output: string[]; transformer: true; errorShape: { data: { zodError: typeToFlattenedError<any, string> | null; code: "PARSE_ERROR" | "BAD_REQUEST" | ... 13 more ... | "CLIENT_CLOSED_REQUEST"; httpStatus: number; path?: string | undefined; stack?: string | undefined; }; message: string; ...' has no call signatures.

Type error: This expression is not callable.
  Type 'DecoratedQuery<{ input: void; output: string[]; transformer: true; errorShape: { data: { zodError: typeToFlattenedError<any, string> | null; code: "PARSE_ERROR" | "BAD_REQUEST" | ... 13 more ... | "CLIENT_CLOSED_REQUEST"; httpStatus: number; path?: string | undefined; stack?: string | undefined; }; message: string; ...' has no call signatures.

15 replies

TTCTheo's Typesafe Cult

•Created by argcast on 5/10/2024 in #questions

Next.js Script tag breaking my app

Working on a simple app to implement Office add-in via next-js. The thing is when I try to route between pages using the <Link> tag from Next.js, if there is a <Script> present it just breaks my app. Script tag is placed on app/layout.tsx:

import "~/styles/globals.css";

import { Inter } from "next/font/google";

import { TRPCReactProvider } from "~/trpc/react";
import Script from "next/script";

const inter = Inter({
  subsets: ["latin"],
  variable: "--font-sans",
});

export const metadata = {
  title: "Create T3 App",
  description: "Generated by create-t3-app",
  icons: [{ rel: "icon", url: "/favicon.ico" }],
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={`font-sans ${inter.variable}`}>
        <TRPCReactProvider>{children}</TRPCReactProvider>
        <Script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></Script>
      </body>
    </html>
  );
}

import "~/styles/globals.css";

import { Inter } from "next/font/google";

import { TRPCReactProvider } from "~/trpc/react";
import Script from "next/script";

const inter = Inter({
  subsets: ["latin"],
  variable: "--font-sans",
});

export const metadata = {
  title: "Create T3 App",
  description: "Generated by create-t3-app",
  icons: [{ rel: "icon", url: "/favicon.ico" }],
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={`font-sans ${inter.variable}`}>
        <TRPCReactProvider>{children}</TRPCReactProvider>
        <Script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></Script>
      </body>
    </html>
  );
}

And the simple app/page.tsx:

import Link from 'next/link'

export default function Page() {
  return (
    <div>
      <h1>Hello!</h1>
      <Link href="/archive">Go to archive</Link>

    </div>
  )
}

import Link from 'next/link'

export default function Page() {
  return (
    <div>
      <h1>Hello!</h1>
      <Link href="/archive">Go to archive</Link>

    </div>
  )
}

The error:

Application error: a client-side exception has occurred (see the browser console for more information).

Application error: a client-side exception has occurred (see the browser console for more information).

Console:

Warning: useInsertionEffect must not schedule updates.
    at HistoryUpdater

Uncaught TypeError: window.history.pushState is not a function

The above error occurred in the <HistoryUpdater> component:

Warning: useInsertionEffect must not schedule updates.
    at HistoryUpdater

Uncaught TypeError: window.history.pushState is not a function

The above error occurred in the <HistoryUpdater> component:

Any indea on what might be happening?

2 replies

Gaming

Programming