Component tags are always highlighted in red (idem like #1172)

[stefaanMLB]

Same problem like #1172.
Same thing in the volare-starter project (pulled, not changed in any way)

jsx property set as requested in tsconfig.json

"jsx": "preserve"

How can I debug this problem further ?

[plashenkov]

I have the same problem for "jsx": "preserve" too.

[johnsoncodehk]

This error is due to missing @vue/runtime-dom because you do not have install node_modules in volare-starter.

[johnsoncodehk]

@plashenkov Make sure you have put it in compilerOptions, see #1219 (comment).

[stefaanMLB]

Sorry, no change. Example in starter project, after vscode reload

package.json

{
  "name": "volar-starter",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "vue": "next"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "latest",
    "@volar-plugins/prettier-html": "latest",
    "@vue/compiler-sfc": "latest",
    "@vue/runtime-dom": "^3.2.31",
    "typescript": "latest",
    "vite": "latest",
    "vue-tsc": "latest"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "lib": ["esnext", "dom"],
    "types": ["vite/client"]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

[johnsoncodehk]

@stefaanMLB Please check if you have disabled editor.semanticHighlighting.enabled in vscode settings, you need to enable it or use configuredByTheme.

[stefaanMLB]

This was set to configuredByTheme, I changed to true`. This doesn't help.

[negipoyoc]

I have the same problem.

[johnsoncodehk]

@stefaanMLB Please follow steps.

1. config "volar.vueserver.useSecondServer": true and "volar-language-features-2.trace.server": "verbose" in volar-starter vscode workspace settings.
2. Reload vscode window
3. Open src/App.vue
4. Open output -> Volar - Second Language Features Server, search Received response 'textDocument/semanticTokens/range and show me the response log.

[negipoyoc]

@johnsoncodehk
I tried the above Step, but unlike yours, the contents of the "data" is empty.

[stefaanMLB]

@johnsoncodehk thanks for the precise instructions. appreciating it.
I have the search string 5x in the output, so I included some more text just in case. Seems the text you're looking for is in there twice

[Trace - 07:11:35] Received response 'textDocument/semanticTokens/range - (5)' in 3141ms.
Result: {
    "resultId": "1651727495813",
    "data": [
        2,
        3,
        10,
        12,
        0
    ]
}


[Trace - 07:11:35] Received response 'textDocument/documentLink - (7)' in 2502ms.
Result: [
    {
        "range": {
            "start": {
                "line": 1,
                "character": 27
            },
            "end": {
                "line": 1,
                "character": 44
            }
        },
        "target": "file:///c%3A/Users/lcartreul/Documents/projecten/volar-starter/src/assets/logo.png"
    }
]


[Trace - 07:11:35] Received response 'textDocument/codeLens - (8)' in 2455ms.
Result: []


[Trace - 07:11:35] Received response 'textDocument/codeLens - (6)' in 2659ms.
Result: []


[Trace - 07:11:35] Received request 'vue/docVersion - (10)'.
Params: {
    "uri": "file:///c%3A/Users/lcartreul/Documents/projecten/volar-starter/src/App.vue"
}

[johnsoncodehk]

@negipoyoc Do you have install node_modules of volar-starter?

@stefaanMLB Seems you have correct response data, please try:

1. Update vscode if it can.
2. Check what extensions it may affect vue document you have installed and try disable it just keep volar. (Help: Start Extension Bisect command may help)

[stefaanMLB]

@johnsoncodehk
didn't help.
I tried to uninstall and reinstall Volar, I get below error message on every reload

I only have these Vue-related extension installed

[negipoyoc]

@johnsoncodehk Hello. Thank you for your answer.

It seems that the data was Empty because I checked the output without resolving the dependency with volar-starter.
After doing the npm install, the Component was highlighted successfully.

I then reviewed the tsconfig.json of my project, which has a similar problem, while looking at the tsconfig.json of volar-starter.

By adding the following to tsconfig.json, I was able to get the highlighting and the problem was resolved in my project.

 "compilerOptions": {
    "jsx": "preserve",
  }

Thank you for addressing the problem despite my simple carelessness.

[yoyo837]

Same here.

[johnsoncodehk]

@stefaanMLB For that message, see #1124 (comment).
But I have no clue as to why your component is showing red, the LSP is returning the expected response, the VSCode settings is fine, if it is not the influence of other extensions, it can only be considered a problem with VSCode (but this is the least likely).

@negipoyoc It's ok, I will improve user guidance.

@yoyo837 See #1192.

[stefaanMLB]

@johnsoncodehk I tried disabling any exntensions that could interfere (like vetur), but no luck.
I can live with the problem, I'll try volar out on my home computer which has less extensions installed. Wo't have time in the first few days though.

[tol64]

@johnsoncodehk, created a new project in Nuxt 3 on a virtual machine Windows 10 (VMware). In the editor VSCode installed only one extension - Vue Language Features (Volar).

With Developer: Inspect Editor Tokens And Scopes you can see additional data, how the tag marked in red is interpreted.

The custom components look the same. In this case, the application is correctly displayed and works in the browser.

With this information in mind, how can I try to solve this problem?

[johnsoncodehk]

Please update to v0.34.17.

[tol64]

Please update to v0.34.17.

Updated to version v0.35.0 and now everything is correct.
Thank you! 👍

[stefaanMLB]

Same here, update to v0.35.0 has solved the problem.

[litvinovvo]

We using explicit components import and now it is hard to see what wasn't imported correctly

[johnsoncodehk]

We using explicit components import and now it is hard to see what wasn't imported correctly

The past behavior was abandoned to resolve the situation in this issue, if you expected the past behavior, please open a new feature request.