Lois Posts - Answer Overflow

•Created by Lois on 10/24/2023 in #questions

nextjs app router, "fs", "os", "zlib-sync" and trpc experimental edge Router

Environement: Turborepo + pnpm What's wrong: when I tried to build nextjs, the error is like this warp block https://app.warp.dev/block/h9b0V2covbaCMv8boeSpvc What I have: a package with discord.js and includes "fs" module, and imported via trpc/[trpc/route.ts in nextjs. I tried some fixes to configure webpack in next.config liks so, but it didn't work:

const config = {
    webpack: (config, {isServer}) => {
        if (!isServer) {
            config.resolve = {
                ...config.resolve,
                fallback: {
                    "zlib-sync": false,
                    "os": false,
                    "net": false,
                    "dns": false,
                    "tls": false,
                    "fs": false,
                    "request": false,
                },
            };
        }
        return config;
    },
    reactStrictMode: true,

const config = {
    webpack: (config, {isServer}) => {
        if (!isServer) {
            config.resolve = {
                ...config.resolve,
                fallback: {
                    "zlib-sync": false,
                    "os": false,
                    "net": false,
                    "dns": false,
                    "tls": false,
                    "fs": false,
                    "request": false,
                },
            };
        }
        return config;
    },
    reactStrictMode: true,

I have also disabled edge runtime in trpc edge router, relevant code be:

"use client";

import type { edgeRouter } from "@comcord/api";
// import { loggerLink } from "@trpc/client";
import { experimental_createTRPCNextAppDirClient } from "@trpc/next/app-dir/client";
import { experimental_nextHttpLink } from "@trpc/next/app-dir/links/nextHttp";
import superjson from "superjson";

import { getEdgeUrl } from "./shared";

export const edgeApiForClient = experimental_createTRPCNextAppDirClient<
  typeof edgeRouter
>({
  config() {
    return {
      transformer: superjson,
      links: [
        // loggerLink({
        //   enabled: (op) => true,
        // }),
        experimental_nextHttpLink({
          batch: true,
          url: getEdgeUrl() + "/api/trpc",
          headers() {
            return {
              "x-trpc-source": "client",
            };
          },
        }),
      ],
    };
  },
});

"use client";

import type { edgeRouter } from "@comcord/api";
// import { loggerLink } from "@trpc/client";
import { experimental_createTRPCNextAppDirClient } from "@trpc/next/app-dir/client";
import { experimental_nextHttpLink } from "@trpc/next/app-dir/links/nextHttp";
import superjson from "superjson";

import { getEdgeUrl } from "./shared";

export const edgeApiForClient = experimental_createTRPCNextAppDirClient<
  typeof edgeRouter
>({
  config() {
    return {
      transformer: superjson,
      links: [
        // loggerLink({
        //   enabled: (op) => true,
        // }),
        experimental_nextHttpLink({
          batch: true,
          url: getEdgeUrl() + "/api/trpc",
          headers() {
            return {
              "x-trpc-source": "client",
            };
          },
        }),
      ],
    };
  },
});

and

import type { NextRequest } from "next/server";
import { edgeCreateContext, edgeRouter } from "@packages/api";
import { fetchRequestHandler } from "@trpc/server/adapters/fetch";

//export const runtime = "edge";

const handler = (req: NextRequest) =>
  fetchRequestHandler({
    endpoint: "/api/trpc",
    router: edgeRouter,
    req: req,
    createContext: () => edgeCreateContext({ req }),
    onError: ({ error, path }) => {
      console.log("Error in tRPC handler (edge) on path", path);
      console.error(error);
    },
  });

export { handler as GET, handler as POST };

import type { NextRequest } from "next/server";
import { edgeCreateContext, edgeRouter } from "@packages/api";
import { fetchRequestHandler } from "@trpc/server/adapters/fetch";

//export const runtime = "edge";

const handler = (req: NextRequest) =>
  fetchRequestHandler({
    endpoint: "/api/trpc",
    router: edgeRouter,
    req: req,
    createContext: () => edgeCreateContext({ req }),
    onError: ({ error, path }) => {
      console.log("Error in tRPC handler (edge) on path", path);
      console.error(error);
    },
  });

export { handler as GET, handler as POST };

Not sure if more information is needed for help?

2 replies

•Created by Lois on 10/24/2023 in #❓-help

nextjs app router, "fs", "os", "zlib-sync" and trpc experimental edge Router

const config = {
    webpack: (config, {isServer}) => {
        if (!isServer) {
            config.resolve = {
                ...config.resolve,
                fallback: {
                    "zlib-sync": false,
                    "os": false,
                    "net": false,
                    "dns": false,
                    "tls": false,
                    "fs": false,
                    "request": false,
                },
            };
        }
        return config;
    },
    reactStrictMode: true,

const config = {
    webpack: (config, {isServer}) => {
        if (!isServer) {
            config.resolve = {
                ...config.resolve,
                fallback: {
                    "zlib-sync": false,
                    "os": false,
                    "net": false,
                    "dns": false,
                    "tls": false,
                    "fs": false,
                    "request": false,
                },
            };
        }
        return config;
    },
    reactStrictMode: true,

I have also disabled edge runtime in trpc edge router, relevant code be:

"use client";

import type { edgeRouter } from "@comcord/api";
// import { loggerLink } from "@trpc/client";
import { experimental_createTRPCNextAppDirClient } from "@trpc/next/app-dir/client";
import { experimental_nextHttpLink } from "@trpc/next/app-dir/links/nextHttp";
import superjson from "superjson";

import { getEdgeUrl } from "./shared";

export const edgeApiForClient = experimental_createTRPCNextAppDirClient<
  typeof edgeRouter
>({
  config() {
    return {
      transformer: superjson,
      links: [
        // loggerLink({
        //   enabled: (op) => true,
        // }),
        experimental_nextHttpLink({
          batch: true,
          url: getEdgeUrl() + "/api/trpc",
          headers() {
            return {
              "x-trpc-source": "client",
            };
          },
        }),
      ],
    };
  },
});

"use client";

import type { edgeRouter } from "@comcord/api";
// import { loggerLink } from "@trpc/client";
import { experimental_createTRPCNextAppDirClient } from "@trpc/next/app-dir/client";
import { experimental_nextHttpLink } from "@trpc/next/app-dir/links/nextHttp";
import superjson from "superjson";

import { getEdgeUrl } from "./shared";

export const edgeApiForClient = experimental_createTRPCNextAppDirClient<
  typeof edgeRouter
>({
  config() {
    return {
      transformer: superjson,
      links: [
        // loggerLink({
        //   enabled: (op) => true,
        // }),
        experimental_nextHttpLink({
          batch: true,
          url: getEdgeUrl() + "/api/trpc",
          headers() {
            return {
              "x-trpc-source": "client",
            };
          },
        }),
      ],
    };
  },
});

and

import type { NextRequest } from "next/server";
import { edgeCreateContext, edgeRouter } from "@packages/api";
import { fetchRequestHandler } from "@trpc/server/adapters/fetch";

//export const runtime = "edge";

const handler = (req: NextRequest) =>
  fetchRequestHandler({
    endpoint: "/api/trpc",
    router: edgeRouter,
    req: req,
    createContext: () => edgeCreateContext({ req }),
    onError: ({ error, path }) => {
      console.log("Error in tRPC handler (edge) on path", path);
      console.error(error);
    },
  });

export { handler as GET, handler as POST };

import type { NextRequest } from "next/server";
import { edgeCreateContext, edgeRouter } from "@packages/api";
import { fetchRequestHandler } from "@trpc/server/adapters/fetch";

//export const runtime = "edge";

const handler = (req: NextRequest) =>
  fetchRequestHandler({
    endpoint: "/api/trpc",
    router: edgeRouter,
    req: req,
    createContext: () => edgeCreateContext({ req }),
    onError: ({ error, path }) => {
      console.log("Error in tRPC handler (edge) on path", path);
      console.error(error);
    },
  });

export { handler as GET, handler as POST };

Not sure if more information is needed for help?

2 replies

•Created by Lois on 7/24/2023 in #👋-help

TurboRepo: Prisma-Kysely Generator

Weirdest thing: It worked before, and all of a sudden it doesn't. I switched to using prisma-client-js and switch it back to prisma-kysely, then it didn't work. Error log:

@thing/db:db:generate: [Error: ENOENT: no such file or directory, open '/Users/me/WorkDir/RepoName/thing/db/types.ts'] {
@thing/db:db:generate:   errno: -2,
@thing/db:db:generate:   code: 'ENOENT',
@thing/db:db:generate:   syscall: 'open',
@thing/db:db:generate:   path: '/Users/me/WorkDir/RepoName/packages/db/types.ts'
@thing/db:db:generate: }
@thing/db:db:generate:  ELIFECYCLE  Command failed with exit code 1.
@thing/db:db:generate: ERROR: command finished with error: command (/Users/me/WorkDir/RepoName/packages/db) pnpm run db:generate exited (1)

@thing/db:db:generate: [Error: ENOENT: no such file or directory, open '/Users/me/WorkDir/RepoName/thing/db/types.ts'] {
@thing/db:db:generate:   errno: -2,
@thing/db:db:generate:   code: 'ENOENT',
@thing/db:db:generate:   syscall: 'open',
@thing/db:db:generate:   path: '/Users/me/WorkDir/RepoName/packages/db/types.ts'
@thing/db:db:generate: }
@thing/db:db:generate:  ELIFECYCLE  Command failed with exit code 1.
@thing/db:db:generate: ERROR: command finished with error: command (/Users/me/WorkDir/RepoName/packages/db) pnpm run db:generate exited (1)

inputs in Turbo.json

"pipeline": {
    "db:generate": {
      "inputs": [
        "prisma/schema.prisma"
      ],
      "cache": false
    },

"pipeline": {
    "db:generate": {
      "inputs": [
        "prisma/schema.prisma"
      ],
      "cache": false
    },

tsconfig:

{
  "compilerOptions": {
    "target": "es2017",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "checkJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "noUncheckedIndexedAccess": true
  },
  "include": [".eslintrc.js", ".prettierrc.js"]
}

{
  "compilerOptions": {
    "target": "es2017",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "checkJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "noUncheckedIndexedAccess": true
  },
  "include": [".eslintrc.js", ".prettierrc.js"]
}

generator set up in schema.prisma

generator kysely {
    provider     = "prisma-kysely"
    output       = ".."
    enumFileName = "enums.ts"
}

generator kysely {
    provider     = "prisma-kysely"
    output       = ".."
    enumFileName = "enums.ts"
}

package.json db:generate command set up:

 "db:generate": "pnpm with-env prisma generate && tsx prisma/postgenerate.ts",

 "db:generate": "pnpm with-env prisma generate && tsx prisma/postgenerate.ts",

practically similar set up with https://acme-corp.jumr.dev/, I throw my schema in there and it successfully generated, but in my set up after I switched to using prisma-client-js and switch it back to prisma-kysely it didn't work. Even after using pnpm clean, deleted node-modules, and pnpm i again...is there some weird cache exists I don't know even if I specify cache:false Did some search around didn't find anyone has similar issue, anyone know what could be the cause? prisma is hoisted here in a turborepo.

4 replies

•Created by Lois on 7/10/2023 in #👋-help

crashing event

5 replies

•Created by Lois on 7/10/2023 in #👋-help

show user name instead of id

2 replies

•Created by Lois on 7/10/2023 in #👋-help

`look inside` combine image

1 replies

•Created by Lois on 7/10/2023 in #👋-help

Error: fetching reddit api

Happened in #👥-random-memes

7 replies

•Created by Lois on 3/20/2023 in #questions

I am trying to understand the necessity of Kafka

15 replies

•Created by Lois on 3/6/2023 in #❓-help

Data Visualisation/Charts

is anyone using tRPC on data visualisation (say bar chart/line chart) in a scenario close to a banking app or Yahoo finance? would love to see some examples

2 replies

•Created by Lois on 2/24/2023 in #👋-help

How to configure loading cell in project waitless (Testing AnswerOverflow)

Hey I just order your loading cell kit, and downloaded your mobile app but having difficulty configure it. Can anyone help?

3 replies

•Created by Lois on 1/23/2023 in #questions

Computer Vision Camera recommendation

Hey amazing team Theo, I am looking for OpenCV camera replacement for OAK-1/OAK-D, does anyone have similar experience? Is it recommended to replace it with cheaper options? What could be the drawback?

1 replies

•Created by Lois on 1/12/2023 in #❓-help

Hardware IoT API

Maybe it's a wrong place to ask but out of curious: Does anyone have experience building API for hardware/IoT device to control and monitor them from frontend? How's the process? How long did it take? How's the investment come back?

4 replies

•Created by Lois on 1/12/2023 in #questions

Hardware or IoT API

Maybe it's the wrong place to ask but out of curious: Does anyone have experience building API for hardware/IoT device? How's the process? How long did it take? How's the investment come back?

14 replies

•Created by Lois on 1/9/2023 in #❓-help

A lot of WHY

9 replies

•Created by Lois on 12/30/2022 in #questions

tutorial hell unhandle runtime error

Can anyone help with this? not sure if it is Prisma model problem or how I require prisma went wrong. here is my error message

Unhandled Runtime Error
TRPCClientError: 
Invalid `prisma.like.create()` invocation:


Unique constraint failed on the fields: (`tweetId`,`userId`)

Unhandled Runtime Error
TRPCClientError: 
Invalid `prisma.like.create()` invocation:


Unique constraint failed on the fields: (`tweetId`,`userId`)

and my prisma model is

model Like {
  id            String    @id @default(cuid())
  tweet          Tweet      @relation(fields: [tweetId], references: [id])
  tweetId        String
  user          User      @relation(fields: [userId], references: [id])
  userId        String
  createdAt     DateTime @default(now())
  updatedAt     DateTime @updatedAt
  @@unique    ([tweetId, userId])
}

model Like {
  id            String    @id @default(cuid())
  tweet          Tweet      @relation(fields: [tweetId], references: [id])
  tweetId        String
  user          User      @relation(fields: [userId], references: [id])
  userId        String
  createdAt     DateTime @default(now())
  updatedAt     DateTime @updatedAt
  @@unique    ([tweetId, userId])
}

and my router code within server/router/tweets/ts looks like

import { z } from "zod";
import { protectedProcedure, publicProcedure, router } from "../trpc";
import { tweetSchema } from "../../../components/CreateTweet";

export const tweetRouter = router({
...
like: protectedProcedure
    .input(
      z.object({
        tweetId: z.string(),
      })
    )
    .mutation(async ({ ctx, input }) => {
      const { prisma } = ctx;

      const userId = ctx.session.user.id;

      return prisma.like.create({
        data: {
          tweet: {
            connect: {
              id: input.tweetId,
            },
          },
          user: {
            connect: {
              id: userId,
            },
          },
        },
      });
    }),

import { z } from "zod";
import { protectedProcedure, publicProcedure, router } from "../trpc";
import { tweetSchema } from "../../../components/CreateTweet";

export const tweetRouter = router({
...
like: protectedProcedure
    .input(
      z.object({
        tweetId: z.string(),
      })
    )
    .mutation(async ({ ctx, input }) => {
      const { prisma } = ctx;

      const userId = ctx.session.user.id;

      return prisma.like.create({
        data: {
          tweet: {
            connect: {
              id: input.tweetId,
            },
          },
          user: {
            connect: {
              id: userId,
            },
          },
        },
      });
    }),

while on the front end it looks like

function Tweet({
  tweet,
}: {
  tweet: RouterOutputs["tweet"]["timeline"]["tweets"][number];
}) {
  const likeMutation = trpc.tweet.like.useMutation().mutateAsync;
....
return(
 <div className="flex-grid ml-2 flex  gap-3">
        <AiFillHeart
          color="grey"
          size="1rem"
          className="mt-0.5"
          onClick={() => {
            likeMutation({ tweetId: tweet.id });
          }}
        />
</div>
)

function Tweet({
  tweet,
}: {
  tweet: RouterOutputs["tweet"]["timeline"]["tweets"][number];
}) {
  const likeMutation = trpc.tweet.like.useMutation().mutateAsync;
....
return(
 <div className="flex-grid ml-2 flex  gap-3">
        <AiFillHeart
          color="grey"
          size="1rem"
          className="mt-0.5"
          onClick={() => {
            likeMutation({ tweetId: tweet.id });
          }}
        />
</div>
)

not sure what went wrong

51 replies