💩

Next.js v12.0.3以降で発生しているwebpack5の型エラーについて

2021/11/14に公開1件

Next.js

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

🐏2021/11/16

今朝12.0.4がリリースされたようなので上記の対応ではなくアップグレードをお勧めします。