There's too many errors from VSCode out of the box

There's too many errors coming from all Vue files.
Is there any way to fix them?
Please help.

Cheers,
Mizan

Example:
* Account.vue

Type '{ href: string; class: string; dataBsToggle: string; "data-bs-toggle": string; dataBsTarget: string; "data-bs-target": string; }' is not assignable to type 'HTMLAttributes'.
Property 'dataBsToggle' does not exist on type 'HTMLAttributes'.ts(2322)

* App.vue
const RouterView: new () => {
$props: AllowedComponentProps & ComponentCustomProps & VNodeProps & RouterViewProps;
$slots: {
...;
};
}
'RouterView' cannot be used as a JSX component.
Its instance type '{ $props: AllowedComponentProps & ComponentCustomProps & VNodeProps & RouterViewProps; $slots: { ...; }; }' is not a valid JSX element.ts(2786)

* Settings.vue
JSX element class does not support attributes because it does not have a 'props' property.ts(2607)
'Field' cannot be used as a JSX component.
Its instance type '{ $: ComponentInternalInstance; $data: {}; $props: Partial & Omit; ... 10 more ...; $watch(source: string | Function, cb: Function, options?: WatchOptions...' is not a valid JSX element.ts(2786)

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 (1)

Hi,

I assume that you are using the Volar extension for your VS code.

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 a fix please refer to the following Volar GitHub issue.
https://github.com/johnsoncodehk/volar/discussions/592

To disable a fullcalendar extension please 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.

Regards,
Lauris Stepanovs,
Keenthemes Support Team

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  :(