No matter in VSCode TS extension or volar, this is very easy to achieve. I believe the reason VSCode TS extension does not support this feature is that for large projects, each language server instance of tsconfig will occupies a lot of system resources.

For now, I hope that volar is consistent with the VSCode TS extension.

I thought using "solution-style" tsconfig files solved precisely this problem, but it doesn't seem to work :( https://www.typescriptlang.org/docs/handbook/project-references.html#overall-structure

@NoelDeMartin In my understanding, this still requires putting "tsconfig.json" in a subdirectory to specify the IDE TS behavior of a single subdirectory, it cannot solve the problem raised by @modularcoder.

btw this is just what volar doing 👀
https://github.com/johnsoncodehk/volar/blob/master/tsconfig.build.json

Yeah, unfortunately with my file organization methodology I always co-locate stories of component in the same place where the described component is instead of other directory root for a better development experience.

@modularcoder we had a complex monorepo, but this fix solved the issue for us: #592 (comment) VERY EASY TO APPLY!

Try add "stories/**/*.vue" to include.

Tried this but no difference. It still complains about jsx.

Which file to complain? And please show me the error message.

I made a mistake, it is working now. Thanks for your help :)

Note:
I did not find a suitable workaround for @apollo/client/testing yet (used eg for unit testing components that use apollo client).
So as soon as I import eg MockedProvider, MockLink or MockedResponse I get the react jsx issues.

The issue vuejs/apollo#1003 is requesting a react independent solution for testing apollo graphql usage. There is also an alternative listed there.

You can import MockLink and MockedResponse from @apollo/client/utilities/testing/mocking/mockLink without triggering the react dependency. So that should probably solve the apollo dependencies.

import { MockLink } from "@apollo/client/utilities/testing/mocking/mockLink";
import { MockedResponse } from "@apollo/client/utilities/testing/mocking/mockLink";

const mockLink = new MockLink([], true);
// ...

const getObjectsResponses: MockedResponse[] = [
// ...
];

just for reference: I also had to update the transformIgnorePatterns in my jest.config.js as the 'deep link libraries' were not transformed. my config looks about like this:

module.exports = {
  // ...
  transformIgnorePatterns: [
    // see https://jestjs.io/docs/configuration#transformignorepatterns-arraystring
    // apollo part needed because we for tests we import eg @apollo/client/utilities/testing/mockLink
    // instead of @apollo/client/testing (because in this way we have no dependency to react)
    "/node_modules/(?!(@storybook/.*\\.vue$)|(@apollo/client/utilities/.*\\.js$)|(@apollo/client/link/.*\\.js$))",
  ],
  // ...
};

@tft7000 with this fix: #592 (comment) whatever libs use @types/react doesn't even matter ;)

@dominikklein I think this method is suitable for projects that don't actually need react types reference.

But if you really need to reference the react type, due to the limitation of volar, as I mentioned in this topic, you already need to exclude the files that direct or indirect reference to react types.

Ah thanks this make sense. We use storybook in our Vue project and also without any usage of import { Story } from '@storybook/vue3' the following error is present: Property 'class' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'. Did you mean 'className'?ts(2322).
I tested already all this workarounds and nothing seems to work for us.

If the problem still on, @types/react may include by some import statement indirectly, you need to find it out.

I guess you did not exclude all react types indirect references files. It not only comes from your code, but also from packages in node_modules.
I know it is not easy to find, if you can provide a repro case and I will check.

thanks for your input, i was able to fix the problem, with usage of types: [...] and the exclude, i think before i tested it not together :-|

@dominikklein this is another great fix you can try: #592 (comment)

To try out this workaround, I added a jsxIssue.d.ts file in my src Folder:

declare namespace React {
  interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
    class?: string;
  }
}

and set compilerOptions.skipLibCheck to true in tsconfig.json:

{
  "compilerOptions": {
    // ...
    "skipLibCheck": true,
  },
  // ...
}

For me it seems to solve the 'Did you mean className?' error.

