Fix: Gracefully handle syntax errors in definePage to prevent Vite server crashes

playground/typed-router.d.ts

@@ -64,6 +64,7 @@ declare module 'vue-router/auto-routes' {
     '/partial-[name]': RouteRecordInfo<'/partial-[name]', '/partial-:name', { name: ParamValue<true> }, { name: ParamValue<false> }>,
     '/custom-path': RouteRecordInfo<'/custom-path', '/surprise-:id(\d+)', Record<never, never>, Record<never, never>>,
     '/test-[a-id]': RouteRecordInfo<'/test-[a-id]', '/test-:a-id', { aId: ParamValue<true> }, { aId: ParamValue<false> }>,
+    '/test-broken-syntax': RouteRecordInfo<'/test-broken-syntax', '/test-broken-syntax', Record<never, never>, Record<never, never>>,
     '/todos/': RouteRecordInfo<'/todos/', '/todos', Record<never, never>, Record<never, never>>,
     '/todos/+layout': RouteRecordInfo<'/todos/+layout', '/todos/+layout', Record<never, never>, Record<never, never>>,
     '/users/': RouteRecordInfo<'/users/', '/users', Record<never, never>, Record<never, never>>,
@@ -287,6 +288,10 @@ declare module 'vue-router/auto-routes' {
       routes: '/test-[a-id]'
       views: never
     }
+    'src/pages/test-broken-syntax.vue': {
+      routes: '/test-broken-syntax'
+      views: never
+    }
     'src/pages/todos/index.vue': {
       routes: '/todos/'
       views: never

src/core/definePage.spec.ts

@@ -1,6 +1,7 @@
 import { TransformResult } from 'vite'
 import { expect, describe, it } from 'vitest'
 import { definePageTransform, extractDefinePageNameAndPath } from './definePage'
+import { mockWarn } from '../../tests/vitest-mock-warn'
 
 const sampleCode = `
 <script setup>
@@ -18,6 +19,7 @@
       `
 
 describe('definePage', () => {
+  mockWarn()
   it('removes definePage', async () => {
     const result = (await definePageTransform({
       code: sampleCode,
@@ -153,7 +155,7 @@
     expect(result?.code).toMatchSnapshot()
   })
 
-  it('throws if definePage uses a variable from the setup', async () => {
+  it('handles definePage using a variable from setup gracefully', async () => {
     const code = `
 <script setup>
 const a = 1
@@ -162,13 +164,13 @@
 })
 </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 {}')
   })
 
   it('extracts name and path', async () => {
@@ -254,4 +256,86 @@
       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 codeForRemoval = `
+<script setup>
+const a = 1
+definePage({
+  name: 'test',,  // syntax error: extra comma
+  path: '/test'
+})
+const b = 1
+</script>
+
+<template>
+  <div>hello</div>
+</template>
+      `
+
+      const result = await definePageTransform({
+        code: codeForRemoval,
+        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 = await extractDefinePageNameAndPath(
+        codeWithSyntaxError,
+        'src/pages/broken.vue'
+      )
+
+      // Should return null/undefined instead of crashing
+      expect(result).toBeUndefined()
+      expect('Failed to extract definePage info:').toHaveBeenWarned()
+    })
+
+    it('handles unclosed brackets in definePage gracefully', async () => {
+      const codeWithUnclosedBracket = `
+<script setup>
+definePage({
+  name: 'test',
+  path: '/test'
+  // missing closing bracket
+</script>
+      `
+
+      const result = await definePageTransform({
+        code: codeWithUnclosedBracket,
+        id: 'src/pages/unclosed.vue?definePage&vue',
+      })
+
+      expect(result).toBe('export default {}')
+      expect('Failed to process definePage:').toHaveBeenWarned()
+    })
+  })
 })