🍣
Chakra UIでSyntaxError: Named export 'cancelSync' not found.と出る時の対処法
状況
環境
環境構築
上記をそのまま参考にしました。
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
対処
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.
ES modulesがなんとかかんやらと書かれているが、なぜES modules.が関係しているのか、そしてそれがどうやってわかったのか謎。
調べ方等知っている方はぜひコメント欄で教えてください。よろしくお願いします。
関連ページ
Discussion