JSX issues in template

[johnsoncodehk]

Issues: #552, #568

This discussion is a summary of related issues.

Why implement template type-check by JSX?

JSX is the only way to support normal component and functional component both with generic.

What is the cause of the problem?

Template type-check (by JSX) depend to JSX namespace definition from @vue/runtime-dom.

If @vue/runtime-dom is the only module include JSX namespace definition all is good. But if node_modules exist other module has JSX namespace definition like @types/react, JSX prefers @types/react, so template type-check got unexpected results.

How to resolve?

Unfortunately, still has no found a suitable solution on the volar side. But you can setup tsconfig to avoid this problem on project side.

1. Explicit setup tsconfig types option, it can avoid TS include all types from node_modules/@types automatic.

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

2. If the problem still on, @types/react may include by some import statement indirectly, you need to find it out.
   If using storybook, it should come from import ... from '@storybook/vue3' statement, you need to exclude all files that has '@storybook/vue3' import statement.

// tsconfig.json
{
  // ...
  "exclude": ["**/*.stories.ts"]
}

---

This is the current situation, and there may be better solutions in the future.

If you can’t solve it, or if you encounter other situations and have some experience in solving it, please share it here.

[modularcoder]

Struggled a lot on this issue today. Thanks for posting.
Wondering if there's a way to instruct VSCode to use different tsconfig file based on the file extensions event if the files are co-located

Current (the whole subdir uses tsconfig.json)

tsconfig.json
src/
  Button/
    Button.vue
    ButtonService.ts
    Button.stories.ts

Desired (the needed tsconfig is used depending on the extensions)

tsconfig.app.json
tsconfig.storybook.json
src/
   Button.vue  ->  IDE uses tsconfig.app.json
   ButtonService.ts  ->  IDE uses tsconfig.app.json
   Button.stories.ts  ->  IDE uses tsconfig.stories.ts

This is easy to configure in the build tools, but not IDE (at least couldn't find it)

[johnsoncodehk]

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.

[NoelDeMartin]

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

[johnsoncodehk]

@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

[modularcoder]

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.

[mesqueeb]

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

[samydoesit]

Hello i made a vue3 storybook setup but i am failing on this also.

Even if i exclude all files in tsconfig that contain imports from storybook it's still using JSX react typings in vscode.

Am i doing something wrong implementing the workaround? https://github.com/samydoesit/vue3-library-starter-vite-storybook

tsconfig looks like this:

{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "allowJs": true,
    "moduleResolution": "node",
    "strict": true,
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "types": ["vite/client", "node"],
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"],
      "#/*": ["types/*"]
    },
    "outDir": "dist/"
  },
  "exclude": [
    "node_modules",
    ".storybook/**/*.js",
    ".storybook/**/*.ts",
    "**/*.stories.ts",
    "stories/**/*.js",
    "stories/**/*.ts",
  ],
  "include": [
    "src/**/*.js",
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.vue"
  ]
}

[johnsoncodehk]

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

[samydoesit]

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

[johnsoncodehk]

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

[samydoesit]

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

[tft7000]

In case it might help somebody: besides storybook, also the apollo graphql library can conflict.

I had an import for ApolloClient and createHttpLink that my IDE made for me:

// wrong: will lead to type conflicts with react
import { ApolloClient, createHttpLink } from "@apollo/client";

fortunately the fix in my case was easy: just import it from core:

import { ApolloClient, createHttpLink } from "@apollo/client/core";

I will add some context, so this page can more easily be found thru search engines:

• vue-tsc seems a side project from volar. that is why the same issue (?) can also affect people that do not use vscode but try to build a vue 3 vite project.
• I had two typical errors showing in complex and stripped down projects:
  • error TS2322: Type '{ class: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>'. Property 'class' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>'. Did you mean 'className'?
  • error TS2604: JSX element type '__VLS_9' does not have any construct or call signatures.
• for the storybook side, the workaround mentioned above helped me: in tsconfig.json declare explicitly the compilerOptions.types. in my use case, it looks like this:

  {
    "compilerOptions": {
      // ...
      "types": ["@intlify/vite-plugin-vue-i18n/client", "vite/client", "@types/jest"]
    }
  }

