✨
Next.js v12→v14への移行で詰まったところ
Nextjs v14でframer-motionが原因でページが表示されなくなった
v12で運用していたポートフォリオサイトをv14に移行後、下記のエラーに遭遇しました。
エラー内容
⨯ node_modules/framer-motion/dist/es/context/MotionConfigContext.mjs (6:42) @ eval
⨯ TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function
解決方法
framer-motion使用箇所は'use client'を宣言してクライアントコンポーネントにする
まとめ
ページそのものが表示されなくなってしまったのでテンパったのですが
そもそもこのエラーはどこ起因なのかエラーメッセージをしっかり確認したところ、framer-motionが起因なのではと予想することができました。
下記のissuesと似たような事象だったのですが、この方も'use client'をにしたら解決できたようです。
framer-motionがブラウザー側で動作するので'use client'にする必要があったみたいです。
Since the framer motion makes changes on the browser, it becomes a client component thus we add the "use client"
Discussion