Pages show 500 error on Vercel, on Netlify they work

[PH4NTOMiki]

Run next info (available from version 12.0.8 and up)

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT Sun Sep 19 21:31:53 UTC 2021
Binaries:
  Node: 17.2.0
  npm: 8.1.4
  Yarn: N/A
  pnpm: 6.24.2
Relevant packages:
  next: 12.0.8
  react: 17.0.2
  react-dom: 17.0.2

What version of Next.js are you using?

12.0.8

What version of Node.js are you using?

17.2.0

What browser are you using?

Edge

What operating system are you using?

Linux Manjaro

How are you deploying your application?

Vercel

Describe the Bug

The repo when deployed to Vercel does 500 errors,
the same repo when deployed to the Netlify works without any issue.

But when I add outputFileTracing: false to next.config.js it works

And i think this is related to #30484 although in that issue is says it's been solved in the version 12.0.8 but I'm using it and it looks like it's not

Expected Behavior

Working pages on Vercel, like they work on Netlify

To Reproduce

https://github.com/PH4NTOMiki/nextjs-test-app-vercel-bug

[ijjk]

Hi, can you provide additional information on where you are seeing the 500 error? Visiting the latest deployment on the shared repo seems to be working correctly as seen in the below screenshots. Are you seeing any errors in your logs on the deployment when you get the 500 error?

screenshots

[PH4NTOMiki]

@balazsorban44 Hi there, yes, the deployment is using the main branch that has outputFileTracing: false added to the config, and that's why it works,
I separated the repo now:
https://github.com/PH4NTOMiki/nextjs-test-app-vercel-bug

and created new deployment on the Vercel and look at this:
https://nextjs-test-app-vercel-bug.vercel.app/

it doesn't work

[balazsorban44]

Your reproduction throws the following error in dev mode:

Could you please create a reliable reproduction so we can investigate this further? 🙏

Such an error throws 500 even when using next build && next start locally.

[PH4NTOMiki]

I fixed that now, so sorry about that. I tested it on local and it works now, and Vercel link doesn't work, and this is the same deployment on the Netlify https://awesome-goldstine-3aa7ed.netlify.app/ and it works

[balazsorban44]

Still getting errors locally:

This is most likely due to my missing MONGODB_URI env variable. I recommend checking your deployment that you haven't missed that in the Vercel dashboard.

Make sure you gracefully handle all possible fetch errors in your code.

Otherwise, your reproduction still needs some tweaking. Unless I can verify it working correctly locally, I cannot decide if the error is actually with Vercel.

[PH4NTOMiki]

It's added, and I just sent it(that env variable) to you over your email info@balazsorban.com

[balazsorban44]

I found the issue. You tried to import types in .js files in multiple places.

Here is an example: https://github.com/PH4NTOMiki/nextjs-test-app-vercel-bug/blob/bfd44e7cc4e28dadcd9ea80c88cb38c9acb976f2/pages/index.js#L7

You have two options here:

1. convert the files to TypeScript (preferably still the type import modifier to indicate to yourself that you are only importing a type). Next.js supports TypeScript
2. Use the JSDoc equivalent import. For the given example above, you could do * @param {import("next").NextPageContext} ctx instead. (You have done so in lib/_fetch.js which is the correct way.)

[PH4NTOMiki]

I get that in the Vercel console, so you are sure that that is it?
That's great then, but why does it work on local(npm run start) and Netlify?

[PH4NTOMiki]

@balazsorban44 I try to fix it by doing the replacements you told me, and it works now, actually I think I've figured the reason it works for me locally and on Netlify, it's because I use 17.2.0 and Netlify uses 16.x versions of Node, and Vercel uses 14.x and that's probably the reason why Vercel is unable to compile it.

Anyway thanks for helping me out

[balazsorban44]

I don't think it's Node.js related. They probably do their own tracing.

We ignore tracing next itself since you shouldn't import it in the first place:

next.js/packages/next/build/webpack/plugins/next-trace-entrypoints-plugin.ts

Lines 20 to 23 in 1d4f364

	const TRACE_IGNORES = [
	'**/*/next/dist/server/next.js',
	'**/*/next/dist/bin/next',
	]

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.