带有 Next.js 抛出错误的 Chakra UI 设置

问题描述

我希望通过一个简单的 Next.js 应用程序来设置 Chakra UI（最新的 V1）。按照 https://chakra-ui.com/docs/getting-started 中的“入门”步骤操作后，我在运行开发服务器时遇到以下错误：

error - ./node_modules/@chakra-ui/portal/dist/esm/portal.js
Attempted import error: 'useCallbackRef' is not exported from '@chakra-ui/hooks'.

这是我的 _app.js 文件：

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


function MyApp({ Component,pageProps }) {
  return (
    <ChakraProvider>
      <Component {...pageProps} />
    </ChakraProvider>
  );  
}

export default MyApp

package.json：

{
  "name": "test","version": "0.1.0","private": true,"scripts": {
    "dev": "next dev","build": "next build","start": "next start"
  },"dependencies": {
    "@chakra-ui/react": "^1.1.3","@emotion/react": "^11.1.4","@emotion/styled": "^11.0.0","framer-motion": "^3.2.0","next": "10.0.5","react": "17.0.1","react-dom": "17.0.1"
  }
}

我已经翻遍了规定的 portal.js 节点模块，但看起来没有什么不妥。

非常感谢您的帮助，提前感谢您的时间。

解决方法

设置版本为@chakra-ui/react": "1.1.2",

,

这是一个错误，他们正在修复：https://github.com/chakra-ui/chakra-ui/issues/3006

现在只需恢复到较低版本，直到修复完成。

,

同样的问题，获取一个旧的 chakra-ui 版本。

例如："@chakra-ui/react": "1.0.4"