However the "JSX element type '_VLS*' does not have any construct or call signatures." error is still present.
Note: this error comes from slots, eg: <slot />

only "class" error can be solved, I tried to resolve "JSX element type '_VLS*' using the same pattern, didn't work it out yet.

@yuquanwang see #592 (comment) for another, potentially better fix for this!

thanks!

You may have to create shims-vue.d.ts to resolve. If you do, you may want also add shims-vue.d.ts in exclude.

Fundamentally, it best be solved from storybook.

@johnsoncodehk is there any way we can create a fork of storybook that addresses some of the issues? Or is it a deeper problem that's not easily solved.

@mesqueeb I'm not familiar with storybook, you may need to ask the maintainer of storybook if removing @types/react from the dependency has any effect.

@thalesagapito see #592 (comment) for a good fix!

@productdevbook see #592 (comment) for a better fix : )

@kalvenschraut see #592 (comment) for a better fix : )

In case anybody using PNPM in a monorepo is facing the same issue, I finished up splitting the code in two folders, one with my component lib, another one with storybook.

Thanks for this. Worked for me.

Works. Now I have this error "Cannot find namespace 'React'"

/home/me/Projects/my-project/node_modules/@storybook/theming/dist/ts3.4/index.d.ts(162,31):
162:31 Cannot find namespace 'React'.
    160 |      */
    161 |     withComponent<NewTag extends keyof JSXInEl>(tag: NewTag): StyledComponent<JSXInEl[NewTag], StyleProps, Theme>;
  > 162 |     withComponent<Tag extends React.ComponentType<any>>(tag: Tag): StyledComponent<PropsOf<Tag>, StyleProps, Theme>;

I would suggest to enable skipLibCheck in tsconfig.json

I encountered this issue with Vite + Vue on NPM. For me, this solution was not enough since even though some dependencies got stubbed, there are still others that's using the non-stubbed version. Fortunately this comment gave me an idea.

Added the following to my package.json and it worked!

"overrides": {
    "@types/react": "file:stub/types__react"
}

Note
overrides in package.json is available on NPM v8.3.0 and up (as it says here)

Goodness gracious 🙌🏽
Removing the preact types was what did it for me as well

npm i && npx rimraf./node_modules/@types/react is what I ended up doing without making the other team members ask what the hell is that for.

Rimraf solution saves my day.
Thank you very much.

Thanks you very much too for the Rimraf solution ! That's work for me too with @fullcalendar/vue3, (composition api) and Volar extension.

If you're using pnpm (and possibly workspaces) you'll need to remove additional folders. I put the following in a bash script which I run on postinstall and it seems to work for me:

#!/bin/bash

# Remove default npm types
rm -rf ./node_modules/@types/react

# Remove types in pnpm folder
find ./node_modules/.pnpm -type d -name '@types+react@*' -print0 | xargs -0 rm -rf

Thank you @johnsoncodehk ! I'm using @fullcalendar/vue3 and preact types were messing up attributes in templates. I removed them using @Jonny-china's solution but I'd rather replace them using this method. This is what my final tsconfig.json looks like. I used npm init vue/@latest which scaffolds from Vue's create-vue repository. The relevant part is paths but I wanted to include the whole file for context.

// stub/empty.d.ts
export {}

// tsconfig.json

