I installed Chakra UI using npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6 as suggested. However when I try to run my app now it gives me the following errors:
Uncaught TypeError: Cannot read properties of null (reading 'useMemo')
at Object.useMemo (react.development.js:1648:1)
at ThemeProvider (chakra-ui-system.esm.js:35:1)
at renderWithHooks (react-dom.development.js:16175:1)
at mountIndeterminateComponent (react-dom.development.js:20913:1)
at beginWork (react-dom.development.js:22416:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4161:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4210:1)
at invokeGuardedCallback (react-dom.development.js:4274:1)
at beginWork$1 (react-dom.development.js:27405:1)
at performUnitOfWork (react-dom.development.js:26513:1)
The above error occurred in the <ThemeProvider> component:
at ThemeProvider (http://localhost:3000/static/js/bundle.js:20476:27)
at ChakraProvider (http://localhost:3000/static/js/bundle.js:14271:24)
at ChakraProvider (http://localhost:3000/static/js/bundle.js:15656:23)
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
When stepping into the code in chakra-ui-system.esm.js, I see that this line is the issue, and that React is not defined in any scope, even though it's imported at the top of the file
var computedTheme = React.useMemo(function () {
return toCSSVar(theme);
}, [theme]);
My app code is very basic, so I am thinking it must be some issues with dependencies.
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<ChakraProvider><div></div></ChakraProvider>
</React.StrictMode>
);