Game-Hub Project in react course (unsolved for me)

React
1

Hello,

I am encountering errors upon trying to get the ChakraProvider set up and I have recently tried troubleshooting with the steps in the other posts and to no avail.

I am unable to follow along with the lesson due to the terminal outputting a problem that states…

" Property ‘value’ is missing in type ‘{ children: Element; }’ but required in type ‘ChakraProviderProps’. "

and

" ‘value’ is declared here. "

I have gone to the chakra website and tried following the set up instructions for both versions 3.0 and 2.10 and I still am unable to get a simple button to import or work due to these declarations and such…

I am at a loss and don’t know what exactly I need to do from here on in order to possibly continue with the course.

I will attach a photo of the current file and problem listed in the terminal using version 2.10 of chakra UI as I have already deleted the files multiple times and re created multiple times attempting to get any of these to work.

image
image1110×838 24.3 KB

This is from version 2.10, following the lesson exactly and encountering problems.

I got tired of retyping game-hub so I tried a different name for it that was similar.

1 Like
2

Okay, nevermind I am back on track now.

I just decided to use the Vite Template under version 3.0 and literally copied and pasted everything, overwriting what was in my main.tsx file and it cleared the errors for me.

I am continuing with the course and the button part of the project is working now.

1 Like
3

I had a similar problem when I first intalled Chakra v3.0. I am not sure it was a version problem but the course used [email protected] / [email protected] / [email protected].

So I created a new project folder and npm installed everything strictly along these versions. And make sure , if you are using vscode, select a typescript of the workspace version, in case you have a global ts of another version installed already. If you add these lines into vscode setting.json file

{
“typescript.tsdk”: “node_modules\typescript\lib”,
“typescript.enablePromptUseWorkspaceTsdk”: true
}

it will lock in the ts version whenever the workspace is opened.

These kept it all good till the end of the entire project.