Website not being rendered after adding Express Middleware to NextJS typrescript

Question

The Pages aren't being rendered. I am using NextJS with Typescript for my project. The project works fine until I added ExpressJS typescript as the middleware. React Devtools doesn't register it as React. While using inspect element it seems the content of the page is there, however the css is missing. If I run

yarn next dev

It works as normal but the server file won't work.

Folder Structure

|_.next
|_node_modules
|_components
|           |_FirstComponent
|                          |_index.tsx
|                          |_FirstComponent.module.css
|_pages
|      |_ _app.tsx
|      |_ index.tsx
|      |_ _error.tsx
|
|_styles
|      |_ global.css
|
|_server
|      |_ index.ts
|
|_package.json
|_tsconfig.json
|_tsconfig.server.json

Package.json

{
  "name": "project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "ts-node --project tsconfig.server.json server/index.ts",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "express": "^4.17.1",
    "next": "10.1.2",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "@types/express": "^4.17.11",
    "@types/node": "^14.14.37",
    "@types/react": "^17.0.3",
    "ts-node": "^9.1.1",
    "typescript": "^4.2.3"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "allowSyntheticDefaultImports": true,
    "jsx": "preserve",
    "baseUrl": ".",
    "paths": {
      "@/components/*": ["components/*"],
      "@/layouts/*": ["layouts/*"],
      "@/models/*": ["store/models/*"],
      "@/store/*": ["store/*"],
      "@/styles/*": ["styles/*"]
    }
  },

  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

tsconfig.server.json

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

server/index.ts

import express, { Response, Request } from "express";
import next from "next";

const dev = process.env.NODE_ENV !== "production";
const app = next({ dev });

const handle = app.getRequestHandler();
const port = process.env.PORT || 3000;

(async () => {
  try {
    await app.prepare();
    const server = express();

    server.get("*", (req: Request, res: Response) => {
      return handle(req, res);
    });

    server.listen(port, (err?: any) => {
      if (err) throw err;
      console.log(`> Ready on localhost:${port} - env ${process.env.NODE_ENV}`);
    });
  } catch (e) {
    console.error(e);
    process.exit(1);
  }
})();

Answer 1

So I figured out what the problem was. In your tsconfig.json under compiler options target should be set to es6. this will fix the issue of the website not rendering.

"compilerOptions": {
    "target": "es6",
}