Achieve a successful Vite build even in the presence of TypeScript errors

I am currently facing multiple TypeScript issues in my Vite/Vue/Typescript project that are causing build failures that I am unable to quickly resolve.

Upon attempting to build, I encounter the following errors:

Found 20 errors in 2 files.

Errors  Files
     3  src/App.vue:3
    17  src/stations.ts:7
error Command failed with exit code 2.

Is there a way to force the build to complete even with these errors present?

(I do plan to address these issues eventually, and I am okay with them being reported as errors for now – I just don't want the build process to be blocked)

Below are the dependencies for my project:

"scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.3.4"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.2.3",
    "@vue/eslint-config-prettier": "^8.0.0",
    "eslint": "^8.49.0",
    "eslint-plugin-vue": "^9.17.0",
    "prettier": "^3.0.3",
    "pug": "^3.0.2",
    "typescript": "^5.0.2",
    "vite": "^4.4.5",
    "vite-plugin-pug": "^0.3.2",
    "vue-pug-plugin": "^2.0.3",
    "vue-tsc": "^1.8.5"
  }
typescriptvue.jsvite

Answer №1

Include the following snippet in your scripts section:

"compile-only": "parcel build"

After that, execute the script as you normally would:

npm/pnpm/yarn run compile-only

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

Components in Angular do not refresh after using router.navigate

I currently have two main components in my Angular project: users.components.ts and register.components.ts. The users.components.ts displays a table of users, while the register.components.ts is where users can be added or edited. After making changes to ...

angulartypescripthttpangular-routermat-table

The function webpack.validateSchema does not exist

Out of the blue, Webpack has thrown this error: Error: webpack.validateSchema is not defined Everything was running smoothly on Friday, but today it's not working. No new changes have been made to the master branch since Friday. Tried pruning NPM ...

javascripttypescriptwebpackwebpack-dev-server

Warning from Cytoscape.js: "The use of `label` for setting the width of a node is no longer supported. Please update your style settings for the node width." This message appears when attempting to create

I'm currently utilizing Cytoscape.js for rendering a dagre layout graph. When it comes to styling the node, I am using the property width: label in the code snippet below: const cy = cytoscape({ container: document.getElementById('cyGraph&apo ...

javascriptcsstypescriptcytoscape.js

An appropriate loader may be required to manage this file type issue, which seems to be occurring consistently on all Vuetify components

Currently, I am working on a project that involves a rails backend and a Vue frontend. Both ends are functioning properly, and my next step is to enhance the visual appeal by incorporating Vuetify. After running vue install vuetify, I encountered Runnin ...

vue.jswebpackvuetify.jsyarnpkg

Why is my CSS export missing in the Shareable Vite/Vue component error message?

I have been closely following a tutorial on building a shareable Vue component using Vite and testing it by linking it into another project. The process involves building with Vite through 'npm run build' and then linking the component. However, ...

vue.jsnpmcomponentsvite

Unable to move draggable table rows in vue.js

I recently utilized vue.js 2.0 to create a draggable table leveraging the capabilities of Vue.Draggable. Even though there are no visible errors, I encountered an issue where dragging tr elements does not work as expected. Interestingly, when trying to dra ...

html-tablevue.jsdraggablevuejs2

Converting a string to the Date class type in Angular 4: A comprehensive guide

Within my .ts file, I have a string that looks like this: const date = "5/03/2018"; I am looking to convert it into the default date format returned by Angular's Date class: Tue Apr 03 2018 20:20:12 GMT+0530 (India Standard Time) I attempted to do ...

angulartypescript

Blurry text issue observed on certain mobile devices with Next.js components

There continues to be an issue on my NextJS page where some text appears blurry on certain mobile devices, particularly iPhones. This problem is only present on two specific components - both of which are interactive cards that can be flipped to reveal the ...

reactjstypescriptnext.jstailwind-cssframer-motion

Preventing the Vue watch event from triggering before the change takes place

I'm trying to figure out if there is a way to handle the watch event before the actual change takes place. I've searched online but can't seem to find any information on it, and I find it hard to believe that this feature is missing. TL;DR: ...

vue.js

Creating a versatile TypeScript Record that can accommodate multiple data types

I have a question regarding the use of Record in TypeScript. When I specify Record as the parameter type in a function, I encounter an error in my code because it does not allow different types. type Keys = 'name' | 'qty'; const getVal ...

typescripttypesrecord

Angular - Binding not displaying the latest list elements

In my small application, I have two buttons that either add 1 or -1 to a list. The sum of the list is also displayed. However, I am facing an issue with the interpolation as only the default values of the list are being displayed instead of the newly adde ...

angulartypescript

The issue with Nuxt 3 page transitions not functioning as expected seems to be

Exploring the possibilities of Nuxt 3, I am eager to implement animated transitions between pages using JavaScript hooks and libraries like gsap or animeJs. In my app.vue file, I have simply placed <NuxtPage/> inside a <Transition> element as ...

vue.jsnuxt.jsvue-routernuxtjs3

Unlock the Power of Angular: Leveraging ViewEncapsulation.Native to Access HTML Elements

I am encountering an issue where I am receiving an error when trying to access an HTML element by ID. The problem arises when I attempt to access the classList upon a user clicking a button to apply a different style class to the element. The class list an ...

javascripthtmlangulartypescriptshadow-dom

Vue - Syntax error: Unexpected token, expecting "}."

I recently started working with Vue and have encountered a simple component issue. Sometimes, when I run npm run serve or save a file that is already being served, I receive the following error message: E:\Development\website\app>npm run ...

javascriptvue.jsvuejs2

Using Vue to implement a "v-model" on a custom component that incorporates the ace-editor

Snippet CustomEditor.vue: <template> <div class="custom-container"> <div class="custom-editor" ref="editor"></div> </div> </template> <script> import ace from 'ace-builds' import 'ace- ...

javascriptvue.jsvuejs2ace-editor

Will the use of scoped CSS impact the performance of the build process?

Our products utilize a variety of components with Vue 2 (currently migrating to the 3rd version) and Nuxt SSR. I'm wondering if removing scoped block of styles could potentially enhance our project's performance? If so, by how much? ...

vue.jsvuejs2

Achieving intellisense functionality in TypeScript without the use of classes

Just dipped my toes into TypeScript, attempting to convert this basic JavaScript code to TypeScript. Here is the JavaScript code snippet: Item = {} Item.buy = function (id) {} Item.sell = function (id) {} I prefer not to use classes and would like to ut ...

javascripttypescriptintellisense

Only the final defined document is instantiated by the Swagger-ui-express module

Currently, I am working on a Typescripted nodejs server and facing an issue with defining different swagger paths for separated controllers. The problem is that the swagger-ui-express module only displays the last defined document in the specific route. I ...

node.jstypescriptsingletonswaggerswagger-ui

Store the selected checkbox values in an array when submitting in Ionic

One issue I am facing is that the checked checkboxes are returning true instead of the value of input (type="checkbox"). Array displaying responded checked or unchecked items I am unable to store this data in an array as needed. Additionally, I cannot sp ...

javascriptangulartypescriptionic-framework

Utilizing Vue's v-for directive to manipulate data through custom looping

When I loop through my data using v-for, I find myself unsure of how to display the data with a custom looping method, such as using modulus. I aim to display the data in groups of three items, assigning a different class to every 3 items. The desired st ...

javascripthtmlvue.js