Metronics 8 - Components Error with "Vue Langue Features (Volar)" plugin
Hello
I installed Metronics 8 + VS Volar pack plugins and "Vue Langue Features (Volar)" plugin show error in all components on .vue files.
For exemple here on Layout.vue all components in DOM has same message
http://a-p-c-t.fr/to-meet/Capture.JPG
http://a-p-c-t.fr/to-meet/Capture2.JPG
Do you know how can I fix this errors ?
Thank you
Tania
Replies (4)
Hi Tania!
Thank you for your feedback.
Does this error appear only in your editor?
Or it appears when you are trying to run the project with 'npm run server' too.
Hi Lauris
Thanks for reply
Yes, errors are only displayed in VSC editor. On the browser, it seems that the template works correctly.
To advance the project I am using the Vetur plugin package and not Volar, because I think it is a conflict between the template and the "Vue Langue Features (Volar)" plugin, but I am not sure of the convenience of working in this way... what do you think ?
Sorry, this is my first project in Vue 3 plus a Typescript template and I'm worried about this kind of error messages...
Regards
Tania
Hi Tania!
Again thank you for your feedback, we appreciate it a lot.
We have checked Metronic in Visual Studio Code with Volar installed, looks like the errors are related to fullcalendar plugin implementation.
We will review this and include a fix in upcoming releases.
For now as a temporary solution follow steps below:
- Remove dependencies listed below from you
package.json: - Remove these plugin imports from file
components/calendar/CalendarApp1.vue. - Then delete
package-lock.json/yarn.lockandnode_modules. - Install dependencies again with
yarnornpm installcommands. - Rerun your Visual Studio Code.
"@fullcalendar/core": "^5.9.0",
"@fullcalendar/daygrid": "^5.9.0",
"@fullcalendar/interaction": "^5.9.0",
"@fullcalendar/list": "^5.9.0",
"@fullcalendar/timegrid": "^5.9.0",Thank you!
This is the message traduction :Cannot use '__VLS_2' as JSX component.
Its instance type '{ $:ComponentInternalInstance; $data: {}; $props: Partial<{}> & Omit<Readonly<ExtractPropTypes<{ title: StringConstructor; }>> & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>; ... 10 more ...; $watch(source: string | Function, cb: Function, options?: WatchOptions<...> | undefined): WatchStopHand...' is not a valid JSX element.
Tania
