【マイグレーション】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
すると無事動作しました。
今回はコードの修正はなくパッケージのアップデートで解決できました。
- article
TypeScript で学ぶミドルウェア設計パターン:Express・NestJS の応用例
- article
TypeScript で依存性注入(DI)を実践する:InversifyJS 入門
- article
TypeScript × Prisma で型安全な ORM 設計を実現する方法
- article
ESLint の parser 設定:Babel・TypeScript・Flow の違い
- article
TypeScript で API クライアント自動生成:OpenAPI・gRPC ツール導入の手引き
- article
TypeScript プロジェクトのための Prettier・ESLint 最適設定ガイド
- review
今の自分に満足していますか?『持たざる者の逆襲 まだ何者でもない君へ』溝口勇児
- review
ついに語られた業界の裏側!『フジテレビの正体』堀江貴文が描くテレビ局の本当の姿
- review
愛する勇気を持てば人生が変わる!『幸せになる勇気』岸見一郎・古賀史健のアドラー実践編で真の幸福を手に入れる
- review
週末を変えれば年収も変わる!『世界の一流は「休日」に何をしているのか』越川慎司の一流週末メソッド
- review
新しい自分に会いに行こう!『自分の変え方』村岡大樹の認知科学コーチングで人生リセット
- review
科学革命から AI 時代へ!『サピエンス全史 下巻』ユヴァル・ノア・ハラリが予見する人類の未来