YSNHatenaBlog

主にアプリやWebサービス開発について

Next.jsのバージョンを上げている

よいデータ設計が思いつかないので、気分転換も兼ねてNext.jsのバージョンをv11.1.0に上げようとしている。

% yarn
yarn install v1.16.0
[1/5] 🔍  Validating package.json...
[2/5] 🔍  Resolving packages...
[3/5] 🚚  Fetching packages...
error next@11.1.0: The engine "node" is incompatible with this module. Expected version ">=12.0.0". Got "10.16.0"
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

Nodeバージョンを上げる。 https://cloud.google.com/functions/docs/concepts/exec?hl=ja#runtimes https://cloud.google.com/functions/docs/concepts/nodejs-runtime?hl=ja runtimeをnodejs12や14にしたときの具体的なバージョンがわからない。

久々に触ったらndenv使ってたのでnodenvにする。

% anyenv uninstall ndenv
% anyenv install nodenv

(.anyenv/envs/ndenv にゴミが残ったんだけどなんでだ?)

せっかくなのでNode14にしても大丈夫そうか見る。 https://nodejs.org/ja/blog/uncategorized/10-lts-to-12-lts/ https://nodejs.medium.com/node-js-version-14-available-now-8170d384567e

あまり影響無さそうなので上げてみる。

細かいバージョンがわからないので、とりあえず14系の最後のバージョンに。

% nodenv install 14.17.5

yarn dev で次のエラー

Server Error
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

むむむ...。しかもエラー箇所が良くわからない。

nodeとNextどっちのバージョンの問題か? Nextのバージョンだけ戻した。

Server Error
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Source
pages/_document.tsx (71:4) @ Object.ctx.renderPage

  69 | 
  70 |   ctx.renderPage = () =>
> 71 |     originalRenderPage({
     |    ^
  72 |       enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
  73 |     })
  74 | 
Call Stack
Function.Document.getInitialProps
pages/_document.tsx (75:29)
Show collapsed frames

今度はちゃんと問題箇所が出てきた。

_document.tsx はあまり触ってないんだけど、ここをFunctional Componentで書かないと駄目なのかな?