Chakra-UI配置报错：Provider/ChakraProvider导入失败，按钮无法渲染

问题场景 #

配置Chakra-UI后按钮无法正常渲染，尝试两种main.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>
);

报错信息：

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)

第二种写法及报错 #

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 requested module '/node_modules/.vite/deps/@chakra-ui_react.js?v=88ddfe76' does not provide an export named 'default' (at main.jsx:4:8)

错误原因 #

• Chakra-UI v1及以上版本中，全局提供者组件是命名导出的ChakraProvider，不存在名为Provider的导出，第一种写法错用了不存在的导出。
• 第二种写法将命名导出的ChakraProvider当成默认导入，不符合模块导出规则，导致语法错误。

解决步骤 #

1. 确认已安装完整的Chakra-UI依赖（若未安装，执行以下命令）：

npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion

2. 修改main.jsx的导入方式，正确导入命名导出的ChakraProvider：

正确的main.jsx代码 #

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>
);

app.jsx代码保持不变 #

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

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

export default App;

内容的提问来源于stack exchange，提问作者JulianAGG B