Theo's Typesafe Cult•2y 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

Bart ⚡OP•2y ago

Any thoughts on this one?

moloch•2y 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•2y 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•2y ago

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

Endgame1013•2y ago

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

moloch•2y ago

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

jamesmoran•2y 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•2y 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•2y 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•2y 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•2y 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•2y ago

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

jamesmoran•2y 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•2y 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•2y ago

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

asmodig•2y ago

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

Endgame1013•2y 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•2y ago

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

Endgame1013•2y ago

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

jamesmoran•2y ago

@asmodig remove the env import from the next config file

moloch•2y ago

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

Gaming

Programming

T3 Stack + custom Next.js server not working