Setting colorMode to false triggers an error

[dainfoo]

Environment

• Operating System: Linux
• Node Version: v22.11.0
• Nuxt Version: 3.14.1592
• CLI Version: 3.15.0
• Nitro Version: 2.10.4
• Package Manager: [email protected]
• Builder: -
• User Config: default
• Runtime Modules: @nuxt/[email protected]
• Build Modules: -

Is this bug related to Nuxt or Vue?

Nuxt

Version

v3.0.0-alpha.9

Reproduction

My current nuxt.config.ts file looks like this:

export default defineNuxtConfig({
  compatibilityDate: "2024-04-03",
  ssr: false,
  future: {
    compatibilityVersion: 4,
  },
  modules: ["@nuxt/ui"],
  hooks: {
    "prerender:routes"({ routes }) {
      routes.clear();
    },
  },
  routeRules: {
    "/": {
      redirect: "dashboard",
    },
  },
  ui: {
    colorMode: false,
  },
  devtools: { enabled: true },
});

The project it's pretty empty.

Description

I'm receiving this error message:

Additional context

My app.vue file:

<template>
  <UApp>
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </UApp>
</template>

<style>
@import "tailwindcss";
@import "@nuxt/ui";

@theme {
  --font-sans: "Poppins", sans-serif;
}
</style>

Logs

ERROR  Pre-transform error: [unimport] failed to find "useColorMode" imported from "#imports"
✔ Nuxt Nitro server built in 1026 ms
ℹ Vite client warmed up in 2ms
ERROR  Internal server error: [unimport] failed to find "useColorMode" imported from "#imports"
  Plugin: nuxt:imports-transform
  File: /home/app/node_modules/@nuxt/ui/dist/devtools/runtime/DevtoolsRenderer.vue?macro=true
      at file:///home/app/node_modules/unimport/dist/shared/unimport.54fdbc5b.mjs:120:17
      at Array.forEach (<anonymous>)
      at file:///home/app/node_modules/unimport/dist/shared/unimport.54fdbc5b.mjs:117:44
      at Array.forEach (<anonymous>)
      at parseVirtualImportsRegex (file:///home/app/node_modules/unimport/dist/shared/unimport.54fdbc5b.mjs:115:122)
      at detectImportsRegex (file:///home/app/node_modules/unimport/dist/shared/unimport.54fdbc5b.mjs:96:28)
      at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
      at async injectImports (file:///home/app/node_modules/unimport/dist/shared/unimport.54fdbc5b.mjs:1387:61)
      at async Object.injectImportsWithContext [as injectImports] (file:///home/app/node_modules/unimport/dist/shared/unimport.54fdbc5b.mjs:1259:20)
      at async TransformPluginContext.transform (file:///home/app/node_modules/nuxt/dist/index.mjs:2633:30)
      at async file:///home/app/node_modules/vite-plugin-inspect/dist/index.mjs:1120:17
      at async PluginContainer.transform (file:///home/app/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:49096:18)
      at async loadAndTransform (file:///home/app/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:51929:27)
      at async viteTransformMiddleware (file:///home/app/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:61881:24)

[benjamincanac]

Damn, it's not handled in the Nuxt UI devtools. For now, you can disable it if you don't need it:

export default defineNuxtConfig({
  compatibilityDate: "2024-04-03",
  ssr: false,
  future: {
    compatibilityVersion: 4,
  },
  modules: ["@nuxt/ui"],
  hooks: {
    "prerender:routes"({ routes }) {
      routes.clear();
    },
  },
  routeRules: {
    "/": {
      redirect: "dashboard",
    },
  },
  ui: {
    colorMode: false,
    devtools: {
      enabled: false
    }
  },
  devtools: { enabled: true },
});

[dainfoo]

Thank you, @benjamincanac, this configuration solved the error message.