Fix syntax error handling in definePage to prevent Vite crashes

playground/typed-router.d.ts

@@ -63,6 +63,7 @@ declare module 'vue-router/auto-routes' {
     '/nested-group/(nested-group-first-level)/nested-group-first-level-child': RouteRecordInfo<'/nested-group/(nested-group-first-level)/nested-group-first-level-child', '/nested-group/nested-group-first-level-child', Record<never, never>, Record<never, never>>,
     '/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>>,
+    '/syntax-error-test': RouteRecordInfo<'/syntax-error-test', '/syntax-error-test', Record<never, never>, Record<never, never>>,
     '/test-[a-id]': RouteRecordInfo<'/test-[a-id]', '/test-:a-id', { aId: ParamValue<true> }, { aId: ParamValue<false> }>,
     '/todos/': RouteRecordInfo<'/todos/', '/todos', Record<never, never>, Record<never, never>>,
     '/todos/+layout': RouteRecordInfo<'/todos/+layout', '/todos/+layout', Record<never, never>, Record<never, never>>,
@@ -283,6 +284,10 @@ declare module 'vue-router/auto-routes' {
       routes: '/custom-path'
       views: never
     }
+    'src/pages/syntax-error-test.vue': {
+      routes: '/syntax-error-test'
+      views: never
+    }
     'src/pages/test-[a-id].vue': {
       routes: '/test-[a-id]'
       views: never

src/core/definePage.spec.ts

@@ -254,4 +254,72 @@ export default {
       path: '/custom',
     })
   })
+
+  it('handles syntax errors gracefully', async () => {
+    const invalidCode = `
+<script setup>
+definePage({ 2, 3 }) // invalid syntax
+</script>
+
+<template>
+  <div>hello</div>
+</template>
+    `
+
+    // Should not throw and return undefined for normal transform
+    const result = await definePageTransform({
+      code: invalidCode,
+      id: 'src/pages/invalid.vue',
+    })
+    expect(result).toBeUndefined()
+
+    // Should return empty object for definePage extraction
+    const extractResult = await definePageTransform({
+      code: invalidCode,
+      id: 'src/pages/invalid.vue?definePage&vue',
+    })
+    expect(extractResult).toBe('export default {}')
+
+    // extractDefinePageNameAndPath should also handle syntax errors gracefully
+    const nameAndPath = await extractDefinePageNameAndPath(invalidCode, 'src/pages/invalid.vue')
+    expect(nameAndPath).toBeUndefined()
+  })
+
+  it('handles various syntax errors in definePage', async () => {
+    // Test with missing closing brace
+    const invalidCode1 = `
+<script setup>
+definePage({ name: 'test'  // missing closing brace
+</script>
+
+<template><div>test</div></template>
+    `
+
+    const result1 = await definePageTransform({
+      code: invalidCode1,
+      id: 'src/pages/invalid1.vue',
+    })
+    expect(result1).toBeUndefined()
+
+    // Test with invalid property syntax
+    const invalidCode2 = `
+<script setup>
+definePage({ 123abc: 'invalid' }) // invalid property name
+</script>
+
+<template><div>test</div></template>
+    `
+
+    const result2 = await definePageTransform({
+      code: invalidCode2,
+      id: 'src/pages/invalid2.vue',
+    })
+    expect(result2).toBeUndefined()
+
+    const extractResult2 = await definePageTransform({
+      code: invalidCode2,
+      id: 'src/pages/invalid2.vue?definePage&vue',
+    })
+    expect(extractResult2).toBe('export default {}')
+  })
 })

src/core/definePage.ts

@@ -35,17 +35,26 @@ function getCodeAst(code: string, id: string) {
   let offset = 0
   let ast: Program | undefined
   const lang = getLang(id.split(MACRO_DEFINE_PAGE_QUERY)[0]!)
-  if (lang === 'vue') {
-    const sfc = parseSFC(code, id)
-    if (sfc.scriptSetup) {
-      ast = sfc.getSetupAst()
-      offset = sfc.scriptSetup.loc.start.offset
-    } else if (sfc.script) {
-      ast = sfc.getScriptAst()
-      offset = sfc.script.loc.start.offset
+
+  try {
+    if (lang === 'vue') {
+      const sfc = parseSFC(code, id)
+      if (sfc.scriptSetup) {
+        ast = sfc.getSetupAst()
+        offset = sfc.scriptSetup.loc.start.offset
+      } else if (sfc.script) {
+        ast = sfc.getScriptAst()
+        offset = sfc.script.loc.start.offset
+      }
+    } else if (/[jt]sx?$/.test(lang)) {
+      ast = babelParse(code, lang)
     }
-  } else if (/[jt]sx?$/.test(lang)) {
-    ast = babelParse(code, lang)
+  } catch (error) {
+    // If there's a syntax error in the code, warn and return empty results
+    // This prevents crashing the dev server when there are syntax errors
+    const errorMessage = error instanceof Error ? error.message : String(error)
+    warn(`[${id}]: Failed to parse code due to syntax error: ${errorMessage}`)
+    return { ast: undefined, offset: 0, definePageNodes: [] }
   }
 
   const definePageNodes: CallExpression[] = (ast?.body || [])
@@ -78,7 +87,10 @@ export function definePageTransform({
   }
 
   const { ast, offset, definePageNodes } = getCodeAst(code, id)
-  if (!ast) return
+  if (!ast) {
+    // If parsing failed but we're extracting definePage, return empty object
+    return isExtractingDefinePage ? 'export default {}' : undefined
+  }
 
   if (!definePageNodes.length) {
     return isExtractingDefinePage