[tft7000]

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.

[tft7000]

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$))",
  ],
  // ...
};

[mesqueeb]

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

[salqueng]

Here is another temporary solution.
If you're using yarn v1, you can ignore @types/react by using resolutions.

{
  "resolutions": {
    "@types/react": "https://registry.yarnpkg.com/@favware/skip-dependency/-/skip-dependency-1.1.1.tgz"
  }
}

This will replace @types/react with an empty package, so JSX cannot use @types/react, and volar can infer JSX types correctly.

[johnsoncodehk]

@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.

[dominikklein]

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.

[johnsoncodehk]

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.

[dominikklein]

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

[mesqueeb]

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

[yuquanwang]

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

this can solve the "class" attribute problem

[tft7000]

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 />

[yuquanwang]

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

[mesqueeb]

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

[solmanter]

thanks!

[thalesagapito]

I tried excluding the *.stories.ts from tsconfig.json but now I'm facing another problem: Vue component imports aren't being recognized. Has anyone faced this?

[johnsoncodehk]

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.

[mesqueeb]

@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.

[johnsoncodehk]

@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.

[mesqueeb]

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

[productdevbook]

Hi, shims.d.ts root project created and add

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

vscode reload and fixed.

[mesqueeb]

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

[kalvenschraut]

Been trying figure this out in my project and ended up finding out one of my dependencies was pulling in preact causing the issue. Not sure how to resolve the issue besides removing the dependency itself. I am in a position of migrating to vue3 and am going to drop this package anyway just have not gotten around to cleaning up package.json.

The specific package was @fullcalendar/vue the below SS was the result of npm list preact . Hope this helps someone else out there as I just started removing packages blindly to see if it was a dependency issue as described here.

[mesqueeb]

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

[iamandrewluca]

Don't blame me. But this worked without modyfing tsconfig.json at all.
This explicitly installs @types/react from a file destination, which does not export any types

create stub/types__react stub directory

mkdir -p stub/types__react

create a stub/types__react/package.json file

touch stub/types__react/package.json

add this content to it

{
  "name": "@types/react",
  "version": "0.0.0"
}

create a stub/types__react/index.d.ts file

touch stub/types__react/index.d.ts

add an empty export, and the discussion URL for future references

// https://github.com/johnsoncodehk/volar/discussions/592
export {}

explicitly install @types/react from there

npm i -D @types/react@file:stub/types__react

In package.json you should have something like this

"@types/react": "file:stub/types__react",

npm ls @types/react
[email protected] /Users/iamandrewluca/Projects/my-project
├─┬ @nuxtjs/[email protected]
│ └─┬ @storybook/[email protected]
│   └─┬ @storybook/[email protected]
│     └─┬ @storybook/[email protected]
│       └─┬ @types/[email protected]
│         └── @types/react@ deduped -> ./stub/types__react
└── @types/react@ -> ./stub/types__react

[jadams2305]

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.

[michaelGregoire]

Thanks for this. Worked for me.

[rootux]

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>;

[iamandrewluca]

I would suggest to enable skipLibCheck in tsconfig.json

[paulcgdev]

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)

[Jonny-china]

I solved it, add a scripts to package.json.

"scripts": {
    "postinstall": "rm -rf ./node_modules/@types/react"
}

Then run npm install.

[cuzox]

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

[subev]

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.

[leixdd]

Rimraf solution saves my day.
Thank you very much.

[B3n-J1]

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

[thomasaull]

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

[johnsoncodehk]

Reference to @iamandrewluca's solution, you can also do a similar thing in tsconfig.json instead of in package.json. (Just choose the way you want)

1. Create stub/types__react/index.d.ts

// stub/types__react/index.d.ts
export { }

2. Setting react module alias in tsconfig

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": [
      // whitelist to include modules type from node_modules/@types
    ],
    "paths": {
      "react": ["./stub/types__react"]
    }
  },
}

[pholly]

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"
    }
  ]
}

[senritsu]

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 😃

[jf908]

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',
  }

[L-value]

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!!!

[baihuiru]

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

[Prohacker42]

#592 (reply in thread)

[danielshawellis]

