Troubleshooting TS Errors in Vue 3 and Vite with Typescript Integration

Currently experimenting with Vue 3, Vite, and TypeScript to build a Vue project. The configuration process has proven to be quite challenging. Despite consulting various documentation sources, I have not been successful in achieving my desired outcome. My goal is to ensure that the project does not build if there are any code errors present.

I have provided the code below and would greatly appreciate any assistance.

App.vue

<template>
  <header>
    <h1>The Learning Resources App</h1>
  </header>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

// import StoredResource from '//StoredResource';

interface VueData {
  storedResources: StoredResource[];
}

export default defineComponent({
  name: 'App',
  data(): VueData {
    return {
      storedResources: [
        {
          id: 'official-guide' as number,
          title: 'Official Guide',
          description: 'The official Vue.js documentation.',
          link: 'https://vuejs.org/',
        },
        {
          id: 'google',
          title: 'Google',
          description: 'Learn to google...',
          link: 'https://www.google.co.uk/',
        },
      ],
    };
  },
});
</script>

package.json

{
  "name": "the-learning-resources-app---vue-js-ts",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "run-p type-check build-only",
    "preview": "vite preview --port 5001",
    "test": "jest src",
    "test:e2e": "start-server-and-test preview http://127.0.0.1:5001/ 'npx cypress open'",
    "test:e2e:ci": "start-server-and-test 'npm run build && npm run preview' http://127.0.0.1:5001/ 'npx cypress run'",
    "cypress": "cypress run",
    "build-only": "vite build",
    "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
    "lint": "eslint .",
    "lint:fix": "npm run lint -- --fix",
    "format": "prettier -w .",
    "prepare": "husky install"
  },
  "dependencies": {
    "vue": "^3.2.36"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.1.0",
    "@types/jest": "^28.1.1",
    "@types/jsdom": "^16.2.14",
    "@types/node": "^16.11.36",
    "@vitejs/plugin-vue": "^2.3.3",
    "@vue/eslint-config-prettier": "^7.0.0",
    "@vue/eslint-config-typescript": "^10.0.0",
    "@vue/test-utils": "^2.0.0-rc.18",
    "@vue/tsconfig": "^0.1.3",
    "cypress": "^9.7.0",
    "eslint": "^8.5.0",
    "eslint-plugin-cypress": "^2.12.1",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-simple-import-sort": "^7.0.0",
    "eslint-plugin-vue": "^8.2.0",
    "husky": "^8.0.1",
    "jest": "^26.6.3",
    "jsdom": "^19.0.0",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.5.1",
    "start-server-and-test": "^1.14.0",
    "ts-jest": "^26.5.6",
    "typescript": "~4.7.2",
    "vite": "^2.9.9",
    "vitest": "^0.13.0",
    "vue-jest": "^5.0.0-alpha.10",
    "vue-tsc": "^0.35.2"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "/@/*": [
        // / to begin with.
        "src/*"
      ]
    },
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"],
    "types": ["vite/client", "jest", "@types/jest", "node", "cypress"]
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}
typescriptvue.jsvite

Answer №1

For those seeking a solution to this issue. I recommend utilizing the vite-plugin-checker tool.

To implement the plugin, follow these steps:

npm install --save-dev vite-plugin-checker
# alternatively
yarn add -D vite-plugin-checker

In your vite.config.ts

import checker from 'vite-plugin-checker';

export default defineConfig({
  plugins: [
    // other plugins you have
    checker({
      typescript: true,
    }),
  ],
  // rest of your configuration
})

Answer №2

According to the documentation: 

Vite only performs transpilation on .ts files and does NOT perform type checking. It assumes type checking is taken care of by your IDE and build process (you can run tsc --noEmit in the build script or install vue-tsc and run vue-tsc --noEmit to also type check your *.vue files).
. So you should rely on your IDE to highlight any errors in your TypeScript code. Consider using Volar in VS Code, for example.

Referencing @tony19's comment. This answer should be accurate.

Answer №3

To tackle this issue, I successfully resolved it utilizing the npm module called npm-run-all. The key to solving this problem was making adjustments to the script section in the package.json file as outlined below.

"vite": "vite",
"watch-tsc": "tsc --watch --noEmit"
"start": "npm-run-all --parallel watch-tsc vite"

Answer №4

Resolved the issue in development by implementing this particular package.

"development": "concurrently \"vite\" \"tsc --watch --noEmit\""

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Employing async await for postponing the execution of a code block

I have been working on an Angular component where I need to perform some actions after a data service method returns some data asynchronously. Although I attempted to use async/await in my code, I feel that I may not have fully understood how it works. Her ...

angulartypescriptasynchronous

Using Vue-cookies in conjunction with Firebase and Heroku, not being utilized

I have successfully deployed a Vue.js project on Firebase and a Node-Express app on Heroku. Now, I am attempting to send cookies along with each request to the server using Axios. Cookies are being set using vue-cookies with attributes of sameSite: none an ...

node.jsvue.jsherokucookiescross-domain

Ways to address the issue of duplicated names in input fields

Currently, I am utilizing a React Hook Form hook known as useFieldsArray. This hook is responsible for rendering an array of fields, each containing an object with the data that will be transmitted via the input. One interesting feature is the ability to ...

