unovue / shadcn-vue

Vue port of shadcn-ui
https://www.shadcn-vue.com/
MIT License
5.23k stars 309 forks source link

[Bug]: Deployment Issue with shadcn-vue in Production #879

Closed michaelreinhard1 closed 1 week ago

michaelreinhard1 commented 1 week ago

Reproduction

https://stackblitz.com/edit/github-i4vsqf?file=app%2Fpages%2Fsettings%2Fnotifications.vue

Describe the bug


EDIT: Right after writing this I thought of something that could help. I was using some components from ~/lib/registry/new-york/ui. This was someting I copied from shadcn-vue examples I believe. I removed all the components from ~/lib/registry/new-york/ui and then noticed this warning:

afbeelding Maybe this warning was there all the time but I didn't catch it. Is this because I'm using the /app folder structure?


Hi, I’m unable to deploy my Nuxt project to production using shadcn-vue. I tried both Cloudflare Pages using Nuxthub and Vercel. In development mode, I’m getting the following warnings for every component

afbeelding

During production deployment, I consistently receive this error:

afbeelding afbeelding

Initially I imported the component like said in the docs: import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'

After the build errors I tried using different import method like this:

import Alert from '@/components/ui/alert/Alert.vue'
import AlertTitle from '@/components/ui/alert/AlertTitle.vue'
import AlertDescription from '@/components/ui/alert/AlertDescription.vue'

I'm using Nuxt with the /app folder:

// nuxt.config.ts
future: {
    compatibilityVersion: 4
  },
compatibilityDate: '2024-07-30',

Here’s my components.json:

{
  "$schema": "https://shadcn-vue.com/schema.json",
  "style": "new-york",
  "typescript": true,
  "tsConfigPath": ".nuxt/tsconfig.json",
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "app/assets/css/tailwind.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "framework": "nuxt",
  "aliases": {
    "components": "@/components",
    "utils": "~/lib/utils"
  }
}

The @/ alias works for components, but I had to use ~/ for utils or the utils couldnt be found I tried both @ and ~ for components imports but the error persists.

Can someone help me understand if the /app folder structure is causing these issues, or if I’m doing something else wrong? Thanks in advance!

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (24) x64 AMD Ryzen 9 7900X3D 12-Core Processor          
    Memory: 6.14 GB / 31.21 GB
  Binaries:
    Node: 20.15.1 - C:\Program Files\nodejs\node.EXE
    npm: 10.8.1 - ~\node_modules\.bin\npm.CMD
    pnpm: 9.4.0 - ~\AppData\Local\pnpm\pnpm.EXE
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    @vueuse/core: ^11.1.0 => 11.1.0 
    nuxt: ^3.14.159 => 3.14.159 
    radix-vue: ^1.9.8 => 1.9.8 
    shadcn-nuxt: ^0.11.2 => 0.11.2

Contributes

sadeghbarati commented 1 week ago

You are using Nuxt compatibilityVersion 4 so, shadcn-nuxt default componentDir must change

- componentDir: './components/ui',
+ componentDir: './app/components/ui',
michaelreinhard1 commented 1 week ago

You are using Nuxt compatibilityVersion 4 so, shadcn-nuxt default componentDir must change

- componentDir: './components/ui',
+ componentDir: './app/components/ui',

Thank you! Makes sense, where should I change this? Which file? Can't seem to find it.

sadeghbarati commented 1 week ago

in nuxt.config.ts

shadcn options

michaelreinhard1 commented 1 week ago

in nuxt.config.ts

shadcn options

Thank you so much for helping me! I changed the componentDir path. Locally I don't have the "Two component files resolving to the same name" and "ENOENT: no such file or directory, scandir" warnings anymore.

However on production I still have this "ENOENT: no such file or directory"

afbeelding afbeelding

Here is my nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    '@nuxthub/core',
    'nuxt-auth-utils',
    '@nuxt/eslint',
    '@nuxt/image',
    '@vueuse/nuxt',
    '@nuxt/fonts',
    '@nuxtjs/tailwindcss',
    'shadcn-nuxt',
    '@nuxtjs/color-mode',
    '@nuxt/icon'
  ],
  imports: {
    dirs: [
      '../shared/utils',
      '../shared/types',
      '../shared/constants'
    ]
  },
  devtools: {
    enabled: true
  },
  colorMode: {
    // preference: 'dark',
    classSuffix: ''
  },
  runtimeConfig: {
    oauth: {
      // provider in lowercase (gitHub, google, etc.)
      spotify: {
        clientId: process.env.NUXT_OAUTH_SPOTIFY_CLIENT_ID,
        clientSecret: process.env.NUXT_OAUTH_SPOTIFY_CLIENT_SECRET,
        scope: [
          'playlist-modify-public',
          'playlist-read-collaborative',
          'playlist-modify-private',
          'user-read-email'
        ]
      }
    },
    // The private keys which are only available within server-side
    logsnagToken: '',
    logsnagProject: '',
    plunkApiKey: '',
    stripeWebhookSecret: '',
    stripeSecretKey: '',
    stripeProductFree: '',
    stripeProductCuratorMonthly: '',
    stripeProductCuratorYearly: '',
    stripeProductPro: '',
    stripeProductProMonthly: '',
    stripeProductProYearly: '',
    stripeProductPayAsYouGo: '',
    paddleApiKey: '',
    paddle: {
      api_key: process.env.NUXT_PADDLE_API_KEY
    },
    // Keys within public, will be also exposed to the client-side
    public: {
      paddleVendorId: ''
    }
  },
  // nuxt.config.ts
  future: {
    compatibilityVersion: 4
  },
  compatibilityDate: '2024-07-30',
  nitro: {
    imports: {
      dirs: [
        '../shared/utils',
        '../shared/types',
        '../shared/constants'
      ]
    }
  },
  hub: {
    database: true
  },
  // Development config
  eslint: {
    config: {
      stylistic: {
        quotes: 'single',
        commaDangle: 'never'
      }
    }
  },
  shadcn: {
    componentDir: './app/components/ui'
  }
})

My app structure: afbeelding

Have I configured this correctly? It looks like on production the path is still incorrect. Thanks in advance!

sadeghbarati commented 1 week ago

Check this

https://stackblitz.com/edit/github-i4vsqf-zqyf8d?file=nuxt.config.ts

michaelreinhard1 commented 1 week ago

Check this

https://stackblitz.com/edit/github-i4vsqf-zqyf8d?file=nuxt.config.ts

Thank you! I appreciate it. This removed all the warnings locally! :) But unfortunately still getting the same build error on production...

Thanks in advance!

afbeelding afbeelding

michaelreinhard1 commented 1 week ago

Update:

Hi! I did a clean install of Nuxt, shadcn-vue and everything else and now the build error in production is gone. I'm not sure what the issue was but your advice solved it! Thanks! 😊