Nuxt•7d ago

unknown word

I use the template for shadcn dashboard (https://github.com/dianprata/nuxt-shadcn-dashboard) When I install packages and run the app I got this error: I really don't understand why

[10:54:30 PM]  ERROR  Internal server error: [postcss] /Users/corentinc/project2024/my-dashboard-app/my-dashboard-app/pages/index.vue?vue&type=style&index=0&scoped=02281a80&lang.css:3:10: Unknown word Activity,
  Plugin: vite:css
  File: /Users/corentinc/project2024/my-dashboard-app/my-dashboard-app/pages/index.vue?vue&type=style&index=0&scoped=02281a80&lang.css:3:9
  1  |  <script setup lang="ts">
  2  |  import NumberFlow from '@number-flow/vue'
  3  |  import { Activity, CreditCard, DollarSign, Users } from 'lucide-vue-next'
     |           ^
  4  |
  5  |  const dataCard = ref({

 WARN  [Vue Router warn]: No match found for location with path "/dev-sw.js?dev-sw"


 WARN  [Vue Router warn]: No match found for location with path "/dev-sw.js"


 WARN  [Vue Router warn]: No match found for location with path "/dev-sw.js?dev-sw"


 WARN  [Vue Router warn]: No match found for location with path "/dev-sw.js"

[10:54:30 PM]  ERROR  Internal server error: [postcss] /Users/corentinc/project2024/my-dashboard-app/my-dashboard-app/pages/index.vue?vue&type=style&index=0&scoped=02281a80&lang.css:3:10: Unknown word Activity,
  Plugin: vite:css
  File: /Users/corentinc/project2024/my-dashboard-app/my-dashboard-app/pages/index.vue?vue&type=style&index=0&scoped=02281a80&lang.css:3:9
  1  |  <script setup lang="ts">
  2  |  import NumberFlow from '@number-flow/vue'
  3  |  import { Activity, CreditCard, DollarSign, Users } from 'lucide-vue-next'
     |           ^
  4  |
  5  |  const dataCard = ref({

 WARN  [Vue Router warn]: No match found for location with path "/dev-sw.js?dev-sw"


 WARN  [Vue Router warn]: No match found for location with path "/dev-sw.js"


 WARN  [Vue Router warn]: No match found for location with path "/dev-sw.js?dev-sw"


 WARN  [Vue Router warn]: No match found for location with path "/dev-sw.js"

GitHub

GitHub - dianprata/nuxt-shadcn-dashboard: Template Dashboard with N...

Template Dashboard with Nuxt 3 + Shadcn + UnoCSS . Contribute to dianprata/nuxt-shadcn-dashboard development by creating an account on GitHub.

3 Replies

kapa.ai•7d ago

Hi @Corentin_dev. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The error you're encountering is related to PostCSS processing your Vue component's CSS. The error message indicates that PostCSS is trying to parse JavaScript code as CSS, which is causing the "Unknown word Activity" error. The Problem Looking at your error message, the issue is that PostCSS is trying to process your JavaScript import statement as CSS:

import { Activity, CreditCard, DollarSign, Users } from 'lucide-vue-next'

import { Activity, CreditCard, DollarSign, Users } from 'lucide-vue-next'

This is happening because your style block in index.vue is likely not properly separated from your script block. Solution Make sure your Vue component has proper structure with clearly separated script, template, and style blocks. Your style block should be properly defined with opening and closing tags:

<script setup lang="ts">
import NumberFlow from '@number-flow/vue'
import { Activity, CreditCard, DollarSign, Users } from 'lucide-vue-next'

const dataCard = ref({
  // your data
})
</script>

<template>
  <!-- your template -->
</template>

<style scoped>
/* Your CSS styles here */
</style>

<script setup lang="ts">
import NumberFlow from '@number-flow/vue'
import { Activity, CreditCard, DollarSign, Users } from 'lucide-vue-next'

const dataCard = ref({
  // your data
})
</script>

<template>
  <!-- your template -->
</template>

<style scoped>
/* Your CSS styles here */
</style>

The issue is that PostCSS is trying to process your JavaScript code as CSS because the style section might not be properly defined or there might be a syntax error in your component structure. About the Vue Router Warnings The Vue Router warnings about /dev-sw.js are unrelated to your main error. These warnings are common and typically occur when service workers or development tools are trying to access routes that don't exist in your application. They can usually be safely ignored as mentioned in a similar issue on GitHub. If you continue to have issues with PostCSS configuration, you might want to check your Nuxt configuration for PostCSS plugins as described in the Nuxt documentation on styling. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7d ago

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

Corentin_devOP•7d ago

the style si separated and I use the template shadcn dashboard without any modification

Gaming

Programming

unknown word

Did you find this page helpful?