fix(meta): Use leaf meta if route meta is not defined (#5041)

.changeset/five-kings-work.md

@@ -0,0 +1,5 @@
+---
+"@remix-run/react": patch
+---
+
+Fix v2 `meta` to ensure meta is rendered from the next route in the tree if no `meta` export is included in a leaf route

integration/meta-test.ts

@@ -449,8 +449,15 @@ test.describe("v2_meta", () => {
           }
         `,
 
-        "app/routes/no-meta.jsx": js`
-          export default function NoMeta() {
+        "app/routes/no-meta-export.jsx": js`
+          export default function NoMetaExport() {
+            return <div>Parent meta here!</div>;
+          }
+        `,
+
+        "app/routes/empty-meta-function.jsx": js`
+          export const meta = () => [];
+          export default function EmptyMetaFunction() {
             return <div>No meta here!</div>;
           }
         `,
@@ -481,9 +488,17 @@ test.describe("v2_meta", () => {
     appFixture.close();
   });
 
-  test("empty meta does not render a tag", async ({ page }) => {
+  test("no meta export renders meta from nearest route meta in the tree", async ({
+    page,
+  }) => {
+    let app = new PlaywrightFixture(appFixture, page);
+    await app.goto("/no-meta-export");
+    expect(await app.getHtml('meta[name="description"]')).toBeTruthy();
+  });
+
+  test("empty meta array does not render a tag", async ({ page }) => {
     let app = new PlaywrightFixture(appFixture, page);
-    await app.goto("/no-meta");
+    await app.goto("/empty-meta-function");
     await expect(app.getHtml("title")).rejects.toThrowError(
       'No element matches selector "title"'
     );

packages/remix-react/components.tsx

@@ -647,6 +647,7 @@ function V2Meta() {
   let location = useLocation();
 
   let meta: V2_HtmlMetaDescriptor[] = [];
+  let leafMeta: V2_HtmlMetaDescriptor[] | null = null;
   let parentsData: { [routeId: string]: AppData } = {};
 
   let matchesWithMeta: RouteMatchWithMeta[] = matches.map((match) => ({
@@ -677,6 +678,11 @@ function V2Meta() {
               matches: matchesWithMeta,
             })
           : routeModule.meta;
+    } else if (leafMeta) {
+      // We only assign the route's meta to the nearest leaf if there is no meta
+      // export in the route. The meta function may return a falsey value which
+      // is effectively the same as an empty array.
+      routeMeta = leafMeta;
     }
 
     routeMeta = routeMeta || [];
@@ -695,6 +701,7 @@ function V2Meta() {
     matchesWithMeta[index].meta = routeMeta;
     meta = routeMeta;
     parentsData[routeId] = data;
+    leafMeta = meta;
   }
 
   return (