💩
Next.js v12.0.3以降で発生しているwebpack5の型エラーについて
Typescriptを使用している場合で古いNext.jsを最新バージョンに挙げた時に発生した以下のエラーが発生した。
node_modules/next/dist/server/config-shared.d.ts:1:15 - error TS2724: '"next/dist/compiled/webpack/webpack"' has no exported member named 'webpack5'. Did you mean 'webpack'?
1 import type { webpack5 } from 'next/dist/compiled/webpack/webpack';
~~~~~~~~
Found 1 error.
仮の対処法
- next.jsをv12.0.4-canary.2以降を使用する
canaryを使いたくない人向けの対応
- next.jsをv12.0.2まで下げる
ちなみにv12.0.2に下げた際最新の@types/reactを取り込むとNext.jsで定義されたimg要素等のloading属性が@types/reactのloading属性と競合するので@types/react@16.9.19
以前のバージョンを使用する事で回避する事ができる。
まとめ
古いバージョンを使用する回避方法ですが、12.0.4のcanaryで既に修正されているので近々配信されるv12.0.4がリリースされてからの対応でも問題ないと思います。古い@types/react
を使用し続けるのはいかがなものかと思うので。
間違いなどあればコメントでご指摘いただけると嬉しいです。
Discussion
今朝12.0.4がリリースされたようなので上記の対応ではなくアップグレードをお勧めします。