TS2345: Argument of type '{}' is not assignable to parameter of type 'never'

[ghost]

After upgrading from vue-tsc@1.6.0 to 1.6.4, I get this error when running npm run type-check:

TS2345: Argument of type '{}' is not assignable to parameter of type 'never'

The error is caused by <reload-prompt />

This is the component for which the error occurs:

// ReloadPromptSsr.vue

<script setup lang="ts">
import { defineAsyncComponent } from 'vue'

const ReloadPrompt =
  typeof window !== 'undefined'
    ? defineAsyncComponent(() => import('@/components/ReloadPrompt.vue'))
    : undefined
</script>

<template>
  <template v-if="ReloadPrompt">
    <reload-prompt />
  </template>
</template>

// ReloadPrompt.vue
<script setup lang="ts">
import { ref, watch } from 'vue'
import { useRegisterSW } from '@/plugins'

const { offlineReady, needRefresh, updateServiceWorker } = useRegisterSW({
  onRegisteredSW(swScriptUrl: string, sw?: ServiceWorkerRegistration): void {
    if (!sw) return

    setInterval(() => sw.update().then(), 60000 * 5)
  },
  onRegisterError(error): void {
    console.error('Failed service worker registration:', error)
  },
  onNeedRefresh(): void {
    console.log('The app has been updated.')
  },
  onOfflineReady(): void {
    console.log('The service worker is ready to work offline.')
  }
})

const snackbar = ref<boolean>(false)

function update(value: boolean): void {
  snackbar.value = value
}

function updateSW(): void {
  updateServiceWorker().then(() => window.location.reload())
}

watch(() => offlineReady.value || needRefresh.value, update)
</script>

<template>
  <v-snackbar
    v-if="needRefresh"
    v-model="snackbar"
    location="bottom right"
    rounded="xl"
    timeout="-1"
    vertical
  >
    <div class="text-subtitle-1 pb-2">App update</div>
    <p>A new update is available.</p>

    <template v-slot:actions>
      <v-btn variant="text" @click="updateSW">Update</v-btn>
      <v-btn variant="text" @click="update(false)">Close</v-btn>
    </template>
  </v-snackbar>
</template>

<style scoped lang="scss"></style>

Used packages:

typescript: 4.9.5
vite: 4.3.5
vue: 3.2.47
vue-tsc: 1.6.4

[ldsenow]

having the same issue, i guess the work around is to downgrade at this moment.

[Fy-]

tmp fix that works for me:

const ReloadPrompt =
  typeof window !== "undefined"
    ? (defineAsyncComponent(
        () => import("@/components/ReloadPrompt.vue")
      ) as any)
    : undefined;

[so1ve]

@just-niko @Fy-

Can you provide ReloadPrompt.vue?

[Alexis2004]

I had the same problem when upgrading dependency in my project.

During experiments, I found that for the first time the error occurs when upgrading from version 1.6.0 to version 1.6.1:
v1.6.0...v1.6.1

Error occurs when using dynamic component, i.e.:

          <ListDropdownItem
            v-for="item in items"
            :key="item.text"
            :text="item.text"
            :disabled="item.disabled"
            ...
          >
            <template #icon>
              <component :is="item.icon" />
            </template>
          </ListDropdownItem>

[sfreytag]

Possibly related to #3237

You can workaround the issue with dynamic components for the time being with:

<component :is="item.icon as any" />

[so1ve]

The problem is, volar is converting v-if="Comp" to if (__VLS_ctx.Comp), but using __VLS_templateComponents.Comp for dynamic component. So the type is not narrowed.

[ghost]

@so1ve I updated the issue and provided the code for ReloadPrompt.vue

[so1ve]

@just-niko Thanks, but I just found this problem could be reproduced by any dynamic component.

[so1ve]

I've created a PR but I'm not sure if it is the right way to fix 🙃

[lukatavcer]

It happened to me when I had a mixin component that did not use defineComponentand it was imported to the another component that was using the defineComponent.

FIX: Make sure that all components use defineComponent