From b00264cd7c86487058f72b2b0f5988527ab146b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matej=20=C4=8Cern=C3=BD?=
 <112722215+cernymatej@users.noreply.github.com>
Date: Sat, 4 Jan 2025 22:14:55 +0100
Subject: [PATCH] fix(nuxt): use node `location` instead of `range` for route
 meta property extraction (#30447)

---
 packages/nuxt/src/pages/utils.ts         | 16 +++++++++-------
 packages/nuxt/test/page-metadata.test.ts | 14 +++++++++++++-
 2 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/packages/nuxt/src/pages/utils.ts b/packages/nuxt/src/pages/utils.ts
index 9c7a694d36..288fbf3817 100644
--- a/packages/nuxt/src/pages/utils.ts
+++ b/packages/nuxt/src/pages/utils.ts
@@ -11,7 +11,7 @@ import { transform } from 'esbuild'
 import type { Property } from 'estree'
 import type { NuxtPage } from 'nuxt/schema'
 
-import { parseAndWalk } from '../core/utils/parse'
+import { parseAndWalk, withLocations } from '../core/utils/parse'
 import { getLoader, uniqueBy } from '../core/utils'
 import { logger, toArray } from '../utils'
 
@@ -247,8 +247,10 @@ export async function getRouteMeta (contents: string, absolutePath: string, extr
         const property = pageMetaArgument.properties.find((property): property is Property => property.type === 'Property' && property.key.type === 'Identifier' && property.key.name === key)
         if (!property) { continue }
 
-        if (property.value.type === 'ObjectExpression') {
-          const valueString = js.code.slice(property.value.range![0], property.value.range![1])
+        const propertyValue = withLocations(property.value)
+
+        if (propertyValue.type === 'ObjectExpression') {
+          const valueString = js.code.slice(propertyValue.start, propertyValue.end)
           try {
             extractedMeta[key] = JSON.parse(runInNewContext(`JSON.stringify(${valueString})`, {}))
           } catch {
@@ -258,9 +260,9 @@ export async function getRouteMeta (contents: string, absolutePath: string, extr
           }
         }
 
-        if (property.value.type === 'ArrayExpression') {
+        if (propertyValue.type === 'ArrayExpression') {
           const values: string[] = []
-          for (const element of property.value.elements) {
+          for (const element of propertyValue.elements) {
             if (!element) {
               continue
             }
@@ -275,12 +277,12 @@ export async function getRouteMeta (contents: string, absolutePath: string, extr
           continue
         }
 
-        if (property.value.type !== 'Literal' || (typeof property.value.value !== 'string' && typeof property.value.value !== 'boolean')) {
+        if (propertyValue.type !== 'Literal' || (typeof propertyValue.value !== 'string' && typeof propertyValue.value !== 'boolean')) {
           logger.debug(`Skipping extraction of \`${key}\` metadata as it is not a string literal or array of string literals (reading \`${absolutePath}\`).`)
           dynamicProperties.add(key)
           continue
         }
-        extractedMeta[key] = property.value.value
+        extractedMeta[key] = propertyValue.value
       }
 
       for (const property of pageMetaArgument.properties) {
diff --git a/packages/nuxt/test/page-metadata.test.ts b/packages/nuxt/test/page-metadata.test.ts
index a30aada419..6e57c2096e 100644
--- a/packages/nuxt/test/page-metadata.test.ts
+++ b/packages/nuxt/test/page-metadata.test.ts
@@ -78,7 +78,6 @@ definePageMeta({ name: 'bar' })
     const meta = await getRouteMeta(`
     <script setup>
     definePageMeta({
-      name: 'some-custom-name',
       path: '/some-custom-path',
       validate: () => true,
       middleware: [
@@ -87,19 +86,32 @@ definePageMeta({ name: 'bar' })
       otherValue: {
         foo: 'bar',
       },
+      // 'name', 'props' and 'alias' are part of 'defaultExtractionKeys'; they're extracted from the component, so we should test the AST walking for different value types
+      name: 'some-custom-name',
+      props: {
+        foo: 'bar',
+      },
+      alias: ['/alias'],
     })
     </script>
     `, filePath)
 
     expect(meta).toMatchInlineSnapshot(`
       {
+        "alias": [
+          "/alias",
+        ],
         "meta": {
           "__nuxt_dynamic_meta_key": Set {
+            "props",
             "meta",
           },
         },
         "name": "some-custom-name",
         "path": "/some-custom-path",
+        "props": {
+          "foo": "bar",
+        },
       }
     `)
   })