Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Bug]: @nuxtjs/color-mode has not being installed by shadcn-nuxt #864

Open
1 of 2 tasks
rromanv opened this issue Nov 4, 2024 · 11 comments · Fixed by nuxt/nuxt#29799 · May be fixed by #886
Open
1 of 2 tasks

[Bug]: @nuxtjs/color-mode has not being installed by shadcn-nuxt #864

rromanv opened this issue Nov 4, 2024 · 11 comments · Fixed by nuxt/nuxt#29799 · May be fixed by #886
Labels
bug Something isn't working

Comments

@rromanv
Copy link

rromanv commented Nov 4, 2024 •
edited
Loading

Reproduction

https;//stackblitz.com/edit/nuxt-starter-pc9prp

Describe the bug

The documentation for Dark Mode states that shadcn-nuxt installs the color-mode module automatically. However, this does not happen.

System Info

System:
    OS: Linux 6.6 Ubuntu 24.04.1 LTS 24.04.1 LTS (Noble Numbat)
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i9-11950H @ 2.60GHz
    Memory: 27.95 GB / 30.96 GB
    Container: Yes
    Shell: 5.9 - /home/linuxbrew/.linuxbrew/bin/zsh
  Binaries:
    Node: 20.18.0 - /home/linuxbrew/.linuxbrew/opt/node@20/bin/node
    npm: 10.8.2 - /home/linuxbrew/.linuxbrew/opt/node@20/bin/npm
    pnpm: 9.12.3 - /home/linuxbrew/.linuxbrew/bin/pnpm
    bun: 1.1.32 - ~/.bun/bin/bun
  npmPackages:
    nuxt: ^3.13.2 => 3.14.0
    radix-vue: ^1.9.8 => 1.9.8
    shadcn-nuxt: ^0.11.2 => 0.11.2
    vue: latest => 3.5.12

Contributes

  • I am willing to submit a PR to fix this issue
  • I am willing to submit a PR with failing tests
@rromanv rromanv added the bug Something isn't working label Nov 4, 2024
@rromanv
Copy link
Author

rromanv commented Nov 4, 2024 •
edited
Loading

Workaround:

  1. Add the color mode with npx nuxi@latest module add color-mode
  2. Add classSuffix: '' to the color mode configuration on nuxt.config.ts

Example:

export default defineNuxtConfig({
  compatibilityDate: "2024-04-03",
  devtools: { enabled: true },
  modules: ["@nuxtjs/tailwindcss", "shadcn-nuxt", "@nuxtjs/color-mode"],
  colorMode: {
    classSuffix: "",
  },
});

@milos018 milos018 mentioned this issue Nov 5, 2024
Closed
@danielroe danielroe mentioned this issue Nov 5, 2024
Merged
@xak2000
Copy link

xak2000 commented Nov 6, 2024 •
edited
Loading

