fix: gracefully handle syntax errors in definePage

Fix #692, #691

Author: posva

src/core/definePage.spec.ts

@@ -2,6 +2,7 @@ import { TransformResult } from 'vite'
 import { expect, describe, it } from 'vitest'
 import { definePageTransform, extractDefinePageInfo } from './definePage'
 import { ts } from '../utils'
+import { mockWarn } from '../../tests/vitest-mock-warn'
 
 const vue = String.raw
 
@@ -21,6 +22,7 @@ const b = 1
       `
 
 describe('definePage', () => {
+  mockWarn()
   it('removes definePage', async () => {
     const result = (await definePageTransform({
       code: sampleCode,
@@ -156,22 +158,25 @@ definePage({
     expect(result?.code).toMatchSnapshot()
   })
 
-  it('throws if definePage uses a variable from the setup', async () => {
-    const code = vue`
+  it('handles definePage using a variable from setup gracefully', async () => {
+    const code = `
 <script setup>
 const a = 1
 definePage({
   name: a,
 })
 </script>
 `
-    // the function syntax works with sync and async errors
-    await expect(async () => {
-      await definePageTransform({
-        code,
-        id: 'src/pages/basic.vue&definePage&vue',
-      })
-    }).rejects.toThrowError()
+    const result = await definePageTransform({
+      code,
+      id: 'src/pages/basic.vue&definePage&vue',
+    })
+
+    // Should return empty object instead of throwing
+    expect(result).toBe('export default {}')
+    expect(
+      '`definePage()` in <script setup> cannot reference locally declared variables'
+    ).toHaveBeenWarned()
   })
 
   it('extracts name and path', () => {
@@ -312,4 +317,52 @@ export default {
       path: '/custom',
     })
   })
+
+  describe('error handling', () => {
+    const codeWithSyntaxError = `
+<script setup>
+definePage({
+  name: 'test',,  // syntax error: extra comma
+  path: '/test'
+})
+</script>
+
+<template>
+  <div>hello</div>
+</template>
+      `
+
+    it('handles syntax errors gracefully when extracting definePage', async () => {
+      const result = await definePageTransform({
+        code: codeWithSyntaxError,
+        id: 'src/pages/broken.vue?definePage&vue',
+      })
+
+      // Should return empty object instead of crashing
+      expect(result).toBe('export default {}')
+      expect('Failed to process definePage:').toHaveBeenWarned()
+    })
+
+    it('handles syntax errors gracefully when removing definePage from source', async () => {
+      const result = await definePageTransform({
+        code: codeWithSyntaxError,
+        id: 'src/pages/broken.vue',
+      })
+
+      // Should return undefined (no transform) instead of crashing
+      expect(result).toBeUndefined()
+      expect('Failed to process definePage:').toHaveBeenWarned()
+    })
+
+    it('handles extractDefinePageNameAndPath with syntax errors gracefully', async () => {
+      const result = extractDefinePageInfo(
+        codeWithSyntaxError,
+        'src/pages/broken.vue'
+      )
+
+      // Should return null/undefined instead of crashing
+      expect(result).toBeUndefined()
+      expect('Failed to extract definePage info:').toHaveBeenWarned()
+    })
+  })
 })

src/core/definePage.ts

@@ -80,7 +80,23 @@ export function definePageTransform({
     return isExtractingDefinePage ? 'export default {}' : undefined
   }
 
-  const { ast, offset, definePageNodes } = getCodeAst(code, id)
+  let ast: Program | undefined
+  let offset: number
+  let definePageNodes: CallExpression[]
+
+  try {
+    const result = getCodeAst(code, id)
+    ast = result.ast
+    offset = result.offset
+    definePageNodes = result.definePageNodes
+  } catch (error) {
+    // Handle any syntax errors or parsing errors gracefully
+    warn(
+      `[${id}]: Failed to process definePage: ${error instanceof Error ? error.message : 'Unknown error'}`
+    )
+    return isExtractingDefinePage ? 'export default {}' : undefined
+  }
+
   if (!ast) return
 
   if (!definePageNodes.length) {
@@ -111,7 +127,14 @@ export function definePageTransform({
     const scriptBindings = ast.body ? getIdentifiers(ast.body) : []
 
     // this will throw if a property from the script setup is used in definePage
-    checkInvalidScopeReference(routeRecord, MACRO_DEFINE_PAGE, scriptBindings)
+    try {
+      checkInvalidScopeReference(routeRecord, MACRO_DEFINE_PAGE, scriptBindings)
+    } catch (error) {
+      warn(
+        `[${id}]: ${error instanceof Error ? error.message : 'Invalid scope reference in definePage'}`
+      )
+      return 'export default {}'
+    }
 
     s.remove(offset + routeRecord.end!, code.length)
     s.remove(0, offset + routeRecord.start!)
@@ -203,7 +226,21 @@ export function extractDefinePageInfo(
 ): DefinePageInfo | null | undefined {
   if (!sfcCode.includes(MACRO_DEFINE_PAGE)) return
 
-  const { ast, definePageNodes } = getCodeAst(sfcCode, id)
+  let ast: Program | undefined
+  let definePageNodes: CallExpression[]
+
+  try {
+    const result = getCodeAst(sfcCode, id)
+    ast = result.ast
+    definePageNodes = result.definePageNodes
+  } catch (error) {
+    // Handle any syntax errors or parsing errors gracefully
+    warn(
+      `[${id}]: Failed to extract definePage info: ${error instanceof Error ? error.message : 'Unknown error'}`
+    )
+    return undefined
+  }
+
   if (!ast) return
 
   if (!definePageNodes.length) {