[remix] Don't create output for Pathless Layout Routes without any child routes at the root level (#9539)

Fixes https://github.com/vercel/community/discussions/1587.

packages/remix/src/build.ts

@@ -237,6 +237,12 @@ module.exports = config;`;
 
     const path = getPathFromRoute(route, remixConfig.routes);
 
+    // If the route is a pathless layout route (at the root level)
+    // and doesn't have any sub-routes, then a function should not be created.
+    if (!path) {
+      continue;
+    }
+
     let isEdge = false;
     for (const currentRoute of getRouteIterator(route, remixConfig.routes)) {
       const staticConfig = staticConfigsMap.get(currentRoute);

packages/remix/src/utils.ts

@@ -41,9 +41,12 @@ export function getPathFromRoute(
   route: ConfigRoute,
   routes: RouteManifest
 ): string {
+  if (route.id === 'root' || (route.parentId === 'root' && route.index)) {
+    return 'index';
+  }
+
   const pathParts: string[] = [];
   for (const currentRoute of getRouteIterator(route, routes)) {
-    if (currentRoute.index) pathParts.push('index');
     if (currentRoute.path) pathParts.push(currentRoute.path);
   }
   const path = pathParts.reverse().join('/');

packages/remix/test/fixtures/01-remix-basics/app/routes/__pathless.tsx

@@ -0,0 +1,4 @@
+// This is a pathless layout route at the root level,
+// but there are no child routes, so a function should
+// not be created for this route.
+export default () => <div>pathless layout route</div>;

packages/remix/test/fixtures/01-remix-basics/app/routes/nested2/__pathless.tsx

@@ -0,0 +1,3 @@
+// This is a pathless layout route without any child routes,
+// but Remix will serve this since its not at the root level.
+export default () => <div>nested2 pathless layout route</div>;

packages/remix/test/fixtures/01-remix-basics/vercel.json

@@ -15,10 +15,24 @@
     { "path": "/b", "mustContain": "B page" },
     { "path": "/nested", "mustContain": "Nested index page" },
     { "path": "/nested/another", "mustContain": "Nested another page" },
-    { "path": "/nested/index", "mustContain": "Not Found" },
+    { "path": "/nested/index", "status": 404, "mustContain": "Not Found" },
-    { "path": "/asdf", "mustContain": "Not Found" },
+    { "path": "/asdf", "status": 404, "mustContain": "Not Found" },
     { "path": "/instanceof", "mustContain": "InstanceOfRequest: true" },
     { "path": "/projects/edge", "mustContain": "\"isEdge\":true" },
-    { "path": "/projects/node", "mustContain": "\"isEdge\":false" }
+    { "path": "/projects/node", "mustContain": "\"isEdge\":false" },
+    {
+      "path": "/__pathless",
+      "status": 404,
+      "mustContain": "Not Found"
+    },
+    {
+      "path": "/nested2",
+      "mustContain": "nested2 pathless layout route"
+    },
+    {
+      "path": "/nested2/__pathless",
+      "status": 404,
+      "mustContain": "Not Found"
+    }
   ]
 }

packages/remix/test/unit.get-path-from-route.test.ts

@@ -4,6 +4,12 @@ import type { RouteManifest } from '@remix-run/dev/dist/config/routes';
 describe('getPathFromRoute()', () => {
   const routes: RouteManifest = {
     root: { path: '', id: 'root', file: 'root.tsx' },
+    'routes/__pathless': {
+      path: undefined,
+      id: 'routes/__pathless',
+      parentId: 'root',
+      file: 'routes/__pathless.tsx',
+    },
     'routes/$foo.$bar.$baz': {
       path: ':foo/:bar/:baz',
       id: 'routes/$foo.$bar.$baz',
@@ -22,12 +28,24 @@ describe('getPathFromRoute()', () => {
       parentId: 'root',
       file: 'routes/projects.tsx',
     },
+    'routes/projects/__pathless': {
+      path: undefined,
+      id: 'routes/projects/__pathless',
+      parentId: 'routes/projects',
+      file: 'routes/projects/__pathless.tsx',
+    },
     'routes/projects/index': {
       path: undefined,
       index: true,
-      id: 'routes/projects/indexx',
+      id: 'routes/projects/index',
       parentId: 'routes/projects',
-      file: 'routes/projects/indexx.tsx',
+      file: 'routes/projects/index.tsx',
+    },
+    'routes/projects/create': {
+      path: 'create',
+      id: 'routes/projects/create',
+      parentId: 'routes/projects',
+      file: 'routes/projects/create.tsx',
     },
     'routes/projects/$': {
       path: '*',
@@ -57,11 +75,14 @@ describe('getPathFromRoute()', () => {
   };
 
   it.each([
-    { id: 'root', expected: '' },
+    { id: 'root', expected: 'index' },
+    { id: 'routes/__pathless', expected: '' },
     { id: 'routes/index', expected: 'index' },
     { id: 'routes/api.hello', expected: 'api/hello' },
     { id: 'routes/projects', expected: 'projects' },
-    { id: 'routes/projects/index', expected: 'projects/index' },
+    { id: 'routes/projects/__pathless', expected: 'projects' },
+    { id: 'routes/projects/index', expected: 'projects' },
+    { id: 'routes/projects/create', expected: 'projects/create' },
     { id: 'routes/projects/$', expected: 'projects/*' },
     { id: 'routes/$foo.$bar.$baz', expected: ':foo/:bar/:baz' },
     { id: 'routes/node', expected: 'node' },