Next.js App runs on 1 VM but not on the other VM?

[copper pollen]

I recently upgraded my application to Next.js 14, pushed all my code to my private Github and things went smoothly on my staging server. However, when I shifted it to my production server I have started to get a blank page upon launching my application with a bunch of 400 Errors.

This is what I see in my network tab, see the image I have attached:

I'm not sure what is going wrong. I tried to output some logs into my layout.tsx (in root /src/app/layout.tsx) and I do get console.log's back but I still cannot seem to render the application. What could be the problem?

I launched up a fresh Next.js 14 application and it works fine, I've tried my existing application within my staging server (a fresh clone from Git) and I have no issues. I just seem to be facing it within my current server.

[sterile mauve]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[copper pollen]

I've tried to check my server console + browser console. It doesn't output any errors. I've also checked to see that my node/npm versions match.

[copper pollen]

Seems like the problem is src/middleware.ts if I remove the file it works.. very weird. It works fine in my staging server. Isn't that where its supposed to be in?

[clear delta]

How are you building & deploying it? Is it on vercel or are you deploying it manually?

[copper pollen]

Manually @clear delta

[copper pollen]

import { NextResponse } from 'next/server'
import type { NextFetchEvent, NextRequest } from 'next/server'
 
export function middleware(req: NextRequest, event: NextFetchEvent) {
  // Do stuff
 
  return NextResponse.next()
}```
I put this file under `/src/middleware.ts` and the whole app breaks with the errors I stated above

Yeah seems to not trigger my middleware anywhere else, only under /src/middleware.ts

And when it does, it just breaks, thats my middleware above

This is my next.config.js:

/** @type {import('next').NextConfig} */

const nextConfig = {
  reactStrictMode: false,
  env: {
    // Define your global constants here
    NEXT_PUBLIC_API_ENDPOINT: process.env.NEXT_PUBLIC_API_ENDPOINT,
    NEXT_PUBLIC_WEBSOCKET: process.env.NEXT_PUBLIC_WEBSOCKET,
    NEXT_PUBLIC_DOMAIN: process.env.NEXT_PUBLIC_DOMAIN,
  },
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    config.externals.push({
      'utf-8-validate': 'commonjs utf-8-validate',
      'bufferutil': 'commonjs bufferutil'
    })
    return config
  }
};

module.exports = nextConfig

And my tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    // "typeRoots":["./node_modules/@types", "./src/types"],
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

[copper pollen]

Tried a fresh install on my VM with Next.js 14 + a basic middleware like above

Still getting the same issue of Error 400

[copper pollen]

Bump