vercel: Custom 404 page - "cannot mix legacy routes with new keys"

Trying to set a custom 404 page as shown here and here, getting this:

Deployment failed with the following error:
    Cannot mix legacy routes with new keys:

I’m using Hugo static generator, and here’s the 404 routing part in my now.json

"routes": [{
	"src": "/.*",
	"dest": "/$1"
}, {
	"handle": "filesystem"
}, {
	"src": "/.*",
	"status": 404,
	"dest": "/404"
}

I also tried:

}, {
	"src": "/(.*)",
	...

I’ve looked around for other examples, maybe missing a difference between now v1/2? Thanks in advance

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 19
Comments: 17 (4 by maintainers)

Commits related to this issue

[routing-utils] Improve error messages (#4498) This PR improves the way we handle routing errors in a few ways: - The error response is a single error (the first) instead of an array of errors whe... — committed to vercel/vercel by styfle 4 years ago
[cli][build-utils] Add support for custom 404.html for zero config deployments (#4563) Next.js already has support for [customizing the 404 page](https://nextjs.org/docs/advanced-features/custom-erro... — committed to vercel/vercel by styfle 4 years ago

Most upvoted comments

You can now emit a 404.html file in your Output Directory. This supports most frameworks with zero configuration.

https://vercel.com/docs/configuration#routes/advanced/custom-404

We also update the error message when vercel.json contains both routes and the newer routing properties.

styfle on Jun 16, 2020

@styfle how about adding a plain sentence on https://vercel.com/docs/configuration telling that “routes” can’t be mixed with the newer expressivity?

I agree that it’s not a breaking change, it’s “just” undocumented behaviour.

(and yes, it would be nice to explicitly configure error pages - would be in the spirit of the new more use-case specific flags)

nkuehn on Apr 25, 2020

I wonder if it’s intuitive enough to use 404.html file (if there is any) from the deployment directory for custom 404’s by default. I think I’ve seen this convention in some other static hostings, seems fine to me.

What’s the consideration against that?

yaroslav-ilin on Jun 1, 2020

Closing as the original issue has been resolved. Also, the feedback provided was rather useful and has been addressed with this PR: https://github.com/zeit/docs/pull/1830

mcsdevv on May 13, 2020

We want to make sure that defining custom errors is also an intuitive experience, so we’re still working out the details.

What about something like this?

"errorPages": {
  "404": "/path/to/404.html",
  "403": "/path/to/403.html"
}

Which is simple and easy to use.

SukkaW on Apr 24, 2020

@styfle So, I just need to make sure /404.html is accessible, and all 404 will be served with that page, right?

SukkaW on Jun 16, 2020

@styfle When will an alternative way to define a custom 404 be rolled out?

maiertech on Apr 2, 2020