railsでwebpackerを使用する際、Error: Chunk.entrypointsが出てハマった

概要

railsもwebpackもズブの素人がハマった軌跡。

環境

• Windows 10 Pro(Windows Subsystem for Linux)
• rails 5.2.0
• ruby 2.5.0
• webpacker 3.5

現象

webpack-dev-serverを実行すると下記エラーが出る。

(node:20569) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
/xxxxx/Desktop/testProject/node_modules/webpack/lib/Chunk.js:712
        throw new Error(
        ^

Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
    at Chunk.get (/xxxxx/Desktop/testProject/webpack/lib/Chunk.js:712:9)
    at /xxxxx/Desktop/testProject/node_modules/extract-text-webpack-plugin/dist/index.js:176:47
    at Array.forEach (<anonymous>)
    at /xxxxx/Desktop/testProject/node_modules/extract-text-webpack-plugin/dist/index.js:171:18
    at AsyncSeriesHook.eval [as callAsync] (eval at create ...(省略)

原因

extract-text-webpack-plugin のバージョンの問題の模様。
自環境ではwebpackerのバージョンが3.5で、webpack自体はバージョン4系を使用していたのが原因か。
パッケージの依存性管理とかよくわかってないのに色々やりすぎるもんじゃないなぁ・・・。

解決策

下記いずれかで解決するものと思われる。

1. extract-text-webpack-plugin@nextをインストールする。
   下記参照。
   Webpack 4 · Issue #760 · webpack-contrib/extract-text-webpack-plugin · GitHub
   救済措置(?)として公式からアナウンスが出ているようです。
2. webpackerをupdateする。
   私はこちらの方法で直りました。
   キッカケはpackage-lock.jsonとyarn.lockを見たとき。
   前述のプラグインをremoveして1番の方法をとってみました。
   が、package.jsonからは消えているのに、package-lock.jsonからは消えていませんでした。
   また、webpackerのdependenciesには以前のバージョンが・・・。
   と、いうわけで下記コマンドを実行。

$ yarn add @rails/webpacker@4.0.0-pre.2
$ npm install

動いた・・・。
ただしバージョンにpreって書いてあるので保証はできませぬ

まとめ

中途半端に最新バージョンばっかり使うと痛い目を見るので
バージョン管理はきちんとしましょう。
また、最新技術を学びたいからといってあれやこれや手をつけすぎないように。
自戒の意味も込めて・・・。

余談

まだyarnとかnpmとか使い始めたばかりで、yarn.lockとpackage-lock.jsonが
同一フォルダ内に共存している状況は果たして正解なのかがわかりません。
その当たり、わかる方がいらっしゃいましたらご教授願います。
railsも覚えなきゃ...