Theo's Typesafe Cult•2y ago

tRPC and WebSockets

Error [ERR_REQUIRE_ESM]: require() of ES Module /home/xxxxx/Projects/xxxxxxx/xxxxxxx/src/env/server.mjs not supported.

Instead change the require of /home/xxxxx/Projects/xxxxxxx/xxxxxxx/src/env/server.mjs to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/home/xxxxx/Projects/xxxxxxx/xxxxxxx/src/server/db/client.ts:6:22)

Error [ERR_REQUIRE_ESM]: require() of ES Module /home/xxxxx/Projects/xxxxxxx/xxxxxxx/src/env/server.mjs not supported.

Instead change the require of /home/xxxxx/Projects/xxxxxxx/xxxxxxx/src/env/server.mjs to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/home/xxxxx/Projects/xxxxxxx/xxxxxxx/src/server/db/client.ts:6:22)

how can I dynamically import env from /env/server/mjs ?

ts-node-dev --project tsconfig.server.json --respawn --transpile-only --ignore-watch node_modules --no-notify --exit-child src/server/wsServer.ts

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "module": "commonjs",
    "outDir": "dist",
    "target": "ES2019",
    "lib": ["ES2019", "DOM"],
    "isolatedModules": false,
    "noEmit": false
  },
  "include": ["next-env.d.ts", "src/**/*.ts", "src/**/*.tsx"]
}

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "module": "commonjs",
    "outDir": "dist",
    "target": "ES2019",
    "lib": ["ES2019", "DOM"],
    "isolatedModules": false,
    "noEmit": false
  },
  "include": ["next-env.d.ts", "src/**/*.ts", "src/**/*.tsx"]
}

import { env } from "../../env/server.mjs";

import { env } from "../../env/server.mjs";

19 Replies

HAL 9000•2y ago

I am trying to compile wsServer.ts @wsServer.ts

import ws from "ws";
import { applyWSSHandler } from '@trpc/server/adapters/ws';
import { appRouter } from "./router";
import { createContext } from "./router/context";

const wss = new ws.Server({ port: 3001 });

const handler = applyWSSHandler({
    wss,
    createContext,
    router: appRouter,
});

wss.on('connection', (socket) => {
    console.log(`++ ws connection ${wss.clients.size}`);

    wss.on('close', () => {
        console.log(`-- ws connection ${wss.clients.size}`);
    });
});


console.log('Listening on ws://localhost:3001');

process.on('SIGTERM', () => {
    console.log('SIGTERM received, closing server');

    handler.broadcastReconnectNotification();

    wss.close((error) => {
        if (error) {
            console.error(error);
            process.exit(1);
        }

        process.exit(0);
    });
});

import ws from "ws";
import { applyWSSHandler } from '@trpc/server/adapters/ws';
import { appRouter } from "./router";
import { createContext } from "./router/context";

const wss = new ws.Server({ port: 3001 });

const handler = applyWSSHandler({
    wss,
    createContext,
    router: appRouter,
});

wss.on('connection', (socket) => {
    console.log(`++ ws connection ${wss.clients.size}`);

    wss.on('close', () => {
        console.log(`-- ws connection ${wss.clients.size}`);
    });
});


console.log('Listening on ws://localhost:3001');

process.on('SIGTERM', () => {
    console.log('SIGTERM received, closing server');

    handler.broadcastReconnectNotification();

    wss.close((error) => {
        if (error) {
            console.error(error);
            process.exit(1);
        }

        process.exit(0);
    });
});

Hey @SeanCassiere any idea about this?

Sean Cassiere•2y ago

I don't think you can dynamically import your env vars. Question, is this a standard Node tRPC server? or one using NextJS?

Because you can't run Websocket servers on NextJS due it being serverless/lambdas

HAL 9000•2y ago

i believe it doesn't use next js

Sean Cassiere•2y ago

Ok, then that shouldn't be an issue then.

FYI, an easy way if checking yours is a Next project, is too if there is a next.config.js in your project root.

Other than that there's no reason it shouldn't work. Although I don't see your import statement in the code either. What's the actual issue here, maybe I'm just a bit confused 🤔

HAL 9000•2y ago

it is using createContext

HAL 9000•2y ago

https://www.youtube.com/watch?v=dXRRY37MPuk&ab_channel=TomDoesTech

TomDoesTech

YouTube

Build a Live Chat Application with the T3 Stack - TypeScript, Tailw...

Repository: https://github.com/TomDoesTech/t3-chat In this view, we build a live chat application with the T3 stack, tRPC, Tailwind & TypeScript. 🌎 Follow me here: Discord: https://discord.gg/4ae2Esm6P7 Twitter: https://twitter.com/tomdoes_tech Facebook: https://www.facebook.com/tomdoestech Instagram: https://www.instagram.com/tomdoestech Ti...

HAL 9000•2y ago

i am trying to follow this video

Sean Cassiere•2y ago

Normally it shouldn't affect it, that seems odd 🤔 Not sure what you are doing in the createContext, but that seems like a weird af bug.