とあるクリエイターのエンジニアブログT-CREATOR

ArticleMemo

TypeScriptを使用したNext.js 6からNext.js 7へ移行した時行った対応について

Next.jsTypeScriptReact
TypeScriptを使用したNext.js 6からNext.js 7へ移行した時行った対応について
Memo
この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Next.jsはReactベースでSSRなどの設定が大変な部分をまとめてやってくれるフレーム枠です。

前回7月にNext.js 5からNext.js 6へ移行し手から早くも Next.js7 がリリースされました。 変更点としては内包しているWebpackのバージョンがへ4、Babelが7へ
アップグレードされたりとコードが最適化されました。

今回は Next.js7への マイグレーションのログとして内容をまとめました。

前回の記事 https://t-cr.jp/article/3261645b902aa1216

環境

  • React 16.4.1
  • Next.js 6.1.1
  • typescript 2.9.2

まずパッケージのバージョンをあげてみました。

terminal
$ yarn upgrade --latest react react-dom next typescript

packageのバージョン

早速エラーが・・・。

Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
    at Chunk.get (/Users/hoge/project/node_modules/webpack/lib/Chunk.js:824:9)
    at /Users/hoge/project/node_modules/extract-text-webpack-plugin/dist/index.js:176:48
    at Array.forEach (<anonymous>)
    at /Users/hoge/project/node_modules/extract-text-webpack-plugin/dist/index.js:171:18
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/hoge/project/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:12:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/hoge/project/node_modules/webpack/node_modules/tapable/lib/Hook.js:154:20)
    at Compilation.seal (/Users/hoge/project/node_modules/webpack/lib/Compilation.js:1214:27)
    at hooks.make.callAsync.err (/Users/hoge/project/node_modules/webpack/lib/Compiler.js:547:17)
    at _done (eval at create (/Users/hoge/project/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:9:1)
    at _err2 (eval at create (/Users/hoge/project/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:50:22)
    at Promise.all.then (/Users/hoge/project/node_modules/webpack/lib/DynamicEntryPlugin.js:73:20)
    at process._tickCallback (internal/process/next_tick.js:68:7)
Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
    at Chunk.get (/Users/hoge/project/node_modules/webpack/lib/Chunk.js:824:9)
    at /Users/hoge/project/node_modules/extract-text-webpack-plugin/dist/index.js:176:48
    at Array.forEach (<anonymous>)
    at /Users/hoge/project/node_modules/extract-text-webpack-plugin/dist/index.js:171:18
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/hoge/project/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:12:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/hoge/project/node_modules/webpack/node_modules/tapable/lib/Hook.js:154:20)
    at Compilation.seal (/Users/hoge/project/node_modules/webpack/lib/Compilation.js:1214:27)
    at hooks.make.callAsync.err (/Users/hoge/project/node_modules/webpack/lib/Compiler.js:547:17)
    at _done (eval at create (/Users/hoge/project/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:9:1)
    at _err2 (eval at create (/Users/hoge/project/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:50:22)
    at Promise.all.then (/Users/hoge/project/node_modules/webpack/lib/DynamicEntryPlugin.js:73:20)
    at process._tickCallback (internal/process/next_tick.js:68:7)

そのため他のパッケージのバージョンもあげました。

terminal
$ yarn upgrade --latest next-redux-wrapper @zeit/next-typescript @zeit/next-css @types/next

packageのバージョン

すると無事動作しました。
今回はコードの修正はなくパッケージのアップデートで解決できました。