Avoid accessing members in Vue 3 using TypeScript that may be unsafe

Question

Avoid accessing members in Vue 3 using TypeScript that may be unsafe

Recently, we initiated the process of upgrading from Quasar v1 to Quasar v2 (moving from Vue 2 to Vue 3).

In the past, this code functioned without any issues:

// 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>

However, when transitioning to Vue 3, we encountered an eslint warning:

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

It appears that props is consistently identified as type any, despite vscode showing the correct types upon hovering:

https://i.sstatic.net/44FRa.png

We have also adhered to the Vue 3 recommendations. Can anyone point out what we might be overlooking?

typescript vue.js vue-component quasar-framework

Answer 1

Answer №1

Identified the root cause of the issue. Within our extensive codebase, we noticed that commenting out the component located at the bottom resolved the eslint warning:

<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>

This situation appears to perplex eslint.

Answer 2

Identified the root cause of the issue. Within our extensive codebase, we noticed that commenting out the component located at the bottom resolved the eslint warning:

<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>

This situation appears to perplex eslint.

Answer 3

Answer №2

If you want to make the error go away, try utilizing Webpack's code-splitting capability:

<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>

Answer 4

If you want to make the error go away, try utilizing Webpack's code-splitting capability:

<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>

Avoid accessing members in Vue 3 using TypeScript that may be unsafe

Answer №1

Answer №2

Similar questions

"Uh-oh! Debug Failure: The statement is incorrect - there was a problem generating the output" encountered while attempting to Import a Custom Declarations File in an Angular

The JSONP request failed with an error stating: ReferenceError: document is not defined

Is there a way to transform vanilla JavaScript code into Vue.js code?

Typescript causing undefined React Router match issue

A guide on effortlessly importing index.vue files in Vue 3 and Vite without needing to specify the file name

NGXS: Issue with passing objects to "setState" occurs when any of the patched inner fields is nullable or undefined

Implement a feature in Bootstrap Vue Timepicker that automatically resets the minutes to 00 whenever the user selects the hours

Definition of Angular 2 File

Issues with v-model functionality on input field in Laravel app when using Vue JS are causing problems

What is the process for importing the TokenExpiredError that is thrown by the verify function in jsonwebtoken?

Discover the method for converting a local file into a string

What is the process for incorporating buttons into an Angular mat-table?

Having trouble resolving the CORS policy issue in Laravel + Vuejs!

Unable to Trigger Virtual Click Event on Calendar in JavaScript

display the text from the template after selecting it (including both the text-field and value-field)

Executing the beforeRouteLeave navigation guard on a vue component for testing purposes

An issue has occurred: [ERR_REQUIRE_ESM] You must utilize the import statement in order to load an

Ag-Grid 20.1.0 and Vuetify - Resolving the Vertical Scrolling Problem

How to transfer data using props through the ":to" attribute of a router link in Vue.js

ESLint is indicating an error when attempting to import the screen from @testing-library/react