Nuxt•2d ago

Monorepo using Nuxt/UI and TS ( + Vite)

I've suddenly gotten this error while building and I have no idea why this file gets compiled without TS. The source file has this, but it gets removed somehow? I'm noticing I'm lacking the knowledge to fix this and I figure it can't be an issue of Nuxt/UI since I've seen no reports about this. https://github.com/nuxt/ui/blame/v2.21.1/src/runtime/components/data/Table.vue ERROR(vue-tsc) Type annotations can only be used in TypeScript files. FILE /home/***/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@nuxt/ui/dist/runtime/components/data/Table.vue:96:129 94 | </td> 95 | <td v-for="(column, subIndex) in columns" :key="subIndex" :class="[ui.td.base, ui.td.padding, ui.td.color, ui.td.font, ui.td.size, column?.rowClass, row[column.key]?.class, column.key === 'select' && ui.checkbox.padding]">

96 | <slot v-if="modelValue && column.key === 'select' " name="select-data" :checked="isSelected(row)" :change="(ev: boolean) => onChangeCheckbox(ev, row)">

| ^^^^^^^ 97 | <UCheckbox 98 | :model-value="isSelected(row)" 99 | v-bind="ui.default.checkbox" Lmk if it's something obvious or if I need to make a sandbox to reproduce it somehow.

GitHub

Blaming ui/src/runtime/components/data/Table.vue at v2.21.1 · nuxt/ui

The Intuitive Vue UI Library powered by Reka UI & Tailwind CSS. - Blaming ui/src/runtime/components/data/Table.vue at v2.21.1 · nuxt/ui

2 Replies

kapa.ai•2d ago

Hi @Lil'Fat Nugget. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- This issue appears to be related to TypeScript annotations in Vue files and how they're being processed in your monorepo setup with Nuxt UI. The error you're seeing is because the TypeScript annotation (ev: boolean) in the Table.vue component is being processed as plain JavaScript during compilation. This happens when the Vue file isn't being properly recognized as a TypeScript file. Based on the knowledge sources, there are a few potential causes and solutions: Possible Causes 1. Missing TypeScript Configuration: Your project might not have the proper TypeScript configuration to process Vue files with TypeScript annotations. 2. Vue Plugin Configuration: The @vitejs/plugin-vue might not be correctly configured to handle TypeScript in Vue files. 3. Monorepo Structure: In a monorepo, each layer with a tsconfig.json should have nuxt prepare run to ensure correct type handling. Solutions 1. Ensure TypeScript Support in Vue Files: Make sure your Vue files with TypeScript are using the proper syntax:

   <script setup lang="ts">
   // TypeScript code here
   </script>

   <script setup lang="ts">
   // TypeScript code here
   </script>

The lang="ts" attribute is crucial for the Vue compiler to recognize TypeScript code. 2. Check Your tsconfig.json: Make sure your project extends the Nuxt-generated TypeScript configuration:

   {
     "extends": "./.nuxt/tsconfig.json"
   }

   {
     "extends": "./.nuxt/tsconfig.json"
   }

As mentioned in a GitHub issue, this is a requirement of @vitejs/plugin-vue because the Vue compiler needs type information. 3. Run nuxt prepare: In a monorepo setup, you need to run nuxt prepare in each layer that has a tsconfig.json to ensure types are correctly generated. 4. Check Vite Configuration: Ensure your Vite configuration properly includes the Vue plugin with TypeScript support:

   import { defineConfig } from 'vite'
   import vue from '@vitejs/plugin-vue'
   import ui from '@nuxt/ui/vite'

   export default defineConfig({
     plugins: [
       vue(),
       ui({
         // your UI configuration
       })
     ]
   })

   import { defineConfig } from 'vite'
   import vue from '@vitejs/plugin-vue'
   import ui from '@nuxt/ui/vite'

   export default defineConfig({
     plugins: [
       vue(),
       ui({
         // your UI configuration
       })
     ]
   })

5. Dependency Versions: Based on the error path, you're using pnpm with specific versions. Make sure all your TypeScript-related dependencies are compatible. The GitHub issue #31180 suggests there might be version conflicts in your dependencies. If these solutions don't resolve the issue, you might need to create a minimal reproduction to better diagnose the problem. The error is specifically occurring in the Table component from Nuxt UI, suggesting it might be related to how that component is being processed in your build pipeline. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2d ago

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

Gaming

Programming

Monorepo using Nuxt/UI and TS ( + Vite)

Did you find this page helpful?