I'm working on a Vue 3 based project that uses FullCalendar.js, and this is what worked for me:

FullCalendar depends on preact, which includes a JSX namespace definition in its src/jsx.d.ts file. I set up a postinstall script in my package.json to remove that file:

"postinstall": "rm ./node_modules/preact/src/jsx.d.ts"

Then, I deleted /node_modules/preact and ran "npm install" again to apply this change.

After that, I added "compilerOptions": { "skipLibCheck": true } to my tsconfig.json file to prevent TypeScript from complaining about the removed declaration file.

I don't love that this solution skips checking all declaration files, so if anyone knows of a better solution please let me know!

[johnsoncodehk]

See #592 (reply in thread)

[iKnowMagic]

The problem is still there, any ideas?
I am running a vue 3 project.

[iKnowMagic]

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

[desprit]

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.

[iKnowMagic]

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).

[desprit]

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!

[iKnowMagic]

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

[iKnowMagic]

The following workaround worked for me.

1. Ensure that "src/**/*.d.ts" is in the include section in your tsconfig.json
2. Add a file called react.d.ts in the src/ directory
3. Add the following code in the react.d.ts file.

You may need to install react, or update your tsconfig.json with skipLibCheck = true, as in

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

Workaround in the react.d.ts file:

import { AriaAttributes, DOMAttributes } from 'react' // not needed if skipLibCheck = true

declare module 'react' {
  interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
    // extends React's HTMLAttributes
    class?: string
  }
}

Good luck!

[jagoncalves14]

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!

[Nauxscript]

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?

[mesqueeb]

Other solutions outlined here are all much better imo.

[oberocks]

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
  }
}

[ccqgithub]

This work for me with react:

1. Add custom typeRoots types:

{
  "typeRoots": ["./types", "node_modules/@types"]
}

2. Add custom custom react type file ./types/react/index.d.ts.

3. Add path alias for react

{
    "paths": {
          "react": ["types/react/index.d.ts"]
    }
}

Missing any step, or types/react/index.d.ts with a different name, doesn't work, don't know why。

[iamandrewluca]

I hope this PR will solve completely this problem

storybookjs/storybook#18323

[BracketJohn]

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

[zachbryant]

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

[BracketJohn]

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 🎊

[zachbryant]

I just saw! Sweet, looking forward to it

[iamandrewluca]

My PR was closed, but it was fixed in v7 🎉 now we need to wait a little :)

[johnsoncodehk]

After v1.0.0-alpha.0, template is generate to regular ts code by default, so we don't have this problem by default.

But generic props type will not working with this. To generate JSX template for support generic types, you need to config "vueCompilerOptions.jsxTemplates": true in tsconfig.

---

[Update] See #592 (comment)

[yuval-agritask]

There's a fix which is ready created by @iamandrewluca, I asked to cherry pick it to the current major version so we won't need to wait and upgrade another major.
If you're also waiting for this, drop a comment in: storybookjs/storybook#18323
Hopefully the maintainers would would be then compelled to help.

[WangShixian1]

thanks guy your ads is work

[iamandrewluca]

Opened a discussion to remove react types as a transitive dependency that breaks Volar
mdx-js/mdx#2238

[zestlee1106]

Anyone else currently experiencing this bug?

I still have this bug

Adding the following to tsconfig.json results in an error in the stories.ts file

{
  "compilerOptions": {
     "types": [
       "vite/client",
       //...
     ]
  },
  "exclude": ["**/*.stories.ts"]
}

[waldemarennsaed]

I have the same issue as @zestlee1106 .

[johnsoncodehk]

Close as we have removed jsxTemplates option in #2677 and don't have this problem anymore, you can update to v1.5.0 pre-release to try it.

[nchutchind]

I couldn't get any of the answers here to work, but what finally worked for me was to just add this to my compilerOptions in tsconfig.json:

{
  "paths": {
    "react": [ "" ]
  }
}

My hope was that it would cause any attempts to load react types to fail and that seems to be what's happened. You will need to use a different tsconfig file to run storybook files, though.

I did have mild success with making the react.d.ts file to override the class type, but then it fails for object and array values, and other HTML attributes have react types when you're developing. With my change it uses Vue for all of the types.