Serverless-next.js: Catch-all routes aren't parsed properly

[Bathlamos]

Describe the bug
Using a catch-all route with format [[...paramName]].tsx leads to a path-to-regexp error when deploying

To Reproduce

1. Using a Next.js project set-up with a minimal serverless.yml file (as per the README), add a file named [[...template]].tsx under pages. A minimal Next.js page can be used for the content.
2. Attempt deploy (serverless)
3. See error in console

Expected behavior
Deployment should occur without issues. This is the case for me when I rename [[...paramName]].tsx to [...paramName].tsx. Furthermore, debugging shows that this is the route that is causing issues.

Screenshots
If applicable, add screenshots to help explain your problem.

TypeError: Missing parameter name at 12

Desktop (please complete the following information):

• OS: macOS Catalina 10.15.1
• Version @sls-next/[email protected]

[danielcondemarin]

Optional catch all routes haven't been implemented, only plain catch-all routes are currently supported. Also worth mentioning that optional catch all routes are still experimental:

[benjipott]

@danielcondemarin any idea if that will be plan ?

[ivanpetrushev]

That warning has disappeared from docs, so maybe Optional catch all routes now should be supported?
I am getting the same error.

[himynameistimli]

I'm not well versed in this codebase (just started using it last week, but it seems like the issue relates to https://github.com/serverless-nextjs/serverless-next.js/blob/master/packages/libs/lambda-at-edge/src/lib/expressifyDynamicRoute.ts

// converts a nextjs dynamic route /[param]/ -> /:param
// also handles catch all routes /[...param]/ -> /:param*

const expressifyDynamicRoute = (dynamicRoute: string): string => {
  // replace any catch all group first
  const expressified = dynamicRoute.replace(/\[\.\.\.(.*)]$/, ":$1*");

  // now replace other dynamic route groups
  return expressified.replace(/\[(.*?)]/g, ":$1");
};

export default expressifyDynamicRoute;

What seems to be happening is that /[[...param]] is being converted to /::param* which doesn't generate a valid Express route.

I believe a quick fix would be to add another regular expression to handle specific optional catch-all routes, but I am not aware if NextJS allows only [[...param]] or if they intend to allow [[param]] in the future (I think it doesn't).

Likewise, reading thru the Express docs on Routing, I am not sure what the proper Express route would be to accommodate multiple optional routes (e.g /slug/a/b).

[Meemaw]

Any update on this @danielcondemarin ?

[kulesa]

As a workaround for optional catch-all routes, instead of, say, pages/posts/[[...params]].js you can create pages/posts/index.js and pages/posts/[...params].js where [...params].js is just

export { default } from '.'

Now /posts route will render index.js with router.query === {}, and /posts/published/recent will also render index.js but with router.query.params === ['published', 'recent'].

[dphang]

I will take a look at how to fix this for 1.19

[stan-sack]

@dphang im running the latest alpha and they still dont work. do you know if the change has been released?

[dphang]

@stan-sack please open a new issue for this as notifications to closed issues get lost in my email and I may often miss them. Please use the bug template and also post your .next/serverless/pages-manifest.json and .serverless_nextjs/default-lambda/manifest.json and more details on what doesn't work exactly. E.g are you using SSR optional-catch-all, SSG optional-catch-all etc.

It has been published since 1.19.0-alpha.5. For future reference, you can always check the commit tags to figure out all the versions where the change is: https://github.com/serverless-nextjs/serverless-next.js/commit/ba9d4093ab9d1173b904f72146d0fa161d10b01e (go to the linked PR and at the bottom you can click the actual merged commit). Then look at the top for a section like below:

[stan-sack]

ok sure. also my deployment failed, its not that latest alpha doesnt work. sorry for the spam