Lois•15mo ago

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?

A block has been shared!

pnpm turbo build --filter=nextjs ### WARNING Issues occurred when constructing package graph. Turbo...

0 Replies

No replies yetBe the first to reply to this messageJoin