Next.js v13でChakraUIが動作しない場合の対処法

NextjsでChakraUIを導入しようとした際に下記のようなエラーが発生して動作しない場合の対処法を記載します。

症状

import { motion, useIsPresent } from "framer-motion";
SyntaxError: Named export 'motion' not found. The requested module 'framer-motion' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'framer-motion';
const { motion, useIsPresent } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:190:5) {
}

解決方法

公式Issueに同じ症状の方が解決方法を記載してくれていました。
環境によっては改善がしないようなのですが、私の環境では治りましたので一度試してみると良いと思います。

解決方法としては特定のバージョン指定でライブラリをインストールすると解消するようです。

# yarnの場合
yarn add @chakra-ui/react@2.4.2 @emotion/react@^11.10.5 @emotion/styled@^11.10.5 framer-motion@^6.5.1

# npmの場合
npm install @chakra-ui/react@2.4.2 @emotion/react@^11.10.5 @emotion/styled@^11.10.5 framer-motion@^6.5.1