Type '{ class: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'

Question

I am using vue, ts, vite with volar extension.

In Vs code, I get the error Type '{ class: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'. Property 'class' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'. Did you mean 'className'?ts(2322)

when I do <div class=""></div> for the class

When I hover over the div I see (property) div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>

I don't know what's making vs code assume I am using react. The file type is .vue

I disabled eslint and still get the error. It works when I run the app but it's annoying to see that error in vscode.

Am I supposed to add some d.ts file?

Answer 1

Adding this fixed it. See here: https://github.com/johnsoncodehk/volar/discussions/592

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": [
      "vite/client", // if using vite
      // ...
    ]
  }
}

I think when I added storybook it added react types

Answer 2

I had to to add <script> tags:

<script> //your code </script>