0

I get the following Error when I try to use TRPC in my React Project. Otherwise everything works perfectly. In particular, the Api server in which the error allegedly occurs works without errors. So it should actually be a problem in Typescript. I use typescript v4.9.5 in both front and backend. If anyone could help me or have an idea that would be cool. Thank you in advance.

The Error Message:

ERROR in ../api-server/src/config.ts:58:7
TS2349: This expression is not callable.
  Type '{ default: <T extends CorsRequest = CorsRequest>(options?: CorsOptions | CorsOptionsDelegate<T> | undefined) => (req: T, res: { ...; }, next: (err?: any) => any) => void; }' has no call signatures.
    56 |
    57 | export const CORS = CONFIG.cors_origin
  > 58 |     ? cors({
       |       ^^^^
    59 |           origin: CONFIG.cors_origin,
    60 |           methods: "GET,POST,PATCH,DELETE",
    61 |           allowedHeaders: ["content-type", "authorization", "accept"],

The file where the Error is:

import * as fs from "fs"
import cors from "cors"

const env = process.env;

export const CONFIG: {
    port: number;
    cors_origin: string;
    jwt_public_key: string;
    database: {
        host: string;
        port?: number;
        username: string;
        password_file: string;
        database: string;
    };
    files: {
        base: string;
        permission_templates: string;
        public_archive_key: string;
    } & (
        | { protocol: "file" }
        | ({
              protocol: "sftp";
              host: string;
              port?: number;
              username: string;
              force_ipv?: 4 | 6;
          } & ({} | { hostkey: string } | { hostkeys: string[] }) &
              (
                  | { auth_type: "none" }
                  | { auth_type: "password"; password_file: string }
                  | {
                        auth_type: "publickey";
                        key_file: string;
                        key_passphrase?: string;
                    }
              ))
    );
    minio: {
        host: string;
        port: number;
        username: string;
        password_file: string;
    };
    nodemailer: {
        host: string;
        port: number;
        secure: true;
        auth: {
            user: string;
            pass: string;
        };
    };
} = JSON.parse(fs.readFileSync(env.CONFIG_FILE || "config.json", "utf8"));

export const CORS = CONFIG.cors_origin
    ? cors({
          origin: CONFIG.cors_origin,
          methods: "GET,POST,PATCH,DELETE",
          allowedHeaders: ["content-type", "authorization", "accept"],
          exposedHeaders: ["www-authenticate"],
          optionsSuccessStatus: 200,
          maxAge: 60 * 60,
          preflightContinue: false,
      })
    : null;

The File with the usage of trpc:

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { httpBatchLink } from "@trpc/client";
import { createTRPCReact } from "@trpc/react-query";
import { useState } from "react";
import type { AppRouter } from "../../../api-server/src/api/V2/index";
import { useApi } from "../api";

const trpc = createTRPCReact<AppRouter>();

const ApiV2Provider = (props: {children: React.ReactNode}) => {
    const api = useApi()
    const [queryClient] = useState(() => new QueryClient());
    const [trpcClient] = useState(() =>
        trpc.createClient({
            links: [
                httpBatchLink({
                    url: (new URL("V2",api.apiBase)).href,
                })
            ]
        }))
    return (
        <trpc.Provider client={trpcClient} queryClient={queryClient}>
            <QueryClientProvider client={queryClient}>
                {props.children}
            </QueryClientProvider>
        </trpc.Provider>
    )
}

export default ApiV2Provider;
lhilgert
  • 101
  • 1
  • 1
  • 3

0 Answers0