Adding storybook shows Type '{ class: string; }' is not assignable to type error

[abhic91]

I added storybook to my vue project. Once I add I get error in vs code when I set class on an element.

When I do <div class=""></div> I get

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 hover over a div, I see

(property) div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>

in vs code.

This is a vue project with .vue file.

This happens only when I add storybook. To add storybook, the command I used is

npx sb@next init --builder storybook-builder-vite

I don't know what's making vs code assume the code is React

[IanVS]

I believe this is related to storybookjs/storybook#16630, and not an issue with the builder itself.

[IanVS]

Going to close this, but let me know if you think this is an issue in this project.

[abhic91]

@IanVS Adding this fixed it. See here: vuejs/language-tools#592

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

[khusseini]

Hi there, I am facing the same issue, however adding "vite/client" does not do the trick for me.

[IanVS]

@khusseini can you please open a new issue and fill out the template?