🐛 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: intagaming/hxann.com@c77886e

[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: #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 astro@1.0.2, which has the fix included. Here's the deployment of "Just the basics", upgraded to astro@1.0.2: 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:

#4299

[shishkin]

There is still an issue with custom 404 pages on Vercel with dynamic routes: #4635

[jtomek]

Hello, how to get a 404 on Vercel?

This issue is reproducible in the official demo: https://vercel.com/templates/astro/astro-edge-functions
Example: https://astro-template.vercel.app/djaklfjaklsjdlfasdfjaklsdf

Edit: I just noticed that there is a remark in the documentation regarding this issue.

https://docs.astro.build/en/guides/deploy/vercel/#static-site

{
  "cleanUrls": true,
}

[cerpow]

Hey guys, this worked for me using Astro and Vercel edge adapter in vercel.json at root (Locally it won't work):

{
  "cleanUrls": false,
    "rewrites": [
      {
        "source": "(.*)",
        "destination": "404.html"
      }
  ]
}

If you want the api routes to work using POST then use this:

{
    "routes": [{ "handle": "filesystem" }, { "src": "/(.*)", "status": 404, "methods": ["GET"], "dest": "/404.html" }]
}

[colinmcdermott]

So is this still an issue? I have been trying to get a working 404 page in Astro with no joy so far...

[cerpow]

Yes @colinmcdermott , I get blank page in Safari and 404 message in Chrome, but no html page.
Happens using @vercel edge adapter.

I manage to fix it by creating "[...any].astro" in Pages folder replacing 404.astro.

// [...any].astro

---
import Layout from '../layouts/layout.astro';
const { any } = Astro.params;
---

<Layout center>
	<h1>Not found</h1>
	<p class="medium">The page you wanted isn't here. Browse our site for something else that might catch your interest.</p>
	<p><a href="/">Back to Homepage</a></p>
</Layout>

[benadam11]

@cerpow that seems like a better workaround than the routes config ...

[jtomek]

Does it return 404? Without a valid 404 status, it could have consequences on SEO.

[colinmcdermott]

Thank you kindly for the response @cerpow and all. Would also be very interested to know if your work around responds with a 404 status, as it looks great otherwise. A catch 22... ugly 404, or pretty 200... would have to go with the ugly 404 I guess.

[cerpow]

@jtomek @colinmcdermott Hello, no problem! The work around responds with 200 by default but you can set any response status by using Astro.response.status = 404;

@benadam11 Yes, using routes will mess up the POST or any other api routes

[...any].astro

---
import Layout from '../layouts/layout.astro';
const { any } = Astro.params;
Astro.response.status = 404;
---

<Layout center>
  <h1>Not found</h1>
  <p class="medium">The page you wanted isn't here. Browse our site for something else that might catch your interest.</p>
  <p><a href="/">Back to Homepage</a></p>
</Layout>

[ElyseGiroux]

If like me you are using hybrid rendering and have your configs like this: output: "server", adapter: vercel()
and building pages with: export const prerender = true;

You need to remove the export const prerender = true; from your 404 page.

I render all my pages statically but still use an API and the 404 page need to be server rendered too.

[benjamin-guibert]

I just ran into the same issue using hybrid mode in Astro 3 using Vercel Adapter: the custom 404 page was not being generated.

I got it fixed by rendering the 404 page, thanks for the tip!

export const prerender = false;