Errors in the project

[jannikbuscha]

Hi, I'm just setting up the project and I'm getting 2 errors in vscode.

These errors do not affect the functionality of the project, but I find them a bit annoying during development.

List.vue:

ColorModeSwitch.vue:

Is it only me who has these errors and how can I fix them?

I might have already found a solution for the first error:

<script setup lang="ts">
const { flatUnwrap } = useUnwrap()
const slots = useSlots()

defineProps({
  icon: {
    type: String,
    default: 'ph:check-circle-duotone'
  }
})
</script>

<template>
  <ul class="p-0">
    <li v-for="(item, index) of flatUnwrap((slots.default && slots.default()) ?? [], ['ul'])" :key="index" class="flex pl-0 space-x-2 my-1 items-center">
      <Icon :name="icon" class="flex-shrink-0 w-6 h-6 mt-1 text-emerald-500" />
      <span><ContentSlot :use="() => item" unwrap="li" /></span>
    </li>
  </ul>
</template>

For the second one I haven't found anything yet, but I don't seem to be the only one with this problem: https://github.com/nuxt-modules/color-mode/issues/168

[Lexpeartha]

Are you per chance using a Take Over mode?

[jannikbuscha]

Are you per chance using a Take Over mode?

I get the same errors whether Take Over Mode is enabled or disabled. I have proceeded according to this:

Edit: vscode setup:

[baikov]

If you have problem with ColorScheme try this way instead

<template>
  <button @click="toggleDark()">
    <ClientOnly>
      <Icon v-if="colorMode.value === 'dark'" ...>
      <Icon v-else ...>
      <template #fallback>
        // something default
      </template>
    </ClientOnly>
  </button>
</template>