Cannot split a chunk that has already been edited #5077
Description
Environment
- OS: Windows 11 x64
- Node: 22.16.0
- Nuxt: 4.0.0+ (I tried 4.0.0, 4.0.3, 4.1.0, 4.1.2)
- Package Manager: pnpm@10.17.1
Is this bug related to Nuxt or Vue?
Nuxt
Package
v4.x
Version
v4.0.0
Reproduction
https://github.com/joezimjs/kempfer-base/tree/nuxt-ui-migration
pnpm run build or pnpm run dev and go to /form page.
Description
When I try to run the build or view a page with a Nuxt UI form on it, I receive the "Cannot split a chunk that has already been edited" error. Here's the full error from the build:
[nuxi 4:19:36 PM] ERROR Nuxt Build Error: [nuxt:server-only-component-transform] Cannot split a chunk that has already been edited (196:18 – "<slot name="item" :item="item" :index="index">
<slot name="item-leading" :item="item" :index="index">
<UIcon v-if="isSelectItem(item) && item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: [props.ui?.itemLeadingIcon, item.ui?.itemLeadingIcon] })" />
<UAvatar v-else-if="isSelectItem(item) && item.avatar" :size="item.ui?.itemLeadingAvatarSize || props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: [props.ui?.itemLeadingAvatar, item.ui?.itemLeadingAvatar] })" />
<UChip
v-else-if="isSelectItem(item) && item.chip"
:size="item.ui?.itemLeadingChipSize || props.ui?.itemLeadingChipSize || ui.itemLeadingChipSize()"
inset
standalone
v-bind="item.chip"
:class="ui.itemLeadingChip({ class: [props.ui?.itemLeadingChip, item.ui?.itemLeadingChip] })"
/>
</slot>
<SelectItemText :class="ui.itemLabel({ class: [props.ui?.itemLabel, isSelectItem(item) && item.ui?.itemLabel] })">
<slot name="item-label" :item="item" :index="index">
{{ isSelectItem(item) ? get(item, props.labelKey) : item }}
</slot>
</SelectItemText>
<span :class="ui.itemTrailing({ class: [props.ui?.itemTrailing, isSelectItem(item) && item.ui?.itemTrailing] })">
<slot name="item-trailing" :item="item" :index="index" />
<SelectItemIndicator as-child>
<UIcon :name="selectedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, isSelectItem(item) && item.ui?.itemTrailingIcon] })" />
</SelectItemIndicator>
</span>
</slot>")
file: PATH_TO_PROJECT/kempfer-base/node_modules/.pnpm/@nuxt+ui@4.0.0_@babel+parse_23fbadba28c9a18ec2ca13abc705b265/node_modules/@nuxt/ui/dist/runtime/components/Select.vue
at MagicString._splitChunk (/PATH_TO_PROJECT/kempfer-base/node_modules/.pnpm/magic-string@0.30.19/node_modules/magic-string/dist/magic-string.es.mjs:1063:10)
at MagicString._split (/PATH_TO_PROJECT/kempfer-base/node_modules/.pnpm/magic-string@0.30.19/node_modules/magic-string/dist/magic-string.es.mjs:1048:43)
at MagicString.appendLeft (/PATH_TO_PROJECT/kempfer-base/node_modules/.pnpm/magic-string@0.30.19/node_modules/magic-string/dist/magic-string.es.mjs:476:8)
at T.callback (/PATH_TO_PROJECT/kempfer-base/node_modules/.pnpm/nuxt@4.0.3_@netlify+blobs@9_d13b8a4e9c6a6c33782c630bf13b3359/node_modules/nuxt/dist/index.mjs:2554:15)
at T.visit (/PATH_TO_PROJECT/kempfer-base/node_modules/.pnpm/ultrahtml@1.6.0/node_modules/ultrahtml/dist/index.js:1:2604)
at T.visit (/PATH_TO_PROJECT/kempfer-base/node_modules/.pnpm/ultrahtml@1.6.0/node_modules/ultrahtml/dist/index.js:1:2725)
at async Promise.all (index 1)
at async T.visit (/PATH_TO_PROJECT/kempfer-base/node_modules/.pnpm/ultrahtml@1.6.0/node_modules/ultrahtml/dist/index.js:1:2739)
at async Promise.all (index 5)
at async T.visit (/PATH_TO_PROJECT/kempfer-base/node_modules/.pnpm/ultrahtml@1.6.0/node_modules/ultrahtml/dist/index.js:1:2739)
ELIFECYCLE Command failed with exit code 1.
I've narrowed it down to the Select component because removing it from the form eliminates the error. You can recreate the issue from this repo branch: https://github.com/joezimjs/kempfer-base/tree/nuxt-ui-migration
Additional context
No response