question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

A wild defineComponent() Warning appears!

See original GitHub issue

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:

image

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.

Issue Analytics

  • State:closed
  • Created a year ago
  • Reactions:16
  • Comments:10 (2 by maintainers)

github_iconTop GitHub Comments

16reactions
Garmagoncommented, May 11, 2022

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.

11reactions
johnsoncodehkcommented, May 11, 2022

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

'defineComponent' in Vue 3 Is Pure Magic! - Telerik
I am sure you have already seen that defineComponent is the key word for TypeScript in Vue 3—but do you know how it...
Read more >
Getting error in unit test from new vue 3 project generated by CLI
declare module '*.vue' { import { DefineComponent } from 'vue'; ... Looks like shallowMount requires propsData , not props .
Read more >
Getting Started with Niagara 4 - LG HVAC
TABLE OF SYMBOLS. This symbol indicates an imminently hazardous situation which, if not avoided, will result in death or serious injury.
Read more >
What's new in Vue 3.1? - Ninja Squad
When running the Vue 2 application with Vue 3, you'll see warnings explaining what you'll need to change to use the Vue 3...
Read more >
Vue 3 Composition API - watch and watchEffect - This Dot Labs
With Vue 2, developers were reliant on the Options API to build single-file components, which enforced a level of structure to how the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found