🍣

Chakra UIでSyntaxError: Named export 'cancelSync' not found.と出る時の対処法

2022/12/26に公開約2,200字

状況

環境

環境構築

https://chakra-ui.com/getting-started/nextjs-guide
上記をそのまま参考にしました。

version

  • Chakra UI v2.4.5
  • Next.js v13.1.1
package.json
  "dependencies": {
    "@chakra-ui/react": "^2.4.5",
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@next/font": "13.1.1",
    "framer-motion": "^6.5.1",
    "next": "13.1.1",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  }

_app.js

_app.js
// pages/_app.js
import { ChakraProvider } from '@chakra-ui/react'

// 1. Import the extendTheme function
import { extendTheme } from '@chakra-ui/react'

// 2. Extend the theme to include custom colors, fonts, etc
const colors = {
  brand: {
    900: '#1a365d',
    800: '#153e75',
    700: '#2a69ac',
  },
}

const theme = extendTheme({ colors })

// 3. Pass the `theme` prop to the `ChakraProvider`
function MyApp({ Component, pageProps }) {
  return (
    <ChakraProvider theme={theme}>
      <Component {...pageProps} />
    </ChakraProvider>
  )
}

export default MyApp

対処

https://github.com/chakra-ui/chakra-ui/issues/7167
Chakla UIを2.4.2にダウングレードすれば良さそう。

chakra-ui uninstall

npm uninstall @chakra-ui/react

chakra-ui v2.4.2 install

npm i @chakra-ui/react@2.4.2

開発サーバー起動

npm run dev

結果

index.js
import Header from "components/header"
import Footer from "components/footer"
import Hero from "components/hero"
import Link from 'next/link';
import { Button, ButtonGroup } from '@chakra-ui/react'

export default function Home() {
  return (
    <>
      <Button colorScheme='blue'>Button</Button>
    </>
  )
}

これで動いた。

P.S.

https://github.com/chakra-ui/chakra-ui/issues/7167#issuecomment-1365387771
ES modulesがなんとかかんやらと書かれているが、なぜES modules.が関係しているのか、そしてそれがどうやってわかったのか謎。
調べ方等知っている方はぜひコメント欄で教えてください。よろしくお願いします。

関連ページ

https://www.chickensblog.com/docker-nginx-php81-laravel9/
https://www.chickensblog.com/coderdojo-advent-calendar-2022/
https://zenn.dev/teba_eleven/scraps/9e79cdfa03c212
https://zenn.dev/teba_eleven/articles/9da1c749c58140
https://zenn.dev/teba_eleven/articles/aa46297ed1673b

Discussion

ログインするとコメントできます