Nextjsのアップデート

Nextjsの脆弱性が発見されたため、アップデートを行いました。 認証関係はこのブログでは扱っていないので、あまり関係ないですが、アップデートを行おうとしましたが、 エラーが発生したので、メモを残しておきます。

環境

環境・アップデート内容 nodejs v20.18.0
next-js ver13.2.4 から 13.5.9にアップデート

エラー内容

hook.js:608 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.
Check the render method of ue. Error Component Stack

上記のようなエラーが発生しました。エラー内容は、「コンポーネント化されていないものをコンポーネントとして扱おうとしている」らしいです。 chrome debugで確認したところ確かにNullが入っていました。今までも確かにおかしな挙動しており、コンポーネント化したものがなぜか2渡しており、2回目にNullを渡していた。 細かく調べて行くと、一部古いライブラリcloudinaryでした。

next-cloudinary@4.8.0

npm install next-cloudinary@6.16.0

もう少し詳しく

nextjsはpagesディレクトリ構成であり、index.jsにコンポーネントをインポートして、使用しています。

export default function Home({ posts }) {
 import CardComponent from '../component/componentA'; 
  //...省略
  return (
    return (
      <CardComponent Post={detas} key={post.slug} />//このコンポーネント内でcloudifyを使用している。
    )
  )
}

//ローカルでのデータ取得させている。
export async function getStaticProps() {
    const content = fs.readFileSync(path.join(MdxPath, `${slug}`));//省略
  return {
    props: { posts: JSON.parse(JSON.stringify(posts)) },
  };
}

上記でHome({posts})がNullとなってしまった。デバッグログを確認したところ2度もこのHomeが呼び出されているらしい。2度目レンダリングでNullを受け取ってしまうので。原因として真っ先にstateを疑ったが、stateは問題なかった。next.config.jsもreactStrictMode: falseに設定しているので、Home内で2度レンダリングされないはずなのだが、なぜか2度レンダリングされていた。CarqdComponentを無効にし、確認したところ、問題なく動作していた。少しずつコードを削って言って、最終的にcloudinaryが原因であることがわかった。 その後、cloudinaryのバージョンを上げたところ、問題なく動作した。

まとめ

nextjsの脆弱性があり、アップデートを行ったところコンポーネントがNullとなるエラーが発生した。 原因はcloudinaryであり、昔のcloudinaryバージョンはstateを利用しているのかな？ とりあえず、アップデートを行うことで解決した。