fix: track definePage imports per-file to fix named view race condition

Fix #2670

Author: posva

packages/router/src/unplugin/codegen/generateRouteRecords.ts

@@ -36,8 +36,9 @@ ${node
 
   const definePageDataList: string[] = []
 
-  if (node.hasDefinePage) {
+  if (node.needsDefinePageImport) {
     for (const [name, filePath] of node.value.components) {
+      if (!node.fileNeedsDefinePageImport(filePath)) continue
       const pageDataImport = `_definePage_${name}_${importsMap.size}`
       definePageDataList.push(pageDataImport)
       const lang = getLang(filePath)

packages/router/src/unplugin/codegen/generateRouteResolver.spec.ts

@@ -1086,8 +1086,8 @@ describe('generateRouteResolver', () => {
     tree.insert('profile', 'profile.vue')
     const profileNode = tree.children.get('profile')!
 
-    // Mark it as having definePage (this would normally be set by the plugin when parsing the file)
-    profileNode.hasDefinePage = true
+    // Mark it as having definePage with runtime properties (this would normally be set by the plugin when parsing the file)
+    profileNode.setDefinePageImport('profile.vue', true)
 
     const resolver = generateRouteResolver(
       tree,
@@ -1120,6 +1120,27 @@ describe('generateRouteResolver', () => {
     `)
   })
 
+  it('only imports definePage for files that need it in named views', () => {
+    const tree = new PrefixTree(DEFAULT_OPTIONS)
+    tree.insert('dashboard', 'dashboard.vue')
+    tree.insert('dashboard@sidebar', 'dashboard@sidebar.vue')
+    const dashboardNode = tree.children.get('dashboard')!
+
+    // Only the default view has definePage with runtime properties (e.g. meta)
+    dashboardNode.setDefinePageImport('dashboard.vue', true)
+
+    const resolver = generateRouteResolver(
+      tree,
+      DEFAULT_OPTIONS,
+      new ImportsMap(),
+      new Map()
+    )
+
+    // Should only import ?definePage for dashboard.vue, not dashboard@sidebar.vue
+    expect(resolver).toContain('_definePage_default_')
+    expect(resolver).not.toContain('_definePage_sidebar_')
+  })
+
   it('includes query property in route records with query params', () => {
     const tree = new PrefixTree(DEFAULT_OPTIONS)
     tree.insert('search', 'search.vue')

packages/router/src/unplugin/codegen/generateRouteResolver.ts

@@ -153,9 +153,9 @@ export function generateRouteRecord({
 
   // Handle definePage imports
   const definePageDataList: string[] = []
-  // TODO: optimize to only add the record merge when needed
-  if (node.hasDefinePage) {
+  if (node.needsDefinePageImport) {
     for (const [name, filePath] of node.value.components) {
+      if (!node.fileNeedsDefinePageImport(filePath)) continue
       const pageDataImport = `_definePage_${name}_${importsMap.size}`
       definePageDataList.push(pageDataImport)
       const lang = getLang(filePath)

packages/router/src/unplugin/core/context.ts

@@ -170,8 +170,10 @@ export function createRoutesContext(options: ResolvedOptions) {
     const content = await fs.readFile(filePath, 'utf8')
     // TODO: track if it changed and to not always trigger HMR
     const definedPageInfo = extractDefinePageInfo(content, filePath)
-    // TODO: add a test that this can be set to true and then to false
-    node.hasDefinePage = definedPageInfo?.hasRemainingProperties ?? false
+    node.setDefinePageImport(
+      filePath,
+      definedPageInfo?.hasRemainingProperties ?? false
+    )
     // TODO: track if it changed and if generateRoutes should be called again
     const routeBlock = getRouteBlock(filePath, content, options)
     // TODO: should warn if hasDefinePage and customRouteBlock

packages/router/src/unplugin/core/tree.ts

@@ -55,11 +55,38 @@ export class TreeNode {
    */
   options: TreeNodeOptions
 
-  // FIXME: refactor this code. It currently helps to keep track if a page has at least one component with `definePage()` but it doesn't tell which. It should keep track of which one while still caching the result per file.
   /**
-   * Should this page import the page info
+   * Set of file paths that use `definePage()` with runtime properties (meta, props, etc.) that require a `?definePage`
+   * import at build time. Tracked per-file to avoid race conditions when multiple files (e.g. named views) map to the
+   * same node.
    */
-  hasDefinePage: boolean = false
+  private _needsDefinePageImport: Set<string> = new Set()
+
+  /**
+   * Whether at least one component file uses `definePage()` with runtime properties (meta, props, etc.) that require a
+   * `?definePage` import at build time.
+   */
+  get needsDefinePageImport(): boolean {
+    return this._needsDefinePageImport.size > 0
+  }
+
+  /**
+   * Mark whether a file needs a `?definePage` import.
+   */
+  setDefinePageImport(filePath: string, needsImport: boolean) {
+    if (needsImport) {
+      this._needsDefinePageImport.add(filePath)
+    } else {
+      this._needsDefinePageImport.delete(filePath)
+    }
+  }
+
+  /**
+   * Check if a specific file needs a `?definePage` import.
+   */
+  fileNeedsDefinePageImport(filePath: string): boolean {
+    return this._needsDefinePageImport.has(filePath)
+  }
 
   /**
    * Creates a new tree node.
@@ -510,7 +537,7 @@ export class TreeNode {
         !this.value.components.get('default'))
         ? ` ⎈(${Array.from(this.value.components.keys()).join(', ')})`
         : ''
-    }${this.hasDefinePage ? ' ⚑ definePage()' : ''}`
+    }${this.needsDefinePageImport ? ' ⚑ definePage()' : ''}`
   }
 
   /**
@@ -572,6 +599,7 @@ export class PrefixTree extends TreeNode {
         }
       }
 
+      node.setDefinePageImport(filePath, false)
       this.map.delete(filePath)
 
       if (node.children.size === 0 && node.value.components.size === 0) {