When updating the app deployed on Vercel, the app building is successful but the web page is not displayed.

Error

An error occurred with this application.
This is an error with the application itself, not the platform.

502: BAD_GATEWAY
Code: `NO_STATUS_CODE_FROM_FUNCTION`

The logs are displayed in [Overview] tab > [View Logs] of each project.

Development Environment

• MacBook Air (13-inch, 2017)
• macOS High Sierra
• Node.js 13.7.0
• npm 6.13.7

Configuration

package.json

"engines": {
  "node": "12.16"
},
"scripts": {
  "build": "nuxt build",
  "start": "nuxt start",
  "now-build": "nuxt build"
}

It seems to specify the Node.js version in engines, but it is not necessary.

now.json

Configuration is different between version 1 and 2.

The package used changed from @nuxtjs/now-builder to @nuxtjs/vercel-builder.

{
  "version": 2,
  "builds": [
    {
      "src": "nuxt.config.js",
      "use": "@nuxtjs/vercel-builder",
    }
  ]
}

Deploy

There are 2 ways to deploy Vercel. One is to run the command and the other is to automatically deploy when the master branch of the GitHub repository is updated.

I tried both ways and the building was successful, but the web page wasn't displayed.

Error status

Error messages are displayed in Function tab > Realtime Logs (Errors) of the project when the web page isn't displayed because of 502 error.

In my case, it didn't seem to find the required packages, so I added the packages to dependencies and the app worked.

Conclusion

I think Vercel is very helpful because I can use the custom domain and HTTPS. I can also deploy easily. However, it may not be obvious at first glance to check the error logs.