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

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (4)

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

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:


  1. Remove dependencies listed below from you package.json:

  2. "@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",

  3. Remove these plugin imports from file components/calendar/CalendarApp1.vue.
  4. Then delete package-lock.json/yarn.lock and node_modules.
  5. Install dependencies again with yarn or npm install commands.
  6. Rerun your Visual Studio Code.

Thank you!

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(