A wild defineComponent() Warning appears!

[PhilipOfMacedon]

I'm following a video tutorial to get started into Vue.js, and everything was fun and games until a few hours ago, when this warning became appearing all over my files that features a "export default {" entry:

[{
"resource": "/c:/Users/kasin/Documents/Extra/VueJS/hakurei-asobi/src/components/Task.vue",
"owner": "generated_diagnostic_collection_name#0",
"severity": 4,
"message": "Component options are wraped by defineComponent() internally to support intellisense on IDE for backward compatible, but this is an hacking which lead to this component type inconsistent with same script code on .js / .ts. Recommended wrap component options by Vue.extends() or defineComponent(). Or you can configure \"experimentalShamefullySupportOptionsApi\": true / false in \"vueCompilerOptions\" property in tsconfig / jsconfig to disable this warning.",
"source": "volar",
"startLineNumber": 6,
"startColumn": 16,
"endLineNumber": 6,
"endColumn": 16
}]

Here's a screenshot of the VSCode screen:

I don't know whether this is easily reproducible or not, I just created the simplest vue project, without even TypeScript suport in the options (I guess), so if anyone need more info, just let me know to help you help me.

[Garmagon]

I honestly don't know why would volar add a default option like this. This is instantly confusing, suddenly all the components was showing warnings and it took me a bit until I understood what is the problem. Also the option name is kinda offensive I guess, because why would it be shamefull to support Options API? New vue developers start with Options API, its in all the courses on the internet.

[MarekOravec]

Same issue for me, I installed Vue and this warning appears... Any solutions ? I have pure Vue 2 with vuetify plugin

[mcrapts]

This is terrible. Volar is the official recommended extension for VS Code + Vue 3. Volar is literally shaming the Options API (experimentalShamefullySupportOptionsApi should be set to true to ignore this warning), which is fully supported syntax. This error should not appear!

[wuguocai2000]

You can try to use vetur and turn off volar，and then restart vscode

[souadbarabad]

You can try to use vetur and turn off volar，and then restart vscode

Thank u it works !!

[PhilipOfMacedon]

It also mitigates the warning by adding the following property in your jsconfig.json:

"vueCompilerOptions": {
"experimentalShamefullySupportOptionsApi": true
}

I don't know why we should get this warning by default, since it seems to be some kind of internal API issue (at least for me), and not something wrong with my code. Was there a change on Vue standards that I don't know of?

[johnsoncodehk]

Sorry for the misnomer, I just realized that "Shamefully support options API" is incorrect meaning.

Volar cannot support intellisense for component options without defineComponent() / Vue.extend(), so Volar have to wrapped component options by defineComponent() internally with this option. But of course this is not shameful. I think this case is similar to the trade-off of pnpm hoist packages, so I reference to --shamefully-hoist option of pnpm to named the option.

This option is default enabled with warning in 0.34.12 to backward compatible for projects that migrate from Vetur. I will rollback to default disable and fix option words in next version.

[mrleblanc101]

I have this error in a Nuxt2/Vue2 projet.
Also I don't have a jsconfig or tsconfig file, why can't I disable this in the Volar VS Code settings ?
This warning does not seem well thought out at all.
Volar support both Vue 2 and Vue 3 now.
And why would this be a compiler option if this error is spawned, before compilation, in real-time ?

[Jorgehn1995]

I have this error in a Nuxt2/Vue2 projet.

Any solution por nuxt2/vue2?

[johnsoncodehk]

@mrleblanc101 Warning has been removed, please update to v0.34.14.