qn: Error using $chakraColorMode method with typescript
See original GitHub issueDescribe 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]
Issue Analytics
- State:
- Created 2 years ago
- Comments:7 (7 by maintainers)
Top Results From Across the Web
[Color Mode] Typescript Error: /@chakra-ui/color ... - GitHub
Hi, I've just setup my project and npm installed Chakra UI as instructed in the get started guide in the docs. I used...
Read more >Advanced techniques in Chakra UI - LogRocket Blog
Dive deeper into the functionality of Chakra UI with these tips and tricks explained with an example tutorial.
Read more >Color Mode - Chakra UI
useColorModeValue is a React hook used to change any value or style based on the color mode. It takes 2 arguments: the value...
Read more >Upgrading to v1 - Chakra UI
Theming API: Chakra UI now provides a new theming API which makes it easy to style components and their modifiers (sizes, variants, and...
Read more >Chakra UI color mode changes on page refresh, because of ...
the easiest solution that I found is by default chakra store color-mode in local storage so you can access it by using localStorage....
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@codebender828 I’ll look into the props specifically when I have time, which is probably going to be monday at the earliest.
Since
$chakraTheme
,$chakraColorMode
are provided byCThemeProvider
andCColorModeProvider
, and only exist within those components, I think it makes little sense to declare them on the globalVue
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.