Recently, I've been encountering a strange issue with Vetur in my typescript nuxt.js project. Every component, whether it's just an empty line or contains code, displays an error message on the first line.
I can't pinpoint when this problem started occurring or what it signifies. It's puzzling!
https://i.sstatic.net/Apyiw.png
Any assistance you offer would be greatly appreciated. Thank you so much!
It's like trying to fix a small problem by causing a bigger issue! Disabling templateInterpolationService may diminish the usefulness of Vetur significantly.
I experienced issues with Vetur v0.35.0 after updating typescript > 4.4
To check the version(s) of typescript being used in your project, run npm ls typescript in the project root directory.
If you are using typescript 4.4.4 or lower, follow these steps:
Restart Vue Language Server (in VSCode):
View ->
Command Palette.. ->
Vetur:Restart VLS (Vue Language Server)
If you are using typescript 4.5 or higher, you may encounter an error. Solutions are still being researched for this scenario.
Alternatively, if you want to enforce the use of an older version of typescript system-wide, make sure you have npm version 8.3+ and utilize the new "overrides" section in package.json:
...
"overrides": {
"typescript": "4.4.4"
},
...
It was discovered that the issue at hand was due to the experimental templateInterpolationService property in Vetur. Resolving it involved setting this property to false within the vetur.config.js file:
module.exports = {
settings: {
/* .. */
'vetur.experimental.templateInterpolationService': false
/* .. */
}
};
This adjustment effectively eliminated any unexpected interference Vetur was causing with my components.
Ensuring that the global ts version of vscode is <=4.4.4, as there may be some dependencies (like @microsoft/api-extractor) using a newer version of typescript.
Create a vetur.config.js file and set "vetur.useWorkspaceDependencies": "false" in the settings. For example:
module.exports = {
settings: {
"vetur.useWorkspaceDependencies": false,
"vetur.experimental.templateInterpolationService": true
}
}
Check the OUTPUT panel in vscode for Vue Language Server messages, which may include:
[INFO ] Find node_modules paths in xxxxxxx - 247ms
[INFO ] Loaded bundled <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="26525f56435545544f5652661208120812">[email protected]</a>.
[INFO ] Loaded bundled prettier.
[INFO ] Loaded bundled @starptech/prettyhtml.
[INFO ] Loaded bundled prettier-eslint.
[INFO ] Loaded bundled prettier-tslint.
[INFO ] Loaded bundled stylus-supremacy.
[INFO ] Loaded bundled @prettier/plugin-pug.
Task completed successfully!
The issue was resolved in the latest version of Vetur which can be found here.
The update fixes template type-checking for TypeScript versions greater than or equal to 4.5. For more information, refer to issues #3323 and #3424.
Although it is not yet available on the VSCode store, you can still manually download the vetur-0.36.0.vsix from the Github release page and install it:
I've successfully created an observable from an array, but the issue is that its type shows as Observable<number> instead of Observable<number[]> getUsers(ids: string[]): Observable<number[]> { const arraySource = Observable.from ...
I have a function in my services set up like this: ` @Injectable() export class AppService { getVerifyToken(req: Request, res: Response) { try { let accessToken = process.env.ACCES_TOKEN_FB; let token = req.query["hub.verify_t ...
Whenever the specific show more button is clicked, the content should be displayed without causing the entire component to re-render. I have tried using a useState, but each time the button is clicked, the whole component re-renders, resulting in long load ...
I have a main component containing code and tables, including a modal that is displayed based on a boolean value. The main component features the following modal: <ConfirmPaymentModal ref="confirmPaymentModal" :invoice="markAsPa ...
I am working on creating a multiple select feature that displays all nodes, but only checks the ones that are present in 2 arrays. My front end is developed using Angular 8 and TypeScript. private mountSelect(nodesInRelation, lineApiKey) { console.lo ...
I am having trouble passing multiple values in the method below. Can someone help me with the correct syntax? I have attempted data: ('keyword='+$(this).val(),'id='10), as well as data: {'keyword='+$(this).val(),'id=&a ...
After successfully logging in through Facebook, my AJAX function sends information to the userpro_ajax_url. In order to run a do_action function within the success block, I am trying the following: <?php ob_start(); do_action('userpro_social_l ...
I'm finding it puzzling why .hover() is acting differently on iOS. On my desktop, I have a portfolio gallery with images that link to individual pages of my work. When hovering over an image, it slightly fades and a title animates in. However, when I ...
Currently, I am utilizing Vue in my web application for object-oriented form validation. This approach allows me to focus on back-end validation while Vue manages the rest. With a multitude of page-specific forms within my app, I find that my Vue instance ...
It has come to my attention that you have the ability to create customized errors within graphql and graphql-express. https://codeburst.io/custom-errors-and-error-reporting-in-graphql-bbd398272aeb I recently implemented a custom Error feature, but it see ...
I've been developing a Typescript React project for the past few months without any issues. However, things took a turn yesterday when I decided to run npm audit fix and npm audit fix --force in order to address some security concerns that appeared ou ...
After researching various options, I decided to use cloudinary for uploading a file to an image server from my node js api. I successfully installed the npm package for cloudinary and implemented the code based on their api documentation Below is the fun ...
I'm currently facing an issue with my Material UI Modal component in a React/Typescript project. When a card element is clicked on the site, it should display expanded information in a modal view. However, clicking on any card only shows the most rece ...
Currently, I am utilizing WebStorm as my node IDE and have found it to be quite impressive. However, one issue I am facing is figuring out how to incorporate node supervisor into my workflow within WebStorm. Has anyone successfully managed to set this up ...
I have been tasked with creating a directive that allows users to navigate to the next input or button in a modal window: .directive('autoVrm', function () { return function (scope, element, attrs) { var counter = 0; ...
I'm currently working on creating an image element with overlay text. Check out my jsx code below: <div className={styles.img}> <img src={src} alt="" /> <p>{`(${size})`}</p> </div> And here is t ...
I am currently learning front-end development and I am just starting to delve into JavaScript. Recently, when I tried to execute a piece of JavaScript code from the backend by passing some element ids, I encountered an error that says Cannot read property ...
let json=[ { metadata: { tags: [] }, sys: { space: { sys: [Object] }, id: '4gSSbjCFEorYXqrgDIP2FA', type: 'Entry', }, fields: { richTextEditor: { 'fn-US': [Object] }, short: { 'as-ds': &a ...
Having some issues with jQuery.ajax() while trying to fetch an html code snippet from table_snippet.html and replacing the element in my html code. The error handler in jQuery.ajax() gets triggered instead of the expected success handler. <!DOCTYPE H ...
Once upon a time, I used to create a plethora of buttons using a for loop. The title[] array was filled with numerous values. export const renderButtons1 = (numOfBtns,title,navigate) => { const views1 = []; for ( var i = 0; i < numOfBtns; ...