2

I'm looking to get Chakra UI set up (latest V1) with a simple Next.js app. Having followed the 'getting started' steps at https://chakra-ui.com/docs/getting-started I'm running into the following error when running dev server:

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

Here's my _app.js file:

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"
  }
}

I've had a rummage through the prescribed portal.js node module, but there doesn't look to be anything untoward.

Any help would be greatly appreciated, thanks for your time in advance.

Zsolt Meszaros
  • 8,506
  • 12
  • 20
  • 30
jason ewins
  • 33
  • 6
  • Try downgrading Chakra to 1.0.0 and see if it works. If it works find the exported component in the node_modules, then upgrade back, and see if the component is exported like in 1.0.0. I was having to do this when upgrading from 0.8.0 to 1.0.0 and eventually had to stay at 0.8.0 for the remaining duration of my project. – A Webb Jan 10 '21 at 21:06
  • I am facing the same problem in react project – Aman-D Jan 11 '21 at 07:07
  • I can confirm downgrading to 1.0.0 solves it, although not the ideal solution – Osmel Mora Jan 11 '21 at 09:05
  • Thanks guys, much appreciated. Reverting back has worked, shall keep my eye on the fix. – jason ewins Jan 12 '21 at 12:56

3 Answers3

3

Set version to @chakra-ui/react": "1.1.2",

mickuki321
  • 31
  • 1
2

It's a bug and they are working on a fix: https://github.com/chakra-ui/chakra-ui/issues/3006

For now just revert to a lower version until the fix is through.

Kahlil Lechelt
  • 556
  • 2
  • 11
0

Same problem here, get a older chakra-ui version.

For example: "@chakra-ui/react": "1.0.4"

Bubexel
  • 19
  • 2