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

【问题标题】：Chakra UI Setup with Next.js Throwing Error带有 Next.js 抛出错误的 Chakra UI 设置
【发布时间】：2021-01-10 20:56:53
【问题描述】：

我希望通过一个简单的 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 降级到 1.0.0 看看它是否有效。如果它可以在 node_modules 中找到导出的组件，然后升级回来，看看该组件是否像 1.0.0 一样导出。从 0.8.0 升级到 1.0.0 时我不得不这样做，最终不得不在我的项目剩余时间内保持在 0.8.0。
我可以确认降级到 1.0.0 可以解决，虽然不是理想的解决方案
谢谢大家，非常感谢。恢复已成功，请继续关注修复。

标签： next.js chakra-ui

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

例如：“@chakra-ui/react”：“1.0.4”

【讨论】：