Experimental nested catch all routes don't work and workaround doesn't either

Bug report

Describe the bug

We need the optional catch all route /[locale]/search/[[...slug]].tsx to be able to:

• Show the search view at /en/search.
• Show the search view with a selected user at /en/search/USER_ID (the “user view” is just a dialog that opens when a search result is clicked).

But nesting a catch all route isn’t currently supported (even though it’s not explicitly stated in the documentation that you can’t do it), so our workaround was to create two pages:

1. The search view (without a user selected) at src/pages/[locale]/search/index.tsx.
2. The user view (the search view with a user selected) at src/pages/[locale]/search/[user].tsx.

The code in those two pages is identical (with the search view code just ignoring the fact that there isn’t a user selected). So, we define the pages in a separate file (in src/search/page.tsx) and re-export it from the page files like so (note that we’re using the Typescript baseUrl and paths options to map @tutorbook/* to src/*):

export * from '@tutorbook/search/page';

But that results in messed up tree shaking and your next-ssg-transform plugin isn’t able to remove the server-side only code that’s used in the getServerSideProps function exported from @tutorbook/search/page and re-exported from pages/[locale]/search/index.tsx. So we’re left with the following (expected) error:

Module not found: Can't resolve 'child_process' in '/home/nchiang/repos/tutorbook/node_modules/google-auth-library/build/src/auth'

When the getServerSideProps function is defined directly in the page (i.e. in pages/[locale]/search/index.tsx and again in pages/[locale]/search/[user].tsx) it works fine.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Clone this public repository.
2. Checkout to the develop branch by running:

$ cd tutorbook/ && git checkout develop && git pull

1. Install our dependencies and start a development server by running the following (in the root of the repository):

$ npm i && npm run dev

1. Open up http://0.0.0.0:3000/en/search/ or http://0.0.0.0:3000/en/search/dv90ZS4zKFWWda296t2GuHQ9VRf1`.
2. See error.

Expected behavior

1. Update this documentation to make it explicit that you do not support nested catch all routes (e.g. /[locale]/search/[[...slug]].tsx).
2. Fix the next-ssg-transform plugin so that it removes the server-side only imports from re-exported getServerSideProps functions.

System information

• OS: Ubuntu 18.04.2
• Version of Next.js: 9.4.0
• Version of Node.js: 12.16.1

Additional context

Current workaround is just to literally copy the same code into both page files (i.e. src/pages/[locale]/search/index.tsx and src/pages/[locale]/search/[user].tsx are exactly the same).

[Janpot]

@nicholaschiang I see you’re using v9.4.0. Optional catch-all routes were added in version 9.4.2. Keep in mind that this feature is still experimental and needs to be enabled explicitly by adding

// ./next.config.js
module.exports = { 
  experimental: {
    optionalCatchAll: true 
  }
}

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.