Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

I have project with following devstack (Vue3, Vite, TypeScript) and I'm getting a following error on v-slot :

Element implicitly has an 'any' type because expression of type '"default"' can't be used to index type '{} | {}'.
  Property 'default' does not exist on type '{} | {}'.ts(7053)
<DataWrapper v-slot="{ values }">
  data: {{ values }}
</DataWrapper>
DataWrapper component injects props to the slot like this
<slot :values="data"></slot>
It does compile and works as expected but the error is still there. Any idea how to solve this? Thanks a million.
                Where are you seeing the error? VS Code? If so, make sure you're using the Volar extension (instead of Vetur).
– tony19
                Jan 24, 2022 at 4:37
                This is the first Vue3/Typescript 'any' error I've run up against without a stackoverflow solution, would hate to have to change the strictness level just to get this tiny bit compiling.
– James White
                Feb 19, 2022 at 16:59
                @sol I cannot reproduce the issue in this repo. Can you share a link to a reproduction of the problem?
– tony19
                Apr 12, 2022 at 21:27
                @sol, IMHO placing a bounty on this question is unlikely to provide you with a good answer. The question lacks context, we have no way of knowing how DataWrapper looks like (if it's a custom component, if it's a lib, what version of a lib, etc...). The only solution in cases like this is any, any[] or unknown[], which is not much of a solution, really. You had more chances of getting a good answer by asking a separate question, with all the necessary details. The only possible answer for current question is: disable TS.
– a.h.g.
                Apr 12, 2022 at 21:27
Have you tried adding type information?
<DataWrapper v-slot="{ values }: { values: any }">
  data: {{ values }}
</DataWrapper>
https://www.typescriptlang.org/docs/handbook/variable-declarations.html#property-renaming
If you are using eslint you can also surround the DataWrapper with
<!-- eslint-disable -->
<!-- eslint-enable -->
                What Version of Vue is required for this to work?  This results in a vue-loader-v15 error SyntaxError: Unexpected token, expected ","  with vue-cli 5.0.8
– nonNumericalFloat
                May 12 at 17:49
Disable ESLint check for the whole Vue file

/* eslint-disable  @typescript-eslint/no-explicit-any */
Write it as a render function so that this:
<template>
  <router-view
    v-slot="{Component}"
    <transition
      name="fade"
      mode="out-in"
      <component
        :is="Component"
        :key="$route.path"
    </transition>
  </router-view>
</template>
becomes this:
<template>
  <render />
</template>
<script setup lang="ts">
import {h, Transition} from "vue";
import {RouterView, useRoute} from "vue-router";
import type {VNode} from "vue";
const route = useRoute();
const render = () => {
  return h(RouterView, null, {
    default: ({Component}: {Component: VNode}) => {
      return h(Transition, {name: 'fade', mode: 'out-in'}, [
        h(Component, {key: route.path}),
</script>
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.