💩

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

1 min read 1

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.

https://github.com/vercel/next.js/issues/30167#issuecomment-963659215

仮の対処法

  • next.jsをv12.0.4-canary.2以降を使用する

https://github.com/vercel/next.js/pull/31206
https://github.com/vercel/next.js/pull/31140
canaryを使いたくない人向けの対応
  • next.jsをv12.0.2まで下げる

ちなみにv12.0.2に下げた際最新の@types/reactを取り込むとNext.jsで定義されたimg要素等のloading属性が@types/reactのloading属性と競合するので@types/react@16.9.19以前のバージョンを使用する事で回避する事ができる。

16.9.19以降でもバージョンによっては型が被る場合もあるので動作するバージョンが存在するかもしれません。16.9.20でloading属性が追加されているため確実に被らないのが16.9.19以下というだけです。

https://github.com/DefinitelyTyped/DefinitelyTyped/pull/38390#issuecomment-587230306

まとめ

古いバージョンを使用する回避方法ですが、12.0.4のcanaryで既に修正されているので近々配信されるv12.0.4がリリースされてからの対応でも問題ないと思います。古い@types/reactを使用し続けるのはいかがなものかと思うので。

間違いなどあればコメントでご指摘いただけると嬉しいです。

Discussion

ログインするとコメントできます