不同目录下同名vue文件打包后导致错误行为

[jiayp]

Describe the bug

目录结构类似这样：

src
  view
    house
      tool
         list.vue
         detail.vue
      equip
         list.vue
         detail.vue
      other
         list.vue
         detail.vue

detail.vue是一个弹出窗体，list.vue中有个按钮点击弹出detail窗体。
打包配置是按照view下的一级目录进行分组，这些会打到一个包里。

dev环境是正确的，打包后在8.0.12下是正确的，8.0.13及8.0.14下都有问题。问题表现：
单独刷新某一个页面都是正确的，但是顺序点击页面，点到第三个时，点击按钮后detail不会弹出窗体。查看html内容后，发现取而代之是生成了一个元素。

抱歉，我不是专职的前端开发，对vite,vue都理解有限，只能描述发现的现象。

Reproduction

不太会弄

Steps to reproduce

No response

System Info

System:
    OS: Windows 10 10.0.17763
    CPU: (12) x64 Intel(R) Core(TM) i7-8700K CPU @ 3.70GHz
    Memory: 5.20 GB / 23.88 GB
  Binaries:
    Node: 24.14.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.8.2 - C:\Program Files\nodejs\npm.CMD
    pnpm: 10.33.0 - C:\Users\jiayp\AppData\Roaming\npm\pnpm.CMD
  Browsers:
    Chrome: 147.0.7727.117
    Internet Explorer: 11.0.17763.2989
  npmPackages:
    @vitejs/devtools: ^0.1.21 => 0.1.21
    @vitejs/plugin-legacy: ^8.0.0 => 8.0.1
    @vitejs/plugin-vue: ^6.0.5 => 6.0.6
    vite: 8.0.12 => 8.0.12

Used Package Manager

pnpm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[gitsult4n]

Looks like a chunk splitting regression and not a vue problem

A literal <detail> element in the html means the component resolved to undefined at render time
That happens when two modules sit in the same chunk with a circular import and one is still uninitialised when the other runs
Your grouping by first level directory under view is what decides those boundaries so the same code works in dev and breaks after build

Two builds to narrow it down

// vite.config.js
build: {
  rollupOptions: {
    output: { manualChunks: undefined },
  },
}

If the popup opens with grouping off the split is the trigger

npm i -D vite@8.0.12

If 8.0.12 is fine with the same config and 8.0.13 is not then it is a regression and worth an issue
A repro made with npm create vite@latest plus three folders each holding list.vue and detail.vue plus your manualChunks is enough for the maintainers

Workaround that holds either way
load the popup lazily so it never takes part in the cycle

import { defineAsyncComponent } from 'vue'

const Detail = defineAsyncComponent(() => import('./detail.vue'))

[jiayp]

非常感谢你的回复。 这个确实是打包的问题，和是否有同名组件应该没关系。 我修改了一些打包策略后，问题消失了。 8.0.12也不是没问题，只是这个场景没问题，在其他地方也出现了类似的问题。 ----------- Thank you very much for your reply. This is indeed a packaging issue, and it should have nothing to do with whether there are components with the same name. After I adjusted some packaging strategies, the problem disappeared. Version 8.0.12 is not entirely problem-free―it's just that this particular scenario works fine, while similar issues have appeared elsewhere.

…

________________________________ 发件人: Sultan , ***@***.***> 发送时间: 2026年8月18日 20:07 收件人: vitejs/vite ***@***.***> 抄送: 贾延平 ***@***.***>; Author ***@***.***> 主题: Re: [vitejs/vite] 不同目录下同名vue文件打包后导致错误行为 (Discussion #22546) Looks like a chunk splitting regression and not a vue problem A literal <detail> element in the html means the component resolved to undefined at render time That happens when two modules sit in the same chunk with a circular import and one is still uninitialised when the other runs Your grouping by first level directory under view is what decides those boundaries so the same code works in dev and breaks after build Two builds to narrow it down // vite.config.js build: { rollupOptions: { output: { manualChunks: undefined }, }, } If the popup opens with grouping off the split is the trigger npm i -D ***@***.*** If 8.0.12 is fine with the same config and 8.0.13 is not then it is a regression and worth an issue A repro made with npm create ***@***.*** plus three folders each holding list.vue and detail.vue plus your manualChunks is enough for the maintainers Workaround that holds either way load the popup lazily so it never takes part in the cycle import { defineAsyncComponent } from 'vue' const Detail = defineAsyncComponent(() => import('./detail.vue')) ― Reply to this email directly, view it on GitHub<#22546?email_source=notifications&email_token=AAFSRAKB57WDWK5BMR627Y35KRBI7A5CNFSNUABIM5UWIORPF5TWS5BNNB2WEL2ENFZWG5LTONUW63SDN5WW2ZLOOQXTCOBQGY2TMNZTUZZGKYLTN5XKMYLVORUG64VFMV3GK3TUVRTG633UMVZF6Y3MNFRWW#discussioncomment-18065673>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AAFSRALSS6IPZU7D473YSID5KRBI7AVCNFSNUABIKJSXA33TNF2G64TZHMZDKNZUHA2TIMRSHNCGS43DOVZXG2LPNY5TCMBRGU3TGMRRUF3AE>. Triage notifications, keep track of coding agent tasks and review pull requests on the go with GitHub Mobile for iOS<https://github.com/notifications/mobile/ios/AAFSRAKNIT2GZEN7QBJ7W335KRBI7A5CNFSNUABIM5UWIORPF5TWS5BNNB2WEL2ENFZWG5LTONUW63SDN5WW2ZLOOQXTCOBQGY2TMNZTUZZGKYLTN5XKMYLVORUG64VFMV3GK3TUVJTG633UMVZF62LPOM> and Android<https://github.com/notifications/mobile/android/AAFSRAIL4O77FPDE57UGL635KRBI7A5CNFSNUABIM5UWIORPF5TWS5BNNB2WEL2ENFZWG5LTONUW63SDN5WW2ZLOOQXTCOBQGY2TMNZTUZZGKYLTN5XKMYLVORUG64VFMV3GK3TUVZTG633UMVZF6YLOMRZG62LE>. Download it today! You are receiving this because you authored the thread.Message ID: ***@***.***>