🐛 BUG: 404 does not work with Vercel

[jablonski]

What version of astro are you using?

1.0.0-rc.6

Are you using an SSR adapter? If so, which one?

Vercel

What package manager are you using?

npm

What operating system are you using?

Linux

Describe the Bug

Adding a 404.astro to src/pages works fine in Netlify, but in Vercel the 404 is not displayad. It displays the start page with a 200 status code.

Link to Minimal Reproducible Example

Problem is only visible in Vercel

Participation

• [ ] I am willing to submit a pull request for this issue.

[intagaming]

Actually deeply willing to watch this being resolved, because since I switch from Next.js to Astro, by old blog links is not being shown the 404 page, resulting in Google believing that the URL is still up and not removing them from search results (or at least in the Google Search Console thingy).

[matthewp]

Are you using Vercel Serverless, Edge, or Static? For serverless it should be getting the 404.astro page already: https://github.com/withastro/astro/blob/main/packages/integrations/vercel/src/serverless/entrypoint.ts#L25

[intagaming]

Are you using Vercel Serverless, Edge, or Static? For serverless it should be getting the 404.astro page already: https://github.com/withastro/astro/blob/main/packages/integrations/vercel/src/serverless/entrypoint.ts#L25

I know the OP might just have different setup than me, but I'm also having the same issue and had sent support ticket to Vercel, to which they're "elevating to the team", so here you go.

My Astro website's source code is publicly available at https://github.com/intagaming/hxann.com. Here's a random url which doesn't exist, you might try anything after the slash: https://hxann.com/asdCompletelyRandom123aazz. It's completely static, or shall you say Vercel Static.

[matthewp]

@intagaming i cloned your repo and it is producing a 404.html which according to here: https://vercel.com/guides/custom-404-page#static-site-generator-(ssg) that should work.

[intagaming]

@intagaming i cloned your repo and it is producing a 404.html which according to here: https://vercel.com/guides/custom-404-page#static-site-generator-(ssg) that should work.

Yes, it is, but only locally for me. Have you tried deploying to Vercel? I don't know what it is but you can see the Vercel deployment for yourself in each commit, and it's just not working. I can provide the build inspection should you desire.

[matthewp]

If you have a link you can send me I can take a quick look.

[intagaming]

I included the Build log and the Output thing to the comments of this commit, don't know if it helps or not: https://github.com/intagaming/hxann.com/commit/c77886ec239c437aab452709cf4932ea6450be9e

[intagaming]

I'm gonna make a wild guess that it might have something to do with the Vercel router. But again, it should not act like this at all for a Next.js static site, based on my experience with it.

[matthewp]

@intagaming from your screenshot I see a few files named blog, contact, and about. I'm talking about the files, not the folders. What are those files?

[intagaming]

@intagaming from your screenshot I see a few files named blog, contact, and about. I'm talking about the files, not the folders. What are those files?

That's just an HTML page disguised as a Vercel "file". It's just an Astro page, or specifically a Markdown file in the source code that Astro takes and make an HTML. Here's the content of one. It's the content of https://hxann.com/about I suppose.

Well there's a folder too, which has an index.html in it. I don't know if it's a Vercel thing or an Astro thing, but there you go.

[matthewp]

Ok, that's a bit unusual. I would expect the folders with index.html in them but not those files (with no file extension). I don't think Astro is producing those files. It's probably unrelated to your 404 problem though.

The 404.html file exists which according to their docs is all that's needed, so I'm not sure how to further help here.

[intagaming]

I just tried to npm create astro@latest and use the "Just the basic" template to spin up a fresh Astro site, and it's the same problem. Info dump: GitHub Repo https://test-astro-404.vercel.app/asd

So... That should make it a bit more interesting to work with. And yeah, locally it looks good.

[jablonski]

Very strange... even if I set the Framework to "other" and provide "dist" as output (where a 404.html sits at root), it doesn't work. Seems to be a problem with Vercel...

[jablonski]

I've created a support ticket at Vercel. Let's see what they will say.

[intagaming]

I've created a support ticket at Vercel. Let's see what they will say.

Just so you know, it's been awhile for my ticket to sit without much update. Maybe you'd get better luck with the Vercel Pro. Worth another stab though.

[matthewp]

Thanks @jablonski, please let us know what you find. Will keep the issue open for a little bit in case its a bug on our end.

[jablonski]

Just an update, the Vercel support wrote to me:

What version of Astro are you using currently? This issue seems to have been fixed in an update here: https://github.com/withastro/astro/pull/4018

My answer after testing:

I'm using the latest Astro-packages...

I've just tested again with the Vercel-adapter and without:

• With the Vercel-Adapter I receive a 500 error for non-existing pages (see attached screenshot)
• Without the Vercel-Adapter I receive a status code 200 for non-existing pages. This is strange because the output in the dist-folder is just a static site with a 404.html in the root folder. I'm wondering what Vercel does behind the curtains and why this breaks.

[jablonski]

Maybe relevant: I'm using Astro with an /api-folder for Vercel functions.

[matthewp]

Thanks @jablonski, so it sounds like maybe there is something wrong with our SSR output, I'll play around with it.

[matthewp]

I can confirm that 404.html is not working in my own basic static project. cc @okikio.

Going to dig into the SSR issue as that is likely Astro's bug.

[okikio]

Awesome

[matthewp]

I'm getting the 404.astro page: https://vercel-404-matthew6.vercel.app/testing

However we are getting the wrong status code, so let me try and fix that.

[intagaming]

@matthewp Hi. I don't think the problem is resolved yet. So the Astro Docs' guide to deploy to Vercel literally says that you can skip the Vercel configuration in Astro completely if you don't use SSR. The "Just the basics" template of Astro doesn't use SSR. Indeed it is not fixed as of [email protected], which has the fix included. Here's the deployment of "Just the basics", upgraded to [email protected]: GitHub commit. Here a link for convenience: https://test-astro-404.vercel.app/zxc111

[matthewp]

Yep, @intagaming, I'm aware that the 404.html is not working on Vercel. This issue is about the SSR adapter case, and that has been fixed by the linked PR.

As you noted you have a support ticket in with Vercel on their 404.html support, there's nothing we can do on our end to fix that problem.

[jablonski]

My interpretation of the problem: when Vercel detects an Astro project (regardless if there's a Vercel adapter installed or not), it runs it in some kind of SSR mode. This works fine with the Vercel adapter, but leads to the 404 problem without the adapter. This problem occurs even if one selects "Other" as framework. So the bug is on the Vercel side (at least for framework = "other" Vercel should just deliver the dist folder).

Contacting the Vercel support didn't help.

[jablonski]

routes didn't work for me because I need rewrite rules. Rewrites are not allowed to mix with routes.

So I've tested and found this combination (with an example rewrite). And it works!!!!

{
  "cleanUrls": true,
  "trailingSlash": false,
  "rewrites": [
    {
      "source": "/api/(.*)",
      "destination": "/api/fastify"
    }
  ]
}

[jablonski]

I've added a PR for the docs, so others won't run into this issue:

https://github.com/withastro/astro/pull/4299

[shishkin]

There is still an issue with custom 404 pages on Vercel with dynamic routes: https://github.com/withastro/astro/issues/4635