500 Internal Server Error

Bug report

Describe the bug

I’m building up a next.js app with Now and getting a 500 Internal Server Error. even though the project is building up with no problems, locally and on Now as well.

To Reproduce

I’m not sure how to reproduce the issue, the solution described on https://github.com/zeit/next.js/issues/6174 does not fix the problem.

Expected behavior

Informative logs since right now it’s not showing any error or the issue fixed in case this is a bug.

System information

• OS: macOS
• Browser: Chrome
• Version of Next.js: 9.2.1

next.config.js

const withPlugins = require('next-compose-plugins');
const withTM = require('next-transpile-modules')(['@edooking/ui']);
const withOptimizedImages = require('next-optimized-images');
const withFonts = require('next-fonts');

const nextJsConfig = {
  target: 'serverless',
};

module.exports = withPlugins(
  [withTM, withOptimizedImages, withFonts],
  nextJsConfig,
);

Thanks!

[sw-yx]

@timneutkens it took me 3hrs but i figured it out in the end. it was caused by using https://github.com/developit/nextjs-preact-demo/ together with tailwindcss - the optimization.splitchunks thing blows up when used together with tailwind/postcss.

i wouldn’t classify my problem as serious, but i would classify the non-debuggability of the 500 error as serious. as far as i knew i was serving a static page. so how could there be a 500 error - and regardless of the origin of the error - how can Zeit help me figure out what is wrong? there were no server logs to help.

i’ll drop an email

[sw-yx]

content of my email for future people running into this

---

The Problem

I was getting 500 Internal Server Error from my previously working nextjs project. That was all I had to go with. There were no tools for debuggability from Zeit - no server logs (no errors in build), nothing to help the develope debug WHY there was a 500 error. So it caused a lot of frustration and I think Zeit can do better to surface the error to help the developer.

The Cause

It took me 3 hrs to figure out that the problem was caused by me messing with webpack in the next.config.js.

I was taking Jason Miller’s Nextjs + Preact demo https://github.com/developit/nextjs-preact-demo. I then added Tailwindcss. this was fine.

The site actually broke when I added Jason’s webpack optimizations: https://github.com/developit/nextjs-preact-demo/blob/595247b10e6345caa23c2666836c588f05cec131/next.config.js#L8

Because it worked fine in dev and built fine in CI with no errors, i didnt notice anything wrong until i went and visited the site and saw the unhelpful 500 error.

once I commented it out (https://github.com/sw-yx/smaller-safer-serverless-starter/commit/44690d96b546fc6a1cb99cb28963f36a83bbd662) it worked. therefore it must be the cause.

However I’m not writing to ask you to fix my crappy copy and paste code which i take responsibility for. I am writing because i think the 500 internal server error causes an unhelpful dead end for users and it may be worth exploring surfacing what the error is.

thanks and i enjoy zeit/nextjs so far.