Vue 3 @typescript-eslint/no-unsafe-member-access

Question

We recently started to upgrade from Quasar v1 to Quasar v2 (from Vue 2 to Vue 3).

This code worked fine before:

// src/pages/myComponent.vue
<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    appId: {
      type: String,
      required: true,
    },
  },
  setup(props) {
    if (!props.appId) {
      console.error('No application ID provided to load the correct form')
    }
  },
})
</script>

But with Vue 3 we get an eslint warning:

WARNING in src/pages/myComponent.vue @typescript-eslint/no-unsafe-member-access: Unsafe member access.appId on an any value.

It seems like props is always recognized as type any even though when hovering within vscode it does show the correct types:

The Vue 3 recommendations have also been followed correctly. What are we missing here?

Answer 1

Found the cause. In our full code, when we comment out the component at the bottom, the eslint warning is gone:

<template>
  <div v-if="$props.appId" class="q-pa-md">
    <div class="text-h6 q-pb-md">
      {{ application.name }}
    </div>
    <component
      v-if="application.formComponentName"
      :is="application.formComponentName"
    />
    <h3 v-else>No form available for application id {{ $props.appId }}</h3>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useApplications } from 'src/composables/useApplications'
import { useRouter } from 'vue-router'

// import samTruckRoster from 'src/components/truckRoster.vue'

export default defineComponent({
  props: {
    appId: {
      type: String,
      required: false,
    },
  },
  setup(props) {
    const router = useRouter()

    if (!props.appId) {
      console.error('No application ID provided to load the correct form')
      void router.push({ path: 'applications' })
      return
    }

    const { getApplication } = useApplications()
    const application = getApplication(props.appId)

    return { application }
  },
  components: {
    // samTruckRoster,
  },
})
</script>

So it seems like this confuses eslint.

Answer 2

The error disappears when you use Webpack's code-splitting feature:

<template>
  <div v-if="$props.appId" class="q-pa-md">
    <div class="text-h6 q-pb-md">
      {{ application.name }}
    </div>
    <component
      v-if="application.formComponentName"
      :is="application.formComponentName"
    />
    <h3 v-else>No form available for application id {{ $props.appId }}</h3>
  </div>
</template>

<script lang="ts">
import { defineComponent, defineAsyncComponent } from 'vue'
import { useApplications } from 'src/composables/useApplications'
import { useRouter } from 'vue-router'


export default defineComponent({
  props: {
    appId: {
      type: String,
      required: false,
    },
  },
  setup(props) {
    const router = useRouter()

    if (!props.appId) {
      console.error('No application ID provided to load the correct form')
      void router.push({ path: 'applications' })
      return
    }

    const { getApplication } = useApplications()
    const application = getApplication(props.appId)

    return { application }
  },
  components: {
    samTruckRoster: defineAsyncComponent(() => import('src/components/truckRoster.vue')),
  },
})
</script>