Nuxt•3w ago

Pre-transform error: Duplicate attribute.

So, i get this error while using dev server ( not tested on build ). I think i got this after adding shadcn/ui-nuxt Form component to my project.

8 Replies

kapa.ai•3w ago

Hi @𝚝𝚒𝚖𝚞𝚣𝚔𝚊𝚜. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the knowledge sources provided, I don't have specific information about a "Pre-transform error: Duplicate attribute" error related to shadcn/ui-nuxt Form component. However, I can share some insights about hydration mismatches and attribute errors in Nuxt that might be related to your issue: Several of the knowledge sources mention hydration mismatches in Nuxt applications, particularly when using form components. For example, one Stack Overflow post describes hydration errors with VeeValidate and Pinia in Nuxt forms, where attributes rendered on the server didn't match what was expected on the client:

[Vue warn]: Hydration attribute mismatch on <input class="p-inputtext p-component w-full" id="documentId" placeholder="Escribe tu documento de identidad" maxlength="15" data-pc-name="inputtext" data-pc-section="root">
  - rendered on server: (not rendered)
  - expected on client: value=""

[Vue warn]: Hydration attribute mismatch on <input class="p-inputtext p-component w-full" id="documentId" placeholder="Escribe tu documento de identidad" maxlength="15" data-pc-name="inputtext" data-pc-section="root">
  - rendered on server: (not rendered)
  - expected on client: value=""

The solution in that case involved: 1. Not using Date.now() as initial value in ref() constants 2. Removing certain validation functions (like Zod's refine function) There's also a recent Nuxt PR (#30151) that fixed issues with component teleporting by "Using useId is safer compared to the previous implementation which was relying on a hash based on the location of the component -> calling it twice could lead to bugs." For your specific issue with shadcn/ui-nuxt Form component, I would recommend: 1. Check if you have duplicate attributes in your form components 2. Ensure you're not initializing reactive values with dynamic content that might differ between server and client 3. Try updating to the latest version of shadcn/ui-nuxt as it might contain fixes If the problem persists, you might need to provide more specific error details or check the shadcn/ui-nuxt GitHub repository for known issues. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@606175478184673300> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

𝚝𝚒𝚖𝚞𝚣𝚔𝚊𝚜OP•3w ago

@kapa.ai ERROR Pre-transform error: Duplicate attribute. 11:48:08 AM Plugin: vite-plugin-vue-inspector File: D:/Projects/Coding/Sites-WebApps/Frontend/pages/dashboard.vue?macro=true

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on your error message, I can see you're encountering a "Pre-transform error: Duplicate attribute" specifically related to the vite-plugin-vue-inspector plugin in your Nuxt project. This error is coming from the Vue Inspector plugin that's part of the Nuxt DevTools. According to the knowledge sources, the Vue Inspector is integrated through vite-plugin-inspect, which allows you to inspect transformation steps of Vite Inspect feature in Nuxt DevTools. The error suggests that in your dashboard.vue file, you have duplicate attributes on one or more elements. This is causing the pre-transform process to fail during development. A similar issue was mentioned in a GitHub issue where Firefox was showing MIME type errors with Vite and Vue components during development, though that was specifically about stylesheet loading rather than duplicate attributes. To fix this issue: 1. Check your dashboard.vue file for any HTML elements that might have the same attribute defined twice 2. Look for components that might be adding the same props or attributes multiple times 3. If you're using macros (as indicated by ?macro=true in the error), check if they're generating duplicate attributes If you're using shadcn/ui-nuxt Form components as mentioned in your previous question, check if there are any conflicts between your custom attributes and those added by the component library. This error only appears during development and might not affect your production build, but it's still important to fix to ensure proper component rendering. If you need more specific help, you might want to share the relevant code from your dashboard.vue file where the error is occurring. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@606175478184673300> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

𝚝𝚒𝚖𝚞𝚣𝚔𝚊𝚜OP•3w ago

@kapa.ai is it possible to close shadcn-nuxt Dialog from the code and not in <DialogClose> tag

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the knowledge sources provided, I don't have specific information about shadcn-nuxt Dialog component's programmatic closing methods. However, I can share information about similar functionality in Nuxt UI's Modal component, which might be applicable or provide guidance for your use case. In Nuxt UI, you can programmatically control modals using the useOverlay composable. According to the documentation:

// Modern approach in Nuxt UI v3
const overlay = useOverlay()
const modal = overlay.create(ModalExampleComponent)

async function openModal() {
  const result = await modal.open(ModalExampleComponent, {
    count: count.value
  })
  
  if (result) {
    // Handle result
  }
}

// Modern approach in Nuxt UI v3
const overlay = useOverlay()
const modal = overlay.create(ModalExampleComponent)

async function openModal() {
  const result = await modal.open(ModalExampleComponent, {
    count: count.value
  })
  
  if (result) {
    // Handle result
  }
}

For closing modals programmatically, Nuxt UI components emit a close event:

// Inside your modal component
const emit = defineEmits<{ close: [boolean] }>()

// To close the modal
emit('close', false) // or any value you want to return

// Inside your modal component
const emit = defineEmits<{ close: [boolean] }>()

// To close the modal
emit('close', false) // or any value you want to return

Nuxt UI Modal documentation shows that you can also control the open state using a ref:

<script setup lang="ts">
const open = ref(false)
</script>

<template>
  <UModal v-model:open="open">
    <!-- Modal content -->
  </UModal>
</template>

<script setup lang="ts">
const open = ref(false)
</script>

<template>
  <UModal v-model:open="open">
    <!-- Modal content -->
  </UModal>
</template>

For shadcn-nuxt specifically, since it's based on similar patterns, you might want to try: 1. Using a ref to control the open state with v-model 2. Creating a method that sets this ref to false 3. Calling this method from wherever you need to close the dialog If these approaches don't work for shadcn-nuxt Dialog, I'd recommend checking their specific documentation or GitHub repository for programmatic control methods, as the implementation details might differ from Nuxt UI. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@606175478184673300> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Pre-transform error: Duplicate attribute.

Did you find this page helpful?