N
Nuxt•3mo ago
kb

Nuxt 4.1.1 > Causing tree shake error

This was OK on 4.0.3 but now on build im getting an error ive never seen before; 
onMounted(() => {
  if (import.meta.client) {
    const mediaQuery = window.matchMedia('(min-width: 960px)')
    const update = () => {
      isDesktopRef.value = mediaQuery.matches
    }
    update()
    mediaQuery.addEventListener('change', update)
    onBeforeUnmount(() => mediaQuery.removeEventListener('change', update))
  }
})
onMounted(() => {
  if (import.meta.client) {
    const mediaQuery = window.matchMedia('(min-width: 960px)')
    const update = () => {
      isDesktopRef.value = mediaQuery.matches
    }
    update()
    mediaQuery.addEventListener('change', update)
    onBeforeUnmount(() => mediaQuery.removeEventListener('change', update))
  }
})
build error 
[nuxi 9:59:01 AM]  ERROR  Nuxt Build Error: [nuxt:tree-shake-composables:transform] Cannot split a chunk that has already been edited (40:8 – "onMounted(() => {
      if (false) {
        const mediaQuery = (void 0).matchMedia("(min-width: 960px)");
        const update = () => {
          isDesktopRef.value = mediaQuery.matches;
        };
        update();
        mediaQuery.addEventListener("change", update);
        onBeforeUnmount(() => mediaQuery.removeEventListener("change", update));
      }
    })")
file: /Users/x/code/x-website/app/components/ui/x/x/x.vue
[nuxi 9:59:01 AM]  ERROR  Nuxt Build Error: [nuxt:tree-shake-composables:transform] Cannot split a chunk that has already been edited (40:8 – "onMounted(() => {
      if (false) {
        const mediaQuery = (void 0).matchMedia("(min-width: 960px)");
        const update = () => {
          isDesktopRef.value = mediaQuery.matches;
        };
        update();
        mediaQuery.addEventListener("change", update);
        onBeforeUnmount(() => mediaQuery.removeEventListener("change", update));
      }
    })")
file: /Users/x/code/x-website/app/components/ui/x/x/x.vue
I cant personally see from the changelogs what it might be, although did find this https://github.com/nuxt/ui/issues/4900 so possibly related to the onBeforeUnmount inside the onMounted ?
4 Replies
kapa.ai
kapa.ai•3mo ago
Hi @kb. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You're likely hitting Nuxt 4’s “tree-shake composables” transform on the server build. By default, Nuxt removes Vue lifecycle composables such as onMounted and onBeforeUnmount from the server bundle. Combining that transform with a nested onBeforeUnmount inside an onMounted callback (plus the import.meta.client guard being folded to false at build time) can trip the transformer and cause the “Cannot split a chunk that has already been edited” error. [optimization] Workarounds: - Hoist both the client guard and lifecycle hooks to the top level (don’t nest onBeforeUnmount inside onMounted): 
if (import.meta.client) {
  const mediaQuery = window.matchMedia('(min-width: 960px)')
  const update = () => { isDesktopRef.value = mediaQuery.matches }

  onMounted(() => {
    update()
    mediaQuery.addEventListener('change', update)
  })

  onBeforeUnmount(() => {
    mediaQuery.removeEventListener('change', update)
  })
}
if (import.meta.client) {
  const mediaQuery = window.matchMedia('(min-width: 960px)')
  const update = () => { isDesktopRef.value = mediaQuery.matches }

  onMounted(() => {
    update()
    mediaQuery.addEventListener('change', update)
  })

  onBeforeUnmount(() => {
    mediaQuery.removeEventListener('change', update)
  })
}
- If this component is client-only, rename it with the .client suffix to bypass SSR and the server tree-shake entirely. [Client components] - As a temporary fallback, you can adjust optimization.treeShake.composables.server in nuxt.config to stop shaking these hooks while you investigate (they’re included by default). [optimization] I don’t see a specific 4.1.1 changelog entry for this, but the default server-side tree-shaking of lifecycle hooks explains the behavior. [optimization] ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3mo ago
<@310160452221140996> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
kb
kbOP•3mo ago
ta duck
SamKaizen
SamKaizen•3mo ago
downgrading nuxt to 4.1.0 temporarily works

Did you find this page helpful?