Just for the information: upgrading to Nuxt 3.14.159 (that includes nuxt/nuxt#29799 fix) doesn't help.

I mean, color-mode still cannot be installed by yarn dlx nuxi module add shadcn-nuxt as this error is happening:

ℹ Adding shadcn-nuxt to the modules                                                                                                                    00:12:25
ℹ Using Tailwind CSS from ~/assets/css/tailwind.css                                                                                   nuxt:tailwindcss 00:12:27

 ERROR  Nuxt module should be a function: @nuxtjs/color-mode                                                                                            00:12:28  

  at loadNuxtModuleInstance (/C:/Users/user/project/node_modules/@nuxt/kit/dist/index.mjs:2460:11)
  at async installModule (/C:/Users/user/project/node_modules/@nuxt/kit/dist/index.mjs:2389:47)
  at async setup (/C:/Users/user/project/node_modules/shadcn-nuxt/dist/module.mjs:46:5)
  at async normalizedModule (/C:/Users/user/project/node_modules/@nuxt/kit/dist/index.mjs:2140:17)
  at async installModule (/C:/Users/user/project/node_modules/@nuxt/kit/dist/index.mjs:2397:95)
  at async initNuxt (/C:/Users/user/project/node_modules/nuxt/dist/index.mjs:4669:5)
  at async loadNuxt (/C:/Users/user/project/node_modules/nuxt/dist/index.mjs:4839:5)
  at async loadNuxt (/C:/Users/user/project/node_modules/@nuxt/kit/dist/index.mjs:2627:19)
  at async Object.run (/C:/Users/user/AppData/Local/Temp/xfs-859c58e2/dlx-12280/node_modules/nuxi/dist/chunks/prepare.mjs:61:18)
  at async runCommand$1 (/C:/Users/user/AppData/Local/Temp/xfs-859c58e2/dlx-12280/node_modules/nuxi/dist/shared/nuxi.bd0a2fa0.mjs:1648:16)
  at async runCommand (/C:/Users/user/AppData/Local/Temp/xfs-859c58e2/dlx-12280/node_modules/nuxi/dist/shared/nuxi.bd0a2fa0.mjs:2019:10)
  at async Object.setup (/C:/Users/user/AppData/Local/Temp/xfs-859c58e2/dlx-12280/node_modules/nuxi/dist/chunks/add2.mjs:197:5)
  at async runCommand$1 (/C:/Users/user/AppData/Local/Temp/xfs-859c58e2/dlx-12280/node_modules/nuxi/dist/shared/nuxi.bd0a2fa0.mjs:1620:5)
  at async runCommand$1 (/C:/Users/user/AppData/Local/Temp/xfs-859c58e2/dlx-12280/node_modules/nuxi/dist/shared/nuxi.bd0a2fa0.mjs:1639:11)
  at async runCommand$1 (/C:/Users/user/AppData/Local/Temp/xfs-859c58e2/dlx-12280/node_modules/nuxi/dist/shared/nuxi.bd0a2fa0.mjs:1639:11)
  at async runMain$1 (/C:/Users/user/AppData/Local/Temp/xfs-859c58e2/dlx-12280/node_modules/nuxi/dist/shared/nuxi.bd0a2fa0.mjs:1777:7)

@xak2000 xak2000 mentioned this issue Nov 6, 2024
Merged
8 tasks
@sadeghbarati
Copy link
Collaborator

Hi, could you guys test it with the latest Nuxt version v3.14.159 and see if issue is persist

@MuhammadM1998
Copy link
Contributor

The issue persists with Nuxt v3.14.159.

The problem is @nuxtjs/color-mode module is added in devDependencies but it should be in dependencies https://github.com/unovue/shadcn-vue/blob/dev/packages/module/package.json#L48

@sadeghbarati
Copy link
Collaborator

Yeah I have seen the error after testing with v3.14.159 but the next release is going to fix it according to that Nuxt PR

@selemon-dev, installModule is adding a package like npm add module and updating the config, or is it only updating the config?

If it is only updating the nuxt.config then @nuxtjs/color-mode should be in dependencies of shadcn-nuxt

@xak2000
Copy link

xak2000 commented Nov 10, 2024

@sadeghbarati

Yeah I have seen the error after testing with v3.14.159 but the next release is going to fix it according to that Nuxt PR

What Nuxt PR?

If you mean nuxt/nuxt#29799 than it is already merged into v3.14.159, but the problem persists.

Manually adding @nuxtjs/color-mode into devDependencies of package.json and into modules of nuxt.config.ts, and then re-running yarn dlx nuxi module add shadcn-nuxt helps. But this is just a workaround, of course.

@selemondev
Copy link
Contributor

selemondev commented Nov 11, 2024 •
edited
Loading

Yeah I have seen the error after testing with v3.14.159 but the next release is going to fix it according to that Nuxt PR

@selemon-dev, installModule is adding a package like npm add module and updating the config, or is it only updating the config?

If it is only updating the nuxt.config then @nuxtjs/color-mode should be in dependencies of shadcn-nuxt

Hey @sadeghbarati, the @nuxtjs/color-mode module and @nuxtjs/tailwindcss module should be direct dependencies of shadcn-nuxt.

@selemondev selemondev linked a pull request Nov 11, 2024 that will close this issue
Open
8 tasks
@Cry0nicS
Copy link

Just a quick update - as others mentioned, error still persists with nuxt 3.14.159

Us3r-gitHub pushed a commit to Aikuci-Dev/SISI-Document-Mitra that referenced this issue Dec 4, 2024
@aikuci
📦 feat: add vue-shadcn for UI components
63adf9d 
[DOCS](https://www.shadcn-vue.com/docs/installation/nuxt.html)

1. bun install
2. bun install -D typescript
3. bun x nuxi@latest module add @nuxtjs/tailwindcss
4. bun x nuxi@latest module add shadcn-nuxt
    - [Issue](unovue/shadcn-vue#864)
    - [Fix](nuxt/nuxt#29779 (comment))
5. Config nuxt.config.ts
6. bun x shadcn-vue@latest init
@Flamenate
Copy link

Error persists with nuxt: 3.14.1592

@Us3r-gitHub
Copy link

Regarding this comment, it worked for me.

This was referenced Dec 9, 2024
Open
Open
@danielroe
Copy link
Contributor

danielroe commented Dec 9, 2024 •
edited
Loading

the bug here is that it should be a dependency (or peer dependency) of the module

the bug in nuxt is simply a misleading error message

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
9 participants
@xak2000 @rromanv @sadeghbarati @danielroe @Cry0nicS @Flamenate @Us3r-gitHub @MuhammadM1998 @selemondev