Vite in Vue 3 does not stop build process for errors

Encountered the error message "TS2322: Type 'number' is not assignable to type 'string'."

Instead of fixing it in the code, I prefer to disable it. Using "vue-tsc --noEmit && vite build" for my build in package.json.

Currently working with Vue 3 / Vite using the latest version in a Dockerfile.

Answer №1

If you're having trouble fixing the code, there are ways to suppress the error temporarily. One option is to use a comment like @ts-expect-error:

// @ts-expect-error
const s: string = 123

Another option is to use @ts-ignore:

// @ts-ignore
const s: string = 123

Wondering when to use @ts-ignore or @ts-expect-error?:

Choose ts-expect-error if:

  • you're writing test code and want the type system to flag an operation as an error
  • you anticipate a quick fix and just need a temporary solution
  • you're working on a project where the team actively removes suppression comments once the affected code is fixed

Choose ts-ignore if:

  • you're dealing with a large project and new errors have cropped up in code without a clear owner
  • you're in the midst of upgrading between different TypeScript versions and encountering errors in one version but not in another
  • you simply don't have the time to decide between these options

Check out this demo for more information.

Answer №2

Upon reviewing my code, I discovered that many components in the package.json file were significantly outdated.

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

What's the trick to inserting a "dot" beneath a DatePicker?

Could someone assist me in adding a small "dot" below certain dates on MUIX DatePicker, similar to the example shown here? Thank you. ...

Tips for showcasing images consistently in a V-Card with uniform sizes

Hey there, I'm facing a bit of a challenge that I can't seem to crack. Apologies for not sharing my entire code. So here's the problem: I'm working on this: <v-card> <v-img :src=“{{person.png}}”</v-img> <v-card& ...

Enhancing Security: Utilizing npm audit within GitLab CI for thorough security checks

Is there a way to halt a build if the package.json file has a crucial security issue found with the npm audit command inside the gitlab-ci.yml script? ...

How can I retrieve the document id from Firestore using Angular?

I attempted to generate an auto document ID in Firestore and retrieve the document ID in Angular 8 using the code provided. However, I am encountering an issue where I only receive the document ID after the execution has been completed. Can someone pleas ...

Transform nested properties of an object into a new data type

I created a versatile function that recursively converts nested property values into numbers: type CastToNumber<T> = T extends string ? number : { [K in keyof T]: CastToNumber<T[K]> }; type StringMap = { [key: string]: any }; const castOb ...

When a React component in TypeScript is passed as a parameter and then assigned to a variable, an error with code TS2604 may occur stating that the JSX element type does not

I am currently facing an issue with handling props of a passed React Element in my Factory. I am getting a TypeScript error that says: TS2604: JSX element type 'this.extraBlock' does not have any construct or call signatures. This is my Child co ...

What measures can be taken to stop the following npm command from executing?

Currently, I am running preflight checks using npm before allowing other scripts to proceed. The current method is effective, but I am exploring alternative approaches. package.json "deploy": "npm run _deploy:preflight && npm run _deploy:real", ...

ReactJS integration issue with Material Design Lite (import/require problem)

I am currently integrating Google's Material Design Lite with ReactJS. Specifically, I am utilizing the Spinner Loading and Text Field components from the MDL library. However, I am encountering an issue when switching routes using React Router. The ...

Testing external browser pages in an electron app with testcafe: A step-by-step guide

While conducting E2E testing with testcafe on an electron-vue application, I am facing a challenge during the authentication phase. When I connect to an external application and try to enter username and password for authentication, I encounter difficult ...

Sharing images for inclusion in the README.md file on NPM

The project on GitHub displays the logo named logo.png at the top of its README.md file. In order to have the same logo displayed on NPM, we copied it into the dist/fs-validator directory where the publish files are located. To achieve this, we utilized t ...

My Vue js Application is Having Issues with the Bootstrap Navbar Display

I'm encountering some issues while trying to integrate a bootstrap navbar into my Vue js application. Any assistance would be greatly appreciated. Thank you! Even after copying the navbar code from Bootstrap into my App.vue file, it doesn't rend ...

Tips for resolving the warning message: "Utilize a callback function in the setState method to reference the

I'm having an issue with this code fragment as ESLint is giving me a warning: "Use callback in setState when referencing the previous state react/no-access-state-in-setstate". Can someone help me resolve this? const updatedSketch = await ImageManipula ...

Challenges related to the placement of the speed dial in Vuetify are causing

I'm trying to incorporate the vuetify speed dial component into my app, but I'm encountering odd positioning issues. What I want is for the button to be clicked and then the additional options slide out to the left of it. The image above shows t ...

Encountering an unexpected token error while using Webpack with React modules

I've been attempting to utilize the react-spin npm package, but when I try to create a bundle.js with webpack, an error occurs: Module parse failed: /Users/nir/browsewidget/node_modules/react-spin/src/main.js Line 29: Unexpected token < You may ne ...

Angular error TS2531: Object may be null

Within my Component.html file, I have an input field set up like this: <input type="text" (change) = "setNewUserName($event.target.value)"/> The code within the component.ts file looks like this: import { Component } from "@ ...

Converting an array into an object in Vue.js: A step-by-step guide

Can someone assist me with converting an array to an object in Vue.js? I am trying to extract the name value "Willy" from the array. Here is the array data retrieved from LocalStorage: [{"id":"56b5","name":"Willy","email":"willy@test","password":"1234"}] ...

Navigating through a series of items in VueJS can be easily accomplished by using a

Below is the Vue instance I have created: new Vue({ el: '#app', data: { showPerson: true, persons: [ {id: 1, name: 'Alice'}, {id: 2, name: 'Barbara'}, {id: 3, name: &a ...

The art of neatly bundling a Typescript external module at the highest level

I'm currently working on a TypeScript NPM package, where I have organized all the classes and interfaces. However, upon review, it seems that my approach is repetitive and not very clean, especially with the empty class and interface extensions. I am ...

Guide to Setting Up Infinite Scroll with Next JS SSG

I recently built a markdown blog using the Next Js documentation and incorporated Typescript. When trying to retrieve a list of blog posts, I utilized getStaticProps as recommended in the documentation. However, my attempts with certain npm packages were u ...

"Exploring the dynamic duo of JHipster and master

I have utilized Jhipster's .jdl file to create all of my classes. Currently, I have two classes with a master-detail relationship. This setup displays the master record (let's say A) at the top of my form and a list/table of detail records (for e ...