routesChunkName.json does not allow sub-route with same path as parent.

[slorber]

TLDR: this is not urgent, and there is a workaround, just opened this issue for documenting the problem so that we don't forget to fix this later.

This is related to:
#2905 (comment)

Problem

Currently the routesChunkName.json is a mapping from path to chunkNames.

The problem is that you might have 2 routes with the same path. It notably happens in such case:

addRoute({
  path: "/",
  exact: false, // match all subpaths
  component: DocPage,
  routes: [
    { path: "/", exact: true, component: DocItem },
    { path: "/doc2", exact: true, component: DocItem },
    { path: "/doc3", exact: true, component: DocItem }
  ]
});

The DocsLayout component is supposed to intercept any request, apply the layout, and render the doc we are currently on.

But as we can make a doc the "home" (with homePageId), we end up with the parent and its child having the exact same path.

In such case, the routesChunkNames.json perform a bad "merge" of the data of the 2 routes having the same path:

  "/": {
    "component": "component---theme-doc-item-178-a40",
    "docsMetadata": "docsMetadata---docs-route-9-ee-json-ec1"
    "content": "content---ec-6-8fc"
  },

This lead to runtime errors, as D2 is not able to load all the required chunks for a given page, and the component attribute overridden by the children. (in such case / renders the doc directly, without using the layout comp)

We should ensure that this does not happen, and allow a parent and its child route to have the same path without troubles. The routesChunkName.json could for example evolve to a new format, taking an array of values instead of a single value.

---

Workaround:

The "parent" route can just omit the trailing /.

addRoute({
  path: "", // empty string!
  exact: false, // match all subpaths
  component: DocPage,
  routes: [
    { path: "/", exact: true, component: DocItem },
    { path: "/doc2", exact: true, component: DocItem },
    { path: "/doc3", exact: true, component: DocItem }
  ]
});

addRoute({
  path: "/next", // no trailing slash! as children has path = `/next/`
  exact: false, // match all subpaths
  component: DocPage,
  routes: [
    { path: "/next/", exact: true, component: DocItem },
    { path: "/next/doc2", exact: true, component: DocItem },
    { path: "/next/doc3", exact: true, component: DocItem }
  ]
});

The ReactRouter matching still works and routesChunkName.json is able to add 2 paths instead of merging them:

  "": {
    "component": "component---theme-doc-page-1-be-9be",
    "docsMetadata": "docsMetadata---docs-route-9-ee-json-ec1"
  },
  "/": {
    "component": "component---theme-doc-item-178-a40",
    "content": "content---ec-6-8fc"
  },

  "/next": {
    "component": "component---theme-doc-page-1-be-9be",
    "docsMetadata": "docsMetadata---nextb-2-e-c77"
  },
  "/next/": {
    "component": "component---theme-doc-item-178-a40",
    "content": "content---next-3-b-8-a1a"
  },