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

[rromanv]

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]

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: "",
  },
});

[xak2000]

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)

[sadeghbarati]

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

[MuhammadM1998]

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]

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]

@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]

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.