Webpackerで5.1以上にアップデートするときの注意点

Programming
目次

概要

RailsでJavaScriptやTypeScriptの管理にWebpackerを使っているのですが、これを使っていたある時、エラーが発生してTypeScriptのファイルをJavaScriptにコンパイルすることができなくなりました。

今回は、このエラーを解決した方法について紹介します。

環境

  • Webpacker 5.2
  • Rails 6.0.2

エラー内容

今回エラーが発生したのはWebpackerを含めたRailsのWebアプリケーションで使用していたGemを更新したり、npmのパッケージを更新したりしていた時でした。

エラーの内容としては、TypeScriptのファイルのコンパイル中にうまく型の認識をおこなうことができず、「その型のオブジェクトにそのメソッドはない」というようなエラーが大量に発生しました。 思い当たることとして、Webpackerを更新していたので、それが何か悪さをしているのではないかと思い調べてみました。

原因

Webpackerについて調べてみると、Webpackerが5.1に更新された際にTypeScriptの変換に関する扱いが変更されていることが分かりました。

そのため、5.1のリリースノートに記載されているように設定の更新をする必要があるということのようです。

webpacker/typescript.md at 5-x-stable · rails/webpacker

内容としては、いままでファイルとして置かれていたTypeScriptのためのWebpackの設定ファイルがWebpackerに同梱されるということで、それらのファイルの削除を行うということのようです。

また、このような仕様の変更は5.1で行われたもののため、5.1からWebpackerを導入した場合はこのようなエラーに遭遇することはないと思われます。

解決方法

リリースノートに書かれていた方法の通りにやってみて、問題を解決しました。

$ yarn remove ts-loader
$ yarn add @babel/preset-typescript
$ rm config/webpack/loaders/typescript.js

config/webpack/environment.jsから次のコードを削除します。

const typescript = require('./loaders/typescript')
environment.loaders.prepend('typescript', typescript)

最後に、ルートのbabel.config.jsファイルのpresets配列の部分に次の内容を追加します。 私の場合は、過去のTypeScriptの設定の際に既に追加されていたため、この作業はしていません。

['@babel/preset-typescript', { 'allExtensions': true, 'isTSX': true }]

私はこれで、エラーを解決することができました。

さいごに

私はこの問題を解決するのにかなり時間がかかってしまいました。というのも、Webpackerを5.0から5.2に更新したため、ずっと5.2のリリースノートばかりを見ていたので、原因の究明に手間取りました。 このようなことから、やはりライブラリの更新は定期的にやっておくに越したことはないのかなと思います。