【React】ChakraUI導入方法

React

ChakraUiとは

ReactアプリケーションのUIコンポーネントライブラリです。
モジュール化されておりインポートすることで使用することができます。

環境

導入コマンド

npm i @chakra-ui/react
npm i @emotion/react
npm i @emotion/styled
npm i framer-motion@4.1.17
npm i @chakra-ui/icons

今回発生したエラー

以下のコマンド実行時に発生しました

npm i framer-motion

Failed to compile
./node_modules/framer-motion/dist/es/components/AnimatePresence/index.mjs
Can't import the named export 'Children' from non EcmaScript module (only default export is available)
This error occurred during the build time and cannot be dismissed.

解決方法

以下のようにダウングレードしたら解決しました。

# framer-motionアンインストール
npm uninstall framer-motion

# 4.1.17バージョンを指定してインストール
npm i framer-motion@4.1.17

参考

https://www.amazon.co.jp/%E5%9F%BA%E7%A4%8E%E3%81%8B%E3%82%89%E5%AD%A6%E3%81%B6-React-Hooks-asakohattori/dp/486354359X [Solved] Can't import the named export 'Children' from non EcmaScript module (only default export is available) - Exception Error