Nuxt•4w ago

Radix direct auto-import breaking

Anyone has experience trouble using radix vue? So I installed the module on my nuxt application and tried to use the library. No matter what i do and how many times i reinstall the library the app breakes with the next error:

[plugin:vite:import-analysis] Importing directly from module entry-points is not allowed. [importing `radix-vue` from `components/app/metadata/squareOptions/meta/DialogOptions.vue`]
/Users/Documents/GitHub/myprojectlol/app/components/app/metadata/squareOptions/meta/DialogOptions.vue:126:133
124|  import _export_sfc from 'plugin-vue:export-helper'
125|  
126|  import { DialogRoot, DialogTrigger, DialogOverlay, DialogTitle, DialogClose, DialogDescription, DialogContent, DialogPortal } from 'radix-vue';
   |                                                                                                                                      ^
127|  export default /*#__PURE__*/_export_sfc(_sfc_main, [['render',_sfc_render],['__file',"/Users/joshuarodriguez/Docum

[plugin:vite:import-analysis] Importing directly from module entry-points is not allowed. [importing `radix-vue` from `components/app/metadata/squareOptions/meta/DialogOptions.vue`]
/Users/Documents/GitHub/myprojectlol/app/components/app/metadata/squareOptions/meta/DialogOptions.vue:126:133
124|  import _export_sfc from 'plugin-vue:export-helper'
125|  
126|  import { DialogRoot, DialogTrigger, DialogOverlay, DialogTitle, DialogClose, DialogDescription, DialogContent, DialogPortal } from 'radix-vue';
   |                                                                                                                                      ^
127|  export default /*#__PURE__*/_export_sfc(_sfc_main, [['render',_sfc_render],['__file',"/Users/joshuarodriguez/Docum

7 Replies

kapa.ai•4w ago

Hi @IsaacR943. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

IsaacR943OP•4w ago

This is the component:

<script setup>
import { 
  SquareX 
} from 'lucide-vue-next'

import { DialogRoot, DialogTrigger, DialogOverlay, DialogTitle, DialogClose, DialogDescription, DialogContent, DialogPortal } from '#components';
</script>
<template>
    <DialogRoot>
     <DialogTrigger @click.stop class="inline-block">
        <div class="pointer-events-none">
          <slot>Default Tag</slot>
        </div>
      </DialogTrigger>
      <DialogPortal>
        <DialogOverlay 
          class="bg-blackA9/50 backdrop-blur-sm data-[state=open]:animate-overlayShow fixed inset-0 z-30" 
        />
        <DialogContent
          class="data-[state=open]:animate-contentShow fixed top-[50%] left-[50%] max-h-[85vh] w-[90vw] max-w-[450px] translate-x-[-50%] translate-y-[-50%] rounded-[6px] bg-white p-[25px] shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none z-[100]"
        >
          <DialogTitle class="text-mauve12 m-0 text-[17px] font-semibold">
            <slot name="title">Title</slot>
          </DialogTitle>
          <DialogDescription class="text-mauve11 mt-[10px] mb-5 text-[15px] leading-normal">
             <slot name="description">description</slot>
          </DialogDescription>
             
          <DialogClose
            class="text-grass11 hover:bg-green4 focus:shadow-green7 absolute top-[10px] right-[10px] inline-flex h-[25px] w-[25px] appearance-none items-center justify-center focus:shadow-[0_0_0_2px] focus:outline-none"
            aria-label="Close"
          >
            <SquareX/>
          </DialogClose>
        </DialogContent>
      </DialogPortal>
    </DialogRoot>
  </template>

<script setup>
import { 
  SquareX 
} from 'lucide-vue-next'

import { DialogRoot, DialogTrigger, DialogOverlay, DialogTitle, DialogClose, DialogDescription, DialogContent, DialogPortal } from '#components';
</script>
<template>
    <DialogRoot>
     <DialogTrigger @click.stop class="inline-block">
        <div class="pointer-events-none">
          <slot>Default Tag</slot>
        </div>
      </DialogTrigger>
      <DialogPortal>
        <DialogOverlay 
          class="bg-blackA9/50 backdrop-blur-sm data-[state=open]:animate-overlayShow fixed inset-0 z-30" 
        />
        <DialogContent
          class="data-[state=open]:animate-contentShow fixed top-[50%] left-[50%] max-h-[85vh] w-[90vw] max-w-[450px] translate-x-[-50%] translate-y-[-50%] rounded-[6px] bg-white p-[25px] shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none z-[100]"
        >
          <DialogTitle class="text-mauve12 m-0 text-[17px] font-semibold">
            <slot name="title">Title</slot>
          </DialogTitle>
          <DialogDescription class="text-mauve11 mt-[10px] mb-5 text-[15px] leading-normal">
             <slot name="description">description</slot>
          </DialogDescription>
             
          <DialogClose
            class="text-grass11 hover:bg-green4 focus:shadow-green7 absolute top-[10px] right-[10px] inline-flex h-[25px] w-[25px] appearance-none items-center justify-center focus:shadow-[0_0_0_2px] focus:outline-none"
            aria-label="Close"
          >
            <SquareX/>
          </DialogClose>
        </DialogContent>
      </DialogPortal>
    </DialogRoot>
  </template>

kapa.ai•4w ago

---------------------- Based on the information provided in the knowledge sources, I don't have specific details about Radix Vue or its integration with Nuxt. However, I can provide some general insights about auto-imports in Nuxt that might be relevant to your issue. The error message you're seeing suggests that there's a problem with how the Radix Vue components are being imported. In Nuxt, there are specific ways to handle auto-imports, especially for third-party packages. Here are a few suggestions based on Nuxt's auto-import functionality: 1. Check if there's a Nuxt module for Radix Vue. If there is, it might handle the auto-imports for you. 2. If there isn't a specific module, you might need to configure auto-imports for Radix Vue manually. You can do this in your nuxt.config.ts file. According to the Auto-import from Third-Party Packages (https://nuxt.com/docs/guide/concepts/auto-imports#auto-import-from-third-party-packages) documentation, you can set it up like this:

   export default defineNuxtConfig({
     imports: {
       presets: [
         {
           from: 'radix-vue',
           imports: ['DialogRoot', 'DialogTrigger', 'DialogOverlay', 'DialogTitle', 'DialogClose', 'DialogDescription', 'DialogContent', 'DialogPortal']
         }
       ]
     }
   })

   export default defineNuxtConfig({
     imports: {
       presets: [
         {
           from: 'radix-vue',
           imports: ['DialogRoot', 'DialogTrigger', 'DialogOverlay', 'DialogTitle', 'DialogClose', 'DialogDescription', 'DialogContent', 'DialogPortal']
         }
       ]
     }
   })

3. If auto-imports are not working, you might need to import the components explicitly. You can do this using the #components alias, as mentioned in the Direct Imports (https://nuxt.com/docs/guide/directory-structure/components#direct-imports) documentation. 4. If the issue persists, you might need to add Radix Vue to the build.transpile array in your Nuxt config, as suggested in the Transpiling Libraries (https://nuxt.com/docs/guide/concepts/esm#transpiling-libraries) section:

   export default defineNuxtConfig({
     build: {
       transpile: ['radix-vue']
     }
   })

   export default defineNuxtConfig({
     build: {
       transpile: ['radix-vue']
     }
   })

If these suggestions don't resolve your issue, you might need to check if there are any compatibility issues between the versions of Nuxt and Radix Vue you're using, or if there are any known issues with using Radix Vue in a Nuxt project. Remember, these are general suggestions based on Nuxt's auto-import and module system. For specific issues with Radix Vue, you might need to consult their documentation or community forums. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

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

HugoRCD•3w ago

Do you have more info to give? The nuxt.config.ts, package.json? And have you tried the new radix-ui vue with RekaUI? @IsaacR943

IsaacR943OP•3w ago

ended up doing my own component with claude

danielroe•3w ago

this sounds like a bug - perhaps nuxt is trying to protect against importing radix3

Gaming

Programming

Radix direct auto-import breaking

Did you find this page helpful?