reactjstypescriptreact-hook-formchakra-ui

Troubleshooting Angular: Issues with Table Data Display and Source Map Error

I'm currently tackling a challenge in my Angular application where I am unable to display data in a table. When I fetch data from a service and assign it to a "rows" variable within the ngOnInit of my component, everything seems to be working fine bas ...

htmlangulartypescriptdebugginghtml-table

Issue encountered with dynamic localizations in Vue-i18n when fetching from an HTTP request

My goal is to load localization dynamically through an HTTP call rather than packaging it with the application for better management. However, I encountered an issue where the language does not load on initial render but updates properly when changing rout ...

vue.jsvue-i18nvue-ssr

Utilizing NextJS to efficiently route requests directly to the backend and send the responses back to the client within the

In the technology stack for my project, I am using a Next.js server for the front end and a separate back-end server to handle user data storage. When a client needs to send a request to the back end, they first make an API request to the Next.js server, ...

javascripttypescriptnext.js

vee-validate: Mandatory when a specific condition is fulfilled

Currently utilizing Vuejs2 and vee-validate for form validation. Although the package is quite helpful, I am encountering difficulties in implementing a conditional required field. The goal is to make two select fields required when a specific radio optio ...

validationvue.jsvuejs2

Embarking on your ABLY journey!

Incorporating https://github.com/ably/ably-js into my project allowed me to utilize typescript effectively. Presently, my code updates the currentBid information in the mongodb document alongside the respective auctionId. The goal is to link the auctionId ...

angulartypescriptably-realtime

Compiler error occurs when trying to pass props through a higher-order component via injection

Recently, I have been experimenting with injecting props into a component using a higher order component (HOC). While following this insightful article, I came up with the following HOC: // WithWindowSize.tsx import React, {useEffect, useMemo, useState} fr ...

reactjstypescriptreact-typescript

I'm struggling to retrieve data from my table using Bootstrap pagination in VueJS 2

I am trying to display data from my API in a table with pagination and filtered results. I have noticed that when I place the function in methods, I am able to retrieve the data from (event-1). However, when I move the function to items in computed, inst ...

vue.jsvuejs2

Vue component fails to render on a specific route

I am having trouble rendering the Login component on my Login Route. Here is my Login component code: <template> <v-app> <h1>Login Component</h1> </v-app> </template> <script> export default { } </script ...

javascriptvue.jsvuejs2vuetify.jsvue-router

Building applications with Vue.js and Framework7 while incorporating the powerful Axios library

I am inexperienced with framework7 and vuejs. Can someone confirm if I am importing it correctly? Additionally, how can I make axios accessible from other pages? Here is my main.js file. I’m uncertain if the import process is accurate or if any steps ar ...

htmlvue.jsaxioshtml-framework-7

What is the proper way to utilize the router next function for optimal performance

I want to keep it on the same line, but it keeps giving me errors. Is there a way to prevent it from breaking onto a new line? const router = useRouter(); const { replace } = useRouter(); view image here ...

reactjstypescriptnext.js

Postman is having trouble communicating with an express router and is unable to send requests

Currently, I am experiencing some challenges while trying to grasp the concepts of express and node with typescript, particularly when setting up a router. In my bookRoutes.ts file, I have defined my router in the following manner: import express, { Expre ...

node.jstypescriptexpress

How can I extract the selected sorting parameters in Vuetify datatables?

Currently, I am developing an export tool specifically for a Vuetify datatable. One of the key requirements is to pass on to the generator the columns by which the datatable has been sorted along with their respective directions. I have been searching fo ...

vue.jsvuetify.js

Display images in a list with a gradual fade effect as they load in Vue.js

In my Vue project, I am looking to display images one at a time with a fading effect. I have added a transition group with a fade in effect and a function that adds each image with a small delay. However, I am facing an issue where all the images show up ...

javascriptvue.jsvuejs2settimeoutvue-transitions

The concept of type literals in Typescript provides a powerful tool for achieving function

In TypeScript, I am aiming to create an overloaded function with named parameters. Despite the code running correctly, I encounter warnings about `init.index` potentially not existing in one of the function signatures. The purpose of overloading is to off ...

typescriptgoogle-docs-api

Error: In vue.js and axios, attempting to access property 'post' of an undefined object results in a TypeError

I am attempting to send data using an axios' post request within a vue method but I keep encountering this error: "signinVue.js:60 Uncaught TypeError: Cannot read property 'post' of undefined" Vue script: new Vue({ el:'#app&apo ...

vue.jsaxios

Testing Material-UI's autocomplete with React Testing Library: a step-by-step guide

I am currently using the material-ui autocomplete component and attempting to test it with react-testing-library. Component: /* eslint-disable no-use-before-define */ import TextField from '@material-ui/core/TextField'; import Autocomplete from ...

reactjstypescriptautocompletematerial-uireact-testing-library

Unlocking the Watch Hook in VueJS 3: A Step-by-Step Guide

I'm currently developing a VueJS application where I need to monitor changes in the user's state from the vuex store and take action accordingly. Although the changes are reflected, it seems that the watch hook is not triggering. Below is the co ...

vue.jsvuexwatch