Theo's Typesafe Cult•15mo ago

T3 Stack + custom Next.js server not working

Hi, I'm using t3 stack and trying to leverage Next.js custom server. But, unfortunately when I'm trying to run it using ts-node I'm constantly getting an error connected to module resolution (I guess it's because my next.config.mjs has .mjs extension):

[1] Error [ERR_REQUIRE_ESM]: require() of ES Module next.config.mjs not supported.
[1] Instead change the require of next.config.mjs to a dynamic import() which is available in all CommonJS modules.

[1] Error [ERR_REQUIRE_ESM]: require() of ES Module next.config.mjs not supported.
[1] Instead change the require of next.config.mjs to a dynamic import() which is available in all CommonJS modules.

What should I do to fix this? Here's the full code: https://github.com/Bartek532/rssmarkable/pull/40 Thanks in advance for all suggestions! 🙂

GitHub

real time logs by Bartek532 · Pull Request #40 · Bartek532/rssmarka...

21 Replies

zagrodzki•15mo ago

Any thoughts on this one?

moloch•15mo ago

Struggling with this one too, I can either get next build to run or my custom server, but never both. Would love to see an example project where prod actually works with a custom server.

jamesmoran•15mo ago

I got this working. I’m not at my computer right now, but happy to share the steps I took when I’m back

moloch•15mo ago

Would love to see! I also now have a working example but I'm unsure If my setup is ideal

Endgame1013•15mo ago

@james and @moloch would love to see both of your working examples. I bet several others in the community would as well!

moloch•15mo ago

Will polish it up tomorrow and share the repo here (as long as I remember)

jamesmoran•15mo ago

These are the steps I took: 1. Install dependencies:

npm install -D nodemon ts-node

npm install -D nodemon ts-node

2. Update package.json scripts:

"dev": "NODE_ENV=development nodemon",
"build": "next build && tsc --project tsconfig.server.json",
"start": "NODE_ENV=production node dist/server.js",

"dev": "NODE_ENV=development nodemon",
"build": "next build && tsc --project tsconfig.server.json",
"start": "NODE_ENV=production node dist/server.js",

3. Add nodemon.json file:

{
  "watch": ["server.ts"],
  "exec": "ts-node --project tsconfig.server.json server.ts",
  "ext": "js ts"
}

{
  "watch": ["server.ts"],
  "exec": "ts-node --project tsconfig.server.json server.ts",
  "ext": "js ts"
}

4. Update tsconfig.json "checkJs": true to "checkJs": false 5. Add tsconfig.server.json file:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "module": "commonjs",
    "outDir": "dist",
    "lib": ["es2019"],
    "target": "es2019",
    "isolatedModules": false,
    "noEmit": false
  },
  "include": ["server.ts"]
}

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "module": "commonjs",
    "outDir": "dist",
    "lib": ["es2019"],
    "target": "es2019",
    "isolatedModules": false,
    "noEmit": false
  },
  "include": ["server.ts"]
}

6. Add the server.ts file:

import { createServer } from "http";
import next from "next";
import { parse } from "url";

const port = parseInt(process.env.PORT || "3000", 10);
const dev = process.env.NODE_ENV !== "production";
const app = next({ dev });
const handle = app.getRequestHandler();

app
  .prepare()
  .then(() => {
    createServer((req, res) => {
      const parsedUrl = parse(req.url!, true);
      void handle(req, res, parsedUrl);
    }).listen(port);

    console.log(
      `> Server listening at http://localhost:${port} as ${
        dev ? "development" : process.env.NODE_ENV
      }`
    );
  })
  .catch((err) => {
    console.error(err);
    process.exit(1);
  });

import { createServer } from "http";
import next from "next";
import { parse } from "url";

const port = parseInt(process.env.PORT || "3000", 10);
const dev = process.env.NODE_ENV !== "production";
const app = next({ dev });
const handle = app.getRequestHandler();

app
  .prepare()
  .then(() => {
    createServer((req, res) => {
      const parsedUrl = parse(req.url!, true);
      void handle(req, res, parsedUrl);
    }).listen(port);

    console.log(
      `> Server listening at http://localhost:${port} as ${
        dev ? "development" : process.env.NODE_ENV
      }`
    );
  })
  .catch((err) => {
    console.error(err);
    process.exit(1);
  });

Sources: - https://nextjs.org/docs/advanced-features/custom-server - https://github.com/vercel/next.js/tree/canary/examples/custom-server

Advanced Features: Custom Server | Next.js

Start a Next.js app programmatically using a custom server.

GitHub

next.js/examples/custom-server at canary · vercel/next.js

The React Framework. Contribute to vercel/next.js development by creating an account on GitHub.

jamesmoran•15mo ago

After trying to add some functionality to my custom server, I realised: - Paths I had set up in my tsconfig.json were not recognised - The .mjs file extension is not supported The paths fix was easy. All I did was: 1. Install the following dependency:

npm install -D tsconfig-paths

npm install -D tsconfig-paths

2. Add the following to my tsconfig.server.json file:

  "ts-node": {
    "require": ["tsconfig-paths/register"]
  },

  "ts-node": {
    "require": ["tsconfig-paths/register"]
  },

Now, for the .mjs file, I really wanted to keep the .mjs file extension, but I just couldn't figure out a way to get it working. In the end, I reluctantly converted
src/env.mjs → src/env.js. If anyone figures out how to get it working, I would love to hear it!

Endgame1013•15mo ago

Seems like the .mjs file is really throwing everyone off with the custom server. Since you had to re-write is as a .js file, did you have to use require() in the env.js file?

jamesmoran•15mo ago

I did not, but I just saw that the build failed. Looks like I have a bit more tinkering to do to get this working…

moloch•15mo ago

Here is my current repo, I thought I had everything figure it out but it appears that none of my tRPC routes are working in production: https://github.com/stuible/t3-2-poc

GitHub

GitHub - stuible/t3-2-poc: Proof of concept T3 App

Proof of concept T3 App. Contribute to stuible/t3-2-poc development by creating an account on GitHub.

moloch•15mo ago

Keep in mind I require a custom server but I need websocket support

jamesmoran•14mo ago

I see, so you have moved the env import outside of you next config. That would fix the problem I am running into right now!

moloch•14mo ago

Ya that appeared to be the only way to get it to compile, but I believe it also stops .env validation from happening during development

rootlib•14mo ago

Hey, curious if y'all got this to work?

asmodig•14mo ago

I'm also looking for a solution to this problem.

Endgame1013•14mo ago

As far as I know, this is still an ongoing problem. It seems the consensus is the custom server will work, but only without the environment variable validation.

asmodig•14mo ago

So only solution is to host the wss server as an separate application? How do I remove the environment variable validation?

Endgame1013•14mo ago

I would have to defer to either @moloch or @james .

jamesmoran•14mo ago

@asmodig remove the env import from the next config file

moloch•14mo ago

@asmodig I had to remove the env import just as james describes

Gaming

Programming

T3 Stack + custom Next.js server not working