T-CREATOR

【マイグレーション】TypeScriptを使用したNext.js 6からNext.js 7へ移行した時行った対応について

【マイグレーション】TypeScriptを使用したNext.js 6からNext.js 7へ移行した時行った対応について
この記事は公開されてから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のバージョン

  • react@16.4.1 → react@16.5.2
  • react-dom@16.4.1 → react-dom@16.5.2
  • next@6.1.1 → next@7.0.0
  • typescript@2.9.2 → typescript@3.0.3

早速エラーが・・・。

swiftError: 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のバージョン

  • next-redux-wrapper@2.0.0-beta.6 → next-redux-wrapper@2.0.0
  • @zeit/next-typescript@1.1.0 → @zeit/next-typescript@1.1.1
  • @zeit/next-css@0.2.0 → @zeit/next-css@1.0.1
  • @types/next@6.0.3 → @types/next@6.1.8

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

ブログBlog

もっと見る

書籍レビューReview

もっと見る