N
Nuxt•3mo ago
Jox

Problems with 4.1.1 and reka-ui?

Has anyone had problems with Nuxt 4.1.1 and reka-ui? Our build fails when using 4.1.1 and reka-ui. 
#10 88.44 [nuxi]  ERROR  Nuxt Build Error: [commonjs--resolver] Cannot split a chunk that has already been edited (58:6 – "onMounted(() => {
#10 88.44       const panelData = panelDataRef.value;
#10 88.44       registerPanel(panelData);
#10 88.44       onUnmounted(() => {
#10 88.44         unregisterPanel(panelData);
#10 88.44       });
#10 88.44     })")
#10 88.44 file: /usr/src/app/node_modules/reka-ui/dist/Splitter/SplitterPanel.js
#10 88.44 
#10 88.44     at MagicString._splitChunk (node_modules/magic-string/dist/magic-string.es.mjs:1059:10)
#10 88.44     at MagicString._split (node_modules/magic-string/dist/magic-string.es.mjs:1044:43)
#10 88.44     at MagicString.update (node_modules/magic-string/dist/magic-string.es.mjs:785:8)
#10 88.44     at MagicString.overwrite (node_modules/magic-string/dist/magic-string.es.mjs:765:15)
#10 88.44     at Object.enter (node_modules/nuxt/dist/index.mjs:3892:15)
#10 88.44     at Object.enter (node_modules/oxc-walker/dist/index.mjs:423:24)
#10 88.44     at SyncWalker.visit (node_modules/estree-walker/src/sync.js:65:16)
#10 88.44     at SyncWalker.visit (node_modules/estree-walker/src/sync.js:107:12)
#10 88.44     at SyncWalker.visit (node_modules/estree-walker/src/sync.js:100:19)
#10 88.44     at SyncWalker.visit (node_modules/estree-walker/src/sync.js:107:12)
#10 88.44 [nuxi]  ERROR  Nuxt Build Error: [commonjs--resolver] Cannot split a chunk that has already been edited (58:6 – "onMounted(() => {
#10 88.44       const panelData = panelDataRef.value;
#10 88.44       registerPanel(panelData);
#10 88.44       onUnmounted(() => {
#10 88.44         unregisterPanel(panelData);
#10 88.44       });
#10 88.44     })")
#10 88.44 file: /usr/src/app/node_modules/reka-ui/dist/Splitter/SplitterPanel.js
#10 88.44 
#10 88.44     at MagicString._splitChunk (node_modules/magic-string/dist/magic-string.es.mjs:1059:10)
#10 88.44     at MagicString._split (node_modules/magic-string/dist/magic-string.es.mjs:1044:43)
#10 88.44     at MagicString.update (node_modules/magic-string/dist/magic-string.es.mjs:785:8)
#10 88.44     at MagicString.overwrite (node_modules/magic-string/dist/magic-string.es.mjs:765:15)
#10 88.44     at Object.enter (node_modules/nuxt/dist/index.mjs:3892:15)
#10 88.44     at Object.enter (node_modules/oxc-walker/dist/index.mjs:423:24)
#10 88.44     at SyncWalker.visit (node_modules/estree-walker/src/sync.js:65:16)
#10 88.44     at SyncWalker.visit (node_modules/estree-walker/src/sync.js:107:12)
#10 88.44     at SyncWalker.visit (node_modules/estree-walker/src/sync.js:100:19)
#10 88.44     at SyncWalker.visit (node_modules/estree-walker/src/sync.js:107:12)
Works fine in Nuxt 4.1.0. I don't know if it's a Nuxt or reka issue?
4 Replies
kapa.ai
kapa.ai•3mo ago
Hi @Jox. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes—this is a known issue in Nuxt 4.1.1 related to the new composables tree-shaking transform. It triggers build failures when it encounters patterns like onMounted(() => { ... onUnmounted(() => {}) ... }) inside dependencies (e.g., reka-ui), causing “Cannot split a chunk that has already been edited” errors. Downgrading to Nuxt 4.1.0 is the recommended workaround until a patch is released. [Nuxt 4.1.1 error] Similar errors were reported with Headless UI and user code using nested lifecycle hooks; maintainers acknowledged it’s a bug and plan to fix by suppressing this transform in these cases. [Nuxt 4.1.1 error] ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3mo ago
<@525765413322227742> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
gabrielstuff
gabrielstuff•3mo ago
I think you try to use rolldown. 
onMounted(() => {
#10 88.44       const panelData = panelDataRef.value;
#10 88.44       registerPanel(panelData);
#10 88.44       onUnmounted(() => {
#10 88.44         unregisterPanel(panelData);
#10 88.44       });
#10 88.44     })")
onMounted(() => {
#10 88.44       const panelData = panelDataRef.value;
#10 88.44       registerPanel(panelData);
#10 88.44       onUnmounted(() => {
#10 88.44         unregisterPanel(panelData);
#10 88.44       });
#10 88.44     })")
This is not ok to do. Splitter: https://github.com/unovue/reka-ui/blob/v2/packages/core/src/Splitter/SplitterPanel.vue#L129
GitHub
reka-ui/packages/core/src/Splitter/SplitterPanel.vue at v2 · unovu...
An open-source UI component library for building high-quality, accessible design systems and web apps for Vue. Previously Radix Vue - unovue/reka-ui
Quantix
Quantix•3mo ago
the ai actually got it right in this case, a fix was pushed to the repo after 4.1.1 but has not been released yet i'd hold off until the next patch release The fix: https://github.com/nuxt/nuxt/commit/f99eac516aa5bb151cc5ca2d57addf5f2152a4ef The issue: https://github.com/nuxt/nuxt/issues/33151

Did you find this page helpful?