不知道如何配置 Chakra-UI

Question

我有这个模板 main.jsx 和 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>
);

和app.jsx

import { Button } from "@chakra-ui/react";

function App() {
  return (
    <>
      <Button>Hello!</Button>
    </>
  );
}

export default App;

我正在尝试配置和使用 Chakra-UI，但该按钮不会与我尝试过的所有内容一起添加到那里 我也在 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>
);

main.jsx第一种类型的错误是

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)

对于第二种

 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)

请帮我一些想法......

Answer 1

第一个错误是由

main.jsx

文件中错误的导入语句引起的：

import { Provider } from "@chakra-ui/react";

虽然我不确定你使用的是哪个版本，但对于最新版本的 Chakra，导入语句应该是：

// Corrected (1)
import { Provider } from "@/components/ui/provider"

使用上面的导入语句，代码应该可以工作。

对于您尝试过的第二个

main.jsx

文件，

ChakraProvider

应位于大括号内，如下所示：

// Corrected (2)
import { ChakraProvider } from '@chakra-ui/react';

但是，这个导入语句来自V2.0，我不确定它在新的3.0版本中的表现如何。新 3.0 版本的文档（here）显示了导入语句 (1)。要澄清导入语句中花括号的使用，您可以查看此答案此处。