colorMode: false + /pages/ crash the app

[jeannen]

Environment

---

• Operating System: Darwin
• Node Version: v22.9.0
• Nuxt Version: 3.14.1592
• CLI Version: 3.16.0
• Nitro Version: 2.10.4
• Package Manager: [email protected]
• Builder: -
• User Config: default
• Runtime Modules: @nuxt/[email protected], @nuxt/[email protected], @nuxtjs/[email protected], @nuxtjs/[email protected]
• Build Modules: -

---

Is this bug related to Nuxt or Vue?

Nuxt

Version

3.0.0-alpha.9

Reproduction

On a brand new project:

npx nuxi@latest init my-app
cd my-app
npm install @nuxt/ui@next

Then
/app/app.vue

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

nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
	compatibilityDate: "2024-11-01",
    modules: ['@nuxt/ui', '@nuxt/eslint', '@nuxtjs/seo'],
    css: ['~/assets/css/main.css'],

	devtools: { enabled: true },
	future: {
		compatibilityVersion: 4,
	},
	ui: {
                // error here
		colorMode: false,
	},
});

Description

When changing the ui.colorMode to false AND using the pages folder, it crashes the whole app (error below).

500
[vite-node] [plugin:nuxt:imports-transform] [VITE_ERROR] /@fs/Users/jeannen/Dev/apps/node_modules/@nuxt/ui/dist/devtools/runtime/DevtoolsRenderer.vue?macro=true

/* Injection by vite-plugin-vue-inspector Start */
import { createVNode as __createVNode } from 'vue'
function _interopVNode(vnode) {
  if (vnode && vnode.props && 'data-v-inspector' in vnode.props) {
    const data = vnode.props['data-v-inspector']
    delete vnode.props['data-v-inspector']
    Object.defineProperty(vnode.props, '__v_inspector', { value: data, enumerable: false })
  }
  return vnode
}
function _createVNode(...args) { return _interopVNode(__createVNode(...args)) }
/* Injection by vite-plugin-vue-inspector End */
import { defineComponent as _defineComponent } from "vue";
import { onUnmounted, onMounted, reactive } from "vue";
import { pascalCase } from "scule";
import { defineAsyncComponent, useColorMode, useRoute } from "#imports";
const _sfc_main = /* @__PURE__ */ _defineComponent({
  __name: "DevtoolsRenderer",
  setup(__props, { expose: __expose }) {
    __expose();
    const route = useRoute();
    const component = route.query?.example ? defineAsyncComponent(() => import(`./examples/${route.query.example}.vue`)) : route.params?.slug && defineAsyncComponent(() => import(`../../runtime/components/${pascalCase(route.params.slug)}.vue`));
    const state = reactive({});
    function onUpdateRenderer(event) {
      state.props = { ...event.data.props };
      state.slots = { ...event.data.slots };
    }
    const colorMode = useColorMode();
    function setColorMode(event) {
      colorMode.preference = event.isDark ? "dark" : "light";
    }
    onMounted(() => {
      (void 0).parent.addEventListener("nuxt-ui-devtools:update-renderer", onUpdateRenderer);
      (void 0).parent.addEventListener("nuxt-ui-devtools:set-color-mode", setColorMode);
    });
    onUnmounted(() => {
      (void 0).parent.removeEventListener("nuxt-ui-devtools:update-renderer", onUpdateRenderer);
      (void 0).parent.removeEventListener("nuxt-ui-devtools:set-color-mode", setColorMode);
    });
    onMounted(async () => {
      const event = new Event("nuxt-ui-devtools:component-loaded");
      (void 0).parent.dispatchEvent(event);
    });
    onMounted(() => {
      if (!route.query?.example) return;
    });
    const __returned__ = { route, component, state, onUpdateRenderer, colorMode, setColorMode };
    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
    return __returned__;
  }
});
import { resolveComponent as _resolveComponent, resolveDynamicComponent as _resolveDynamicComponent, mergeProps as _mergeProps,  withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode } from "vue";
import { ssrRenderVNode as _ssrRenderVNode, ssrRenderComponent as _ssrRenderComponent, ssrRenderAttrs as _ssrRenderAttrs } from "vue/server-renderer";
function _sfc_ssrRender(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
  const _component_UApp = _resolveComponent("UApp");
  _push(`<div${_ssrRenderAttrs(_mergeProps({
    id: "ui-devtools-renderer",
    class: "nuxt-ui-component-renderer",
    "data-v-inspector": "../node_modules/@nuxt/ui/dist/devtools/runtime/DevtoolsRenderer.vue:44:3"
  }, _attrs))}>`);
  _push(_ssrRenderComponent(_component_UApp, { toaster: null }, {
    default: _withCtx((_, _push2, _parent2, _scopeId) => {
      if (_push2) {
        if ($setup.component) {
          _ssrRenderVNode(_push2, _createVNode(_resolveDynamicComponent($setup.component), _mergeProps($setup.state.props, {
            class: $setup.state?.slots?.base,
            ui: $setup.state.slots
          }), null), _parent2, _scopeId);
        } else {
          _push2(`<!---->`);
        }
      } else {
        return [
          $setup.component ? (_openBlock(), _createBlock(_resolveDynamicComponent($setup.component), _mergeProps({ key: 0 }, $setup.state.props, {
            class: $setup.state?.slots?.base,
            ui: $setup.state.slots
          }), null, 16, ["class", "ui"])) : _createCommentVNode("v-if", true)
        ];
      }
    }),
    _: 1
    /* STABLE */
  }, _parent));
  _push(`</div>`);
}
import "/Users/jeannen/Dev/apps/node_modules/@nuxt/ui/dist/devtools/runtime/DevtoolsRenderer.vue?vue&type=style&index=0&lang.css";
import { useSSRContext as __vite_useSSRContext } from "vue";
const _sfc_setup = _sfc_main.setup;
_sfc_main.setup = (props, ctx) => {
  const ssrContext = __vite_useSSRContext();
  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("../../node_modules/@nuxt/ui/dist/devtools/runtime/DevtoolsRenderer.vue");
  return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
};
import _export_sfc from "\0plugin-vue:export-helper";
export default /* @__PURE__ */ _export_sfc(_sfc_main, [["ssrRender", _sfc_ssrRender], ["__file", "/Users/jeannen/Dev/apps/node_modules/@nuxt/ui/dist/devtools/runtime/DevtoolsRenderer.vue"]]);

at /@fs/Users/jeannen/Dev/apps/node_modules/@nuxt/ui/dist/devtools/runtime/DevtoolsRenderer.vue?macro=true

Additional context

No response

Logs

[benjamincanac]

I believe this is a duplicate of #2788. This should have been fixed by #2792 already which will be available in the next release.

In the meantime, you can disable the ui.devtools.