Theo's Typesafe Cult•2y ago

tRPC Websockets | package subpath not defined by exports

So basically I am playing around with tRPC Websockets/Subscriptions. I am primarily using this repo as a reference -> https://github.com/trpc/examples-next-prisma-websockets-starter I've created a server.ts which has the following contents ->

import { applyWSSHandler } from "@trpc/server/dist/adapters/ws.js";
import next from "next";
import { createContext } from "./context";
import { parse } from "url";
import http from "http";

import ws from "ws";
import { env } from "../../env/server.mjs";
import { appRouter } from "./router/_app.js";

const port = "3001";
const dev = env.NODE_ENV;
const app = next({});
const handle = app.getRequestHandler();

app.prepare().then(() => {
  const server = http.createServer((req, res) => {
    const proto = req.headers["x-forwarded-proto"];
    if (proto && proto === "http") {
      // redirect to ssl
      res.writeHead(303, {
        location: `https://` + req.headers.host + (req.headers.url ?? ""),
      });
      res.end();
      return;
    }
    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
    const parsedUrl = parse(req.url!, true);
    handle(req, res, parsedUrl);
  });
  const wss = new ws.Server({ server });
  const handler = applyWSSHandler({ wss, router: appRouter, createContext });

  process.on("SIGTERM", () => {
    console.log("SIGTERM");
    handler.broadcastReconnectNotification();
  });
  server.listen(port);

  // tslint:disable-next-line:no-console
  console.log(
    `> Server listening at http://localhost:${port} as ${
      dev ? "development" : process.env.NODE_ENV
    }`
  );
});

import { applyWSSHandler } from "@trpc/server/dist/adapters/ws.js";
import next from "next";
import { createContext } from "./context";
import { parse } from "url";
import http from "http";

import ws from "ws";
import { env } from "../../env/server.mjs";
import { appRouter } from "./router/_app.js";

const port = "3001";
const dev = env.NODE_ENV;
const app = next({});
const handle = app.getRequestHandler();

app.prepare().then(() => {
  const server = http.createServer((req, res) => {
    const proto = req.headers["x-forwarded-proto"];
    if (proto && proto === "http") {
      // redirect to ssl
      res.writeHead(303, {
        location: `https://` + req.headers.host + (req.headers.url ?? ""),
      });
      res.end();
      return;
    }
    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
    const parsedUrl = parse(req.url!, true);
    handle(req, res, parsedUrl);
  });
  const wss = new ws.Server({ server });
  const handler = applyWSSHandler({ wss, router: appRouter, createContext });

  process.on("SIGTERM", () => {
    console.log("SIGTERM");
    handler.broadcastReconnectNotification();
  });
  server.listen(port);

  // tslint:disable-next-line:no-console
  console.log(
    `> Server listening at http://localhost:${port} as ${
      dev ? "development" : process.env.NODE_ENV
    }`
  );
});

I'm also using the dev version (wssDevServer) for my localhost, which runs without any issues. When I attempt to run this on my custom VPS (centos + nginx), with

cross-env NODE_ENV=production node dist/server/trpc/server.js

cross-env NODE_ENV=production node dist/server/trpc/server.js

I get the error shown in the screenshot. Been googling for the past 1 hour, but nothing which really helps me to understand how to approach this issue?

1 Reply

reallistOP•2y ago

Okay, so after many hours of debugging and tests, this appears to be some extremely weird issue which isn't caused by tRPC itself, but rather by tRPC websockets/subscriptions working in combination with the setup of the T3 stack. ( or im just dumb ? not impossible 😄 ) The first error which I showed in the screenshot was actually caused due to the fact that after building, the server.js file in the dist directory was trying to import adapters/ws from "dist/adapters/ws". Went in the node_modules/@trpc/server/package.json and after examining it it doesn't indeed export any subpath "dist/adapters/ws". After rebuilding this with

npm run build + npx tsc --project tsconfig.server.json

npm run build + npx tsc --project tsconfig.server.json

and checking the files, it actually started pointing to the correct subpath and the first error got resolved. This caused another error to start popping up, and that was caused by the env handler created by the T3 package, it was expecting to run with ECMAScript and the files were .mjs files, while the https://github.com/trpc/examples-next-prisma-websockets-starter/blob/main/tsconfig.server.json was actually compiling the project as cjs. After some tweaks to the build files, namely, changing them from mjs to js and fixing the imports/requires inside, I actually managed to run the whole thing. ofc, that wasn't a permanent solution as no sane person would manually go to edit the build files after every build, so I just ended up removing the env handler thingy because I was too lazy to rework it and it ain't really that much useful for the scope of my project PS > I am using an old version of t3, i.e 6.11.4 so this may perhaps not be an issue which can be reproduced on v7 >

Gaming

Programming

tRPC Websockets | package subpath not defined by exports