docker-compose + rails + webpack-dev-serverで、webpack-containerが立ち上がらない

TL;DR

Webpacker 5.x.を使う場合は、webpacker-dev-serverは3.x.以下にしなさい

経緯

これからは、Sprocketsではなく、webpackerが主流になるらしい。
ならば、早めに使えるようになっておこう。

参考「Railsガイド WebpackerがSprocketsと異なる理由」
https://railsguides.jp/webpacker.html#webpacker%E3%81%8Csprockets%E3%81%A8%E7%95%B0%E3%81%AA%E3%82%8B%E7%90%86%E7%94%B1
「Rails: webpack(er)に乗り換える25の理由（翻訳）」
https://techracho.bpsinc.jp/hachi8833/2020_04_10/90859

早速、railsのアプリにて、webpackを使いながら
docker-composeを用いて、app用/db用/webpack-dev-server用の3コンテナを立ち上げる。

参考「dockerでwebpackerが遅い問題を改善する()」
https://qiita.com/MoguraStore/items/ca80c99c5542898ec3b5

docker-compose.yml

version: '3'
services:
  db:
    image: mysql:8.0
    command: --default-authentication-plugin=mysql_native_password
    volumes:
      - mysql_data:/var/lib/mysql
    environment:
      MYSQL_ROOT_PASSWORD: password
  web: &app
    build: .
    command: bundle exec rails s -p 3000 -b '0.0.0.0'
    volumes:
      - ./src:/app
    environment:
      WEBPACKER_DEV_SERVER_HOST: webpacker
    ports:
      - "3000:3000"
    depends_on:
      - db
  webpacker:
    <<: *app
    depends_on: 
      - web
    environment:
      - NODE_ENV=development
      - RAILS_ENV=development
      - WEBPACKER_DEV_SERVER_HOST=0.0.0.0
    command: ./bin/webpack-dev-server
    ports:
      - "3035:3035"

volumes:
  mysql_data:  

package.jsonはこんな感じ。
(初めて、webpacker導入を試みたので、いろいろ雑ですが…。)

package.json

 {"name": "app",
  "private": true,
  "dependencies": {
    "@popperjs/core": "^2.10.1",
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "5.4.2",
    "bootstrap": "^5.1.0",
    "jquery": "^3.6.0",
    "popper.js": "^1.16.1",
    "turbolinks": "^5.2.0",
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.12"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^4.0.0"
  }
}

エラー発生…。

docker-compose upすると、こんなエラーが。

webpacker_1  | The command moved into a separate package: @webpack-cli/serve
webpacker_1  | Would you like to install serve? (That will run yarn add -D @webpack-cli/serve) (yes/NO) 

じゃあ、@webpack-cli/serveとやらを追加すればいいのね、と。

yarn add -D @webpack-cli/serve

package.json

 {"name": "app",
  "private": true,
  "dependencies": {
    "@popperjs/core": "^2.10.1",
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "5.4.2",
    "bootstrap": "^5.1.0",
    "jquery": "^3.6.0",
    "popper.js": "^1.16.1",
    "turbolinks": "^5.2.0",
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.12"
  },
  "version": "0.1.0",
  "devDependencies": {
    "@webpack-cli/serve": "^1.5.2",　　#追加
    "webpack-dev-server": "^4.0.0"
  }
}

docker-compose upすると、こんなエラーが。

webpacker_1  | /app/node_modules/webpack-cli/bin/utils/prompt-command.js:46
webpacker_1  |  return func(...args);
webpacker_1  |         ^
webpacker_1  |
webpacker_1  | TypeError: Class constructor ServeCommand cannot be invoked without 'new'
webpacker_1  |     at runWhenInstalled (/app/node_modules/webpack-cli/bin/utils/prompt-command.js:46:9)
webpacker_1  |     at promptForInstallation (/app/node_modules/webpack-cli/bin/utils/prompt-command.js:140:10)
webpacker_1  |     at /app/node_modules/webpack-cli/bin/cli.js:32:43
webpacker_1  |     at Object.<anonymous> (/app/node_modules/webpack-cli/bin/cli.js:366:3)
webpacker_1  |     at Module._compile (internal/modules/cjs/loader.js:999:30)
webpacker_1  |     at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
webpacker_1  |     at Module.load (internal/modules/cjs/loader.js:863:32)
webpacker_1  |     at Function.Module._load (internal/modules/cjs/loader.js:708:14)
webpacker_1  |     at Module.require (internal/modules/cjs/loader.js:887:19)
webpacker_1  |     at require (internal/modules/cjs/helpers.js:74:18)
kyodokoza_webpacker_1 exited with code 1

docker-composeしても、app用/db用コンテナは立ち上がるけど、
webpack-dev-server用コンテナが立ち上がらない…。

ここから、いろいろ試しても全く解決せず、、、。
数時間無駄にしました、、、。

どうやって解決したか？

railsの公式githubのissueにて以下のコメントを発見。

「webpack-dev-server is not compatible with Webpacker 5.x. You'll need Webpacker 6.0 for compatibility. Otherwise go back to webpacker-dev-server 3.x.」
(https://github.com/rails/rails/issues/43062)

つまり、

Webpacker 5.x.を使う場合は、webpacker-dev-serverは3.x.以下にしなさい

とのこと。。


また、同じissue内に「この構成だったらうまくいったよ！」とのコメントも。

"dependencies": {
  ... 
  "@rails/webpacker": "5.4.2",
  "webpack": "^4.46.0",
  "webpack-cli": "^3.3.12"
},
"devDependencies": {
  "webpack-dev-server": "3.11.2"
}

yarn add したりremoveしたりして、この構成にしたらうまくいきました。

あとがき

振り返ってみると、すごく灯台下暗し的な見落としでした…。

どなたかの参考になればうれしいです。
ご指摘の点などあれば、お気軽にコメントいただけますと幸いです。