Encountering TypeScript Error in Fresh VueJs3 Installation - Deprecated Option 'importsNotUsedAsValues'

{
  "extends": "@vue/tsconfig/tsconfig.web.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
  "exclude": ["src/**/__tests__/*"],
  "compilerOptions": {
    "composite": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

I encountered an issue with the first brace in this code snippet:

An error stating that 'importsNotUsedAsValues' is deprecated and will no longer work in TypeScript 5.5 appeared. To resolve, specify compilerOption '"ignoreDeprecations": "5.0"' to silence this error. It is recommended to use 'verbatimModuleSyntax' instead.

Any ideas on how to address this error?

typescriptvuejs3

Answer №1

The issue arises from this particular line of code (in the initial code snippet), as the file is no longer compatible with Typescript 5.0. The createVue has not yet updated its dependencies to include @vue/tsconfig for supporting Typescript 5.0:

  "extends": "@vue/tsconfig/tsconfig.web.json",

This line imports the file tsconfig.web.json which includes importsNotUsedAsValues.

To resolve this error, you can install @vue/tsconfig as a standalone module to access the latest version that supports Typescript 5.0:

npm remove @vue/tsconfig.json
npm i @vue/tsconfig

Subsequently, update your tsconfig.json with:

"extends": "@vue/tsconfig/tsconfig.dom.json",

Following this change, the file should no longer contain the importsNotUsedAsValues.

Official tsconfig supporting ts5 NPM reference for @vue/tsconfig

You could alternatively await the update from createVue or any other tool used in setting up your project to incorporate the necessary dependencies for Typescript 5.0. However, understanding the cause of the error and following these steps can help resolve it at present + recreate if needed.

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

The value I'm receiving for my list of objects is not accurate

Currently, I'm experimenting with implementing TYPEHEAD for user input using the ng-bootstrap library. The goal is to display a list of objects (similar to a select option without a dropdown box): HTML <input type="search" #instance="ngbTy ...

angulartypescriptng-bootstrap

Is the Angular Library tslib peer dependency necessary for library publication?

I have developed a library that does not directly import anything from tslib. Check out the library here Do we really need to maintain this peer dependency? If not, how can we remove it when generating the library build? I have also posted this question ...

javascriptangulartypescriptangular-cliangular-library

Unraveling the mystery of unwrapping an async or sync generator

Is there a way to extract the inner return type of an async generator or sync generator? In other words, I'm searching for something similar to Awaited which is used for promises. For promises, I would typically do: async function foo() { } let ret ...

typescriptgenerator

Which is better suitable in TypeScript generics: void, never, or undefined?

Curious about this topic. I am seeking a definitive answer to clarify my understanding. My goal is to specify to the compiler/language service/reader that T should be absolutely nothing, empty, or null. I am unsure whether void, never, or undefined is the ...

typescript

Extract HTML content using CKEditor

Hey there! I'm in need of some help with getting user-entered data from a textarea. I've already attempted using CKEDITOR.instances.editor1.getData() and CKEDITOR.instances.ckeditor.document.getBody.getHtml(), but unfortunately both only return ...

angulartypescriptckeditor

Issue with TypeScript type narrowing when working with union types

Why is it that the type narrowing isn't functioning in these code snippets? const data: { num: number } | { str: string } if ("num" in data) { data // { num: number; } | { str: string; } } Even after adding a type discriminant, the issue persists ...

typescript

The TypeScript interpreter fails to identify declaration files

During my unit testing, I encountered a challenge with code that relies on interfaces and classes not available for import but can be included in intellisense through d.ts files. Despite specifying the "include" property in my tsconfig to cover those files ...

typescriptunit-testingmocha.jsts-node

Tips for including additional properties to a <button> element using ReactJS and Typescript

Currently, I am in the process of creating a unique component which consists of an ordinary <button> tag and has a new prop called aria-current. The issue at hand is that Typescript is flagging an error stating that this property does not exist with ...

reactjstypescript

Function exported as default in Typescript

My current version of TypeScript is 1.6.2 and we compile it to ECMA 5. I am a beginner in TypeScript, so please bear with me. These are the imported library typings. The contents of redux-thunk.d.ts: declare module "redux-thunk" { import { Middle ...

javascripttypescriptdefault

Navigating through nested Firebase realtime DB queries using await/async techniques

In the process of developing a Firebase function (Gist), I encountered a challenge that I'm seeking assistance for. The function starts by querying a realtime database reference (events) using this code: await admin.database().ref('/events_geo ...

typescriptfirebasefirebase-realtime-databaseasync-await

The error message "Property '$store' is not defined on type 'ComponentPublicInstance' when using Vuex 4 with TypeScript" indicates that the property '$store' is not recognized

I'm currently working on a project that involves using TypeScript and Vue with Vuex. I've encountered an error in VSCode that says: Property '$store' does not exist on type 'ComponentPublicInstance<{}, {}, {}, { errors(): any; } ...

typescriptvue.jsvisual-studio-codevuex

"Enhancing a many-to-many relationship with indexing in TypeORM: A step-by-step guide

Is it possible to add an index to the relation columns when creating a many-to-many relationship in typeORM entities? @Entity() export class Tag { @Column() id: number //@Index() does not work here... @ManyToMany(() => Todo, (todo) => todo ...

javascriptnode.jstypescriptnestjstypeorm

Create an Angular 2 webpack production project and ensure that the dist folder does not contain any source code

I am currently developing a web application using Angular 2 with TypeScript and angular-cli. I needed to test the application on the server without uploading the source code, so I used the command "ng build --prod". Despite deleting all .map files from the ...

javascriptangulartypescriptwebpackproduction

Changing {number, Observable<string>} to Observable<number, string> is a necessary transformation to be made

Is there a way to convert an array of objects with the following structure: { id: number, data: Observable<string> } into an array of objects with this structure: Observable<{id: number, data: string}> using only RxJS operators? ...

typescriptrxjs

Using Jimp to load a font and retrieve its Base64 representation

I am currently working in Angular with Jimp, attempting to overlay text onto an existing image. However, the image is not updating as expected. const Jimp = require('jimp') var _this = this; Jimp.read("assets/TimeLine.png").then(function ( ...

angulartypescriptlambdajimp

What sets apart an index signature from a Record when dealing with an empty object?

I'm struggling to differentiate between index signatures and record types. Can someone clarify the distinctions and suggest when each should be used? In particular, I want to specify the type of an object with random strings for keys and values that ...

typescriptmapped-typesindex-signature

Filtering deeply nested elements in TypeScript/JavaScript using advanced techniques

Given the provided structure and data: interface GrandChild { id: number, values: Array<string>, } interface Child { id: number, subItems: Array<GrandChild> } interface Foo { items: Array<Child> } const data: Foo = ...

javascriptarraystypescriptfilter

Angular 2 Quickstart encountered a 404 error when trying to retrieve the /app/main.js

I'm attempting to follow the Angular 2 quickstart guide, but I'm having trouble getting it to work. I've searched for similar questions but haven't found a solution yet. Can anyone assist me with this? Here is my code: app.component.t ...

typescriptangular

Exploring TypeScript Generics and the Concept of Function Overloading

How can I create a factory function that returns another function and accepts either one or two generic types (R and an optional P) in TypeScript? If only one generic type is provided, the factory function should return a function with the shape () => ...

typescript

When using ngStyle to bind a variable, the binding variable will be null

Currently, I am attempting to utilize ngStyle to set the background image. <div class="artist-banner fluid-banner-wrapper" [ngStyle]="{'background-image': 'url(../imgs/banner/' + event?.category + '.jpg)' }"> The fun ...

angulartypescriptng-style