qn: Error using $chakraColorMode method with typescript
lianulloa opened this issue · comments
Describe the bug
I have just create a brand new nuxt.js project, with chakra-ui and typescript and if I set script tag's lang attribute to "ts", then it marks me an error over any use of
this.$chakraColorMode(), this.$chakraTheme(), this.$toggleColorMode, this.$toast()
The error: Property '$chakraColorMode' does not exist on type 'CombinedVueInstance<Vue, unknown, unknown, unknown, Readonly<Record<never, any>>>'.Vetur(2339)
Is there any way to work around this??
To Reproduce
Steps to reproduce the behavior:
- create a nuxt app with
yarn create nuxt-app <project-name> - Select chakra-ui and typescript modules
- Activate runtime linting (ignore static/.sw.js)
- See error in page index
Expected behavior
Have no errors since this method is injected by chakra-ui
Screenshots
Desktop (please complete the following information):
- OS: [e.g. MacOS Big Sur]
Attempted to create a repo that types some of the properties here. Wanna take a look? @lianulloa
https://github.com/codebender828/recreate-v0-typescript-injectables/blob/main/theme.d.ts
@codebender828 theme.d.ts did the trick for the errors inside the file,
but I still get these ones on the console
Seems like it doesn't identify this as a Vue's instance, but just the object containing it
the good part is that it doesn't prevent the app from starting
This last was my fault. I just needed to use Vue.extend https://vuejs.org/v2/guide/typescript.html#Basic-Usage
@codebender828 Also, by default $chakraTheme is used as a function (and it is defined as function inside theme.d.ts as well) but it is undefined.
Instead I can use it through this.$chakra.theme (found this by searching in chakra-ui's doc for vue) but it then shows an error
Since $chakraTheme, $chakraColorMode are provided by CThemeProvider and CColorModeProvider, and only exist within those components, I think it makes little sense to declare them on the global Vue instance. However, as it is intended for global use, it might make sense to move this functionality out of those two components into a client-side plugin which actually makes these properties available on the Vue instance and context.
@Pwuts Good point. I've seen the pull request onn #473. It looks good. Does it satisfy the typescript requirements for component properties? As I haven't yet used Chakra UI Vue v0.x with Typescript extensively before, I may not have sufficient experience of everything that would be required to go into it. I'd like to schedule a new release this weekend. Happy to have you take a closer look.
@codebender828 I'll look into the props specifically when I have time, which is probably going to be monday at the earliest.
I updated my package.json to use "@chakra-ui/nuxt": "^0.4.0" ( I think the fix got deployed there) but I still need theme.d.ts to remove the errors.
Also, the default example gets broken (in Nuxt)
