I have this to templates main.jsx and app.jsx
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import { Provider } from "@chakra-ui/react";
ReactDOM.createRoot(document.getElementById("root")).render(
<React.StrictMode>
<Provider>
<App />
</Provider>
</React.StrictMode>
);
and app.jsx
import { Button } from "@chakra-ui/react";
function App() {
return (
<>
<Button>Hello!</Button>
</>
);
}
export default App;
I’m trying to configure and use Chakra-UI but that button won’t be added there with everything that I tried
I also tried this in main.js
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import ChakraProvider from "@chakra-ui/react";
ReactDOM.createRoot(document.getElementById("root")).render(
<React.StrictMode>
<ChakraProvider>
<App />
</ChakraProvider>
</React.StrictMode>
);
The error for the first type of main.jsx is
The requested module '/node_modules/.vite/deps/@chakra-ui_react.js?v=88ddfe76' does not provide an export named 'Provider' (at main.jsx:4:10)
And for the second type
The requested module '/node_modules/.vite/deps/@chakra-ui_react.js?v=88ddfe76' does not provide an export named 'default' (at main.jsx:4:8)
Please help me with some ideas…