{
  "extends": "@vue/tsconfig/tsconfig.web.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "preact/*": ["./stub/empty.d.ts"]
    }
  },

  "references": [
    {
      "path": "./tsconfig.vite-config.json"
    }
  ]
}

Just to note, with the original (npm install-based) solution linked above I had no issues in the IDE, but instead there were compilation errors on npm run build. With this solution here everything works just fine.

What I missed at first is that the critical part is not (just) the paths change but actually the types option, to enable whitelisting of type packages instead of just loading everything in node_modules. So don't be stupid like me, add that empty types array as well 😃

For anyone using Nuxt 3, it generates its own tsconfig.json but you can put this in your nuxt.config.ts for the same result.

  alias: {
    'preact/*': './stub/empty',
  }

Thank you @johnsoncodehk ! I'm using @fullcalendar/vue3 and preact types were messing up attributes in templates. I removed them using @Jonny-china's solution but I'd rather replace them using this method. This is what my final tsconfig.json looks like. I used npm init vue/@latest which scaffolds from Vue's create-vue repository. The relevant part is paths but I wanted to include the whole file for context.

// stub/empty.d.ts
export {}

// tsconfig.json

{
  "extends": "@vue/tsconfig/tsconfig.web.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "preact/*": ["./stub/empty.d.ts"]
    }
  },

  "references": [
    {
      "path": "./tsconfig.vite-config.json"
    }
  ]
}

so cool!!!

太棒了！解决了引入@antv/g2导致的该问题

See #592 (reply in thread)

Did you try the workaround that I posted below? Just curious to see if it works for you.

I've just tested it and it sort of works for me but I don't get Vue intellisense anymore. My shim file looked this way:

declare module "*.vue" {
  import { DefineComponent } from "vue";
  const component: DefineComponent<{}, {}, any>;
  export default component;
}

and hovering over the custom component in the template I get on-hover tooltips + "goto definition" functionality, etc. The fun thing is - it is not declare module "react" that breaks my intellisense. It's actually import { AriaAttributes, DOMAttributes } from "react"; that does. Which seems weird because react is installed and both AriaAttributes and DOMAttributes are discoverable.

Did you try installing react?

Are you using shims-vue.d.ts or shims.d.ts? To avoid confusion, try naming the file react.d.ts. TypeScript will read it just the same. I would not change the original shims-vue.d.ts.

Other people have noted that the solution works. See for example https://linguinecode.com/post/how-to-add-attributes-to-html-element-in-typescript (rel? in our case becomes class?, as per the above-mentioned link).

Tried both - placing it in a separate shims.d.ts and having together with existing vue declaration. Manually installing react helps to get intellisense back but I can't install it just for that, makes no sense... I have storybook installed and I think it is pulling react under the hood. I've also tried removing node_modules and lock file and install everything from scratch. The issue with intellisense is gone as well as JSX problems. I'm not even using the shims file right now.
Thanks for your help!

You are only borrowing some typings from react, and the typings will be gone after compilation.

You could try to build your dist without the workaround, take a look at the folder size, then build with the workaround and take a look at the folder size for a second time.

Update. If you add skipLibCheck = true in your tsconfig.ts file, then importing the react typings won't be necessary;

{
  "compilerOptions": {
    // ...
    "skipLibCheck": true,
  },
  // ...
}

Removing both the node_modules folder and the yarn.lock file did not do anything for me. After reloading vscode, the problem came back, but it's good that it worked for you.

If the problem comes back, at least you know what to do.

Take care :)

Thank @iknowmagic, this worked for me 👏

Although, I might say, it's a bit annoying having a react.d.ts file in a Vue codebase 😂
Hope this still gets to be fixed within Volar itself, but for now this is the only fix that worked for me!

hey ! I set "skipLibCheck": true, in tsconfig.json and not install react in my vue3 project, I got the error : Can't find the Name AriaAttributes; should I install react?

Other solutions outlined here are all much better imo.

Hey just to document a tiny gotcha - this worked for a vue.js code base that had the React className suggestion problem. Sadly, my excitement mellowed when I realized that it needs the vue class array variation typed, too.

UPDATE: Also the same problem is happening on <svg> elements using the class attribute:

import { AriaAttributes, DOMAttributes } from 'react'

declare module 'react' {
  interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
    class?: string | string[]
  }
  interface SVGProps<T> extends AriaAttributes, DOMAttributes<T> {
    // extends React's SVGProps
    class?: string | string[]
    'xml:space'?: string
  }
}

Would be awesome to land & resolve this -> it's really a big drawback to not be able to use typescript checking for storybook stories.

This may not happen (soon) because the move to dependencies was part of a bugfix. Original PR

I see, thanks!

As per @ndelangen's answer to your question here it sounds like in storybook 7 react types will be fully encapsulated though 🎊

I just saw! Sweet, looking forward to it