Adding package leads to build errors Code Unable to Build - Nuxt Build Error: [vite:build-import-analysis] Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files

[nosizejosh]

Adding this package to my code leads to errors and prevents build. more on this error on this nuxt issue here https://github.com/nuxt/nuxt/issues/26011

Version

---

• Operating System: Windows_NT
• Node Version: v20.11.1
• Nuxt Version: 3.10.3
• CLI Version: 3.10.1
• Nitro Version: 2.9.1
• Package Manager: npm@10.4.0
• Builder: -
• User Config: runtimeConfig, devtools, modules, ui, css, app, supabase
• Runtime Modules: @nuxtjs/supabase@1.1.6, @vueuse/nuxt@10.9.0, @pinia/nuxt@0.5.1, @nuxt/ui@2.14.1, @pinia-plugin-persistedstate/nuxt@1.2.0, nuxt-icon@0.6.8, nuxt-security@1.2.1

• Build Modules: -

[vejja]

Hi @nosizejosh

According to your original bug report, your file D:/proj/components/details/Index.vue:205:64 indeed contains invalid javascript in the unMounted hook It could potentially be related to removeLoggers, would you be ok to share your original code in the unMounted hook? It looks like vite transformed your original code.

[nosizejosh]

hello @vejja

let cardServicesSubscription;
onMounted(async () => {
    // fetching here removes delay and showing of empty content
    const { data: card, error } = await fetchFullCard(selectedPipelineListCard.value.id, selectedPipelineList.value.id, getTenantProfile().id)
    if (card) {
        selectedPipelineListCard.value = card // set store selected card to the fresh full card
        loading.value = false
    }
    if (error) {
        console.log("🚀 ~ error:", error)
        loading.value = false // end loading
        showCardDetailsModal.value = false // hide slide over
    }
    cardServicesSubscription = cardServiceRealtimeSubscription(boardStore)
    console.log("🚀 ~ onMounted ~ cardServicesSubscription:", cardServicesSubscription)
})

onUnmounted(() => {
    removeCardServiceSubscription(cardServicesSubscription)
    console.log("🚀 ~ onUnmounted ~ removeCardServiceSubscription(cardServicesSubscription):", removeCardServiceSubscription(cardServicesSubscription))
});

[vejja]

It's an upstream issue with https://github.com/Talljack/unplugin-remove.git Will file a report there

In the meantime, can you try disable the functionality in nuxt.config.ts

export default defineNuxtConfig({
  security: {
    removeLoggers: false
  }
})

And let me know if it works ?

[Baroshem]

Thanks @vejja for taking care of it!

@nosizejosh let us know if that works for you

[nosizejosh]

@vejja Thanks for the quick response.

Yes! build passed on both local and prod server.

Thank you for the package ( though I am now trying to understand how to really use it)

Will keep this open until a final resolution.

[vejja]

No problems @nosizejosh ! FYI removeLoggers is a small additional utility to the core of Nuxt-Security that removes console.log outputs in production. We are using the unplugin-remove package to do so but apparently there is a bug there and I think it is related to emojis. By setting removeLoggers: false in the config, we are not purging the browser console from your logs, but the rest of the Nuxt-Security core is still active.

In summary, you are good to go with this setup. Just remember that you may want to clean up your logs in your final production build.

[vejja]

@Baroshem FYI upstream was fixed today

[Baroshem]

Awesome, thanks @vejja !

I will add a bump of the package on our side and release it with the upcoming 1.3.0 release :)