Edited at

Railsをバージョンアップしてwebpack-dev-serverが動かなくなったときにやったこと

More than 1 year has passed since last update.

あやふやな記憶を元に書き起こしているので間違ってる可能性はまーまーあります。


やったこと


Rails

5.1.4 -> 5.1.5


webpacker

3.2.0 -> 3.4.0


起きたこと

bin/webpack-dev-server を起動しようとすると、

/Users/nomura/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/bundler-1.16.1/lib/bundler/rubygems_integration.rb:458:in `block in replace_bin_path': can't find executable webpack-dev-server for gem webpacker (Gem::Exception)

from /Users/nomura/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/bundler-1.16.1/lib/bundler/rubygems_integration.rb:489:in `block in replace_bin_path'
from bin/webpack-dev-server:29:in `<main>'

古いwebpackerを削除。

yarn remove @rails/webpacker

webpackerを改めてインストール。

bundle exec rails webpacker:install:vue

※ なんかエラーがでるので、エラーメッセージに従って config/development.rb の config.webpacker.check_yarn_integrity を false に。

再び bin/webpack-dev-server すると、

/Users/nomura/repos/now-on-sale/vendor/bundle/ruby/2.4.0/bundler/gems/webpacker-d418bcff71a9/lib/webpacker/dev_server_runner.rb:47:in `exec': No such file or directory - /Users/nomura/repos/now-on-sale/node_modules/.bin/webpack-dev-server (Errno::ENOENT)

from /Users/nomura/repos/now-on-sale/vendor/bundle/ruby/2.4.0/bundler/gems/webpacker-d418bcff71a9/lib/webpacker/dev_server_runner.rb:47:in `block in execute_cmd'
from /Users/nomura/repos/now-on-sale/vendor/bundle/ruby/2.4.0/bundler/gems/webpacker-d418bcff71a9/lib/webpacker/dev_server_runner.rb:46:in `chdir'
from /Users/nomura/repos/now-on-sale/vendor/bundle/ruby/2.4.0/bundler/gems/webpacker-d418bcff71a9/lib/webpacker/dev_server_runner.rb:46:in `execute_cmd'
from /Users/nomura/repos/now-on-sale/vendor/bundle/ruby/2.4.0/bundler/gems/webpacker-d418bcff71a9/lib/webpacker/dev_server_runner.rb:11:in `run'
from /Users/nomura/repos/now-on-sale/vendor/bundle/ruby/2.4.0/bundler/gems/webpacker-d418bcff71a9/lib/webpacker/runner.rb:6:in `run'
from bin/webpack-dev-server:15:in `<main>'

node_modules/.bin/webpack-dev-server がないのが問題のようなので、

yarn add webpack-dev-server

三度、 bin/webpacker-dev-server すると、

The CLI moved into a separate package: webpack-cli.

Please install 'webpack-cli' in addition to webpack itself to use the CLI.
-> When using npm: npm install webpack-cli -D
-> When using yarn: yarn add webpack-cli -D
module.js:557
throw err;
^

Error: Cannot find module 'webpack-cli/bin/config-yargs'
at Function.Module._resolveFilename (module.js:555:15)
at Function.Module._load (module.js:482:25)
at Module.require (module.js:604:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (/Users/nomura/repos/now-on-sale/node_modules/webpack-dev-server/bin/webpack-dev-server.js:65:1)
at Module._compile (module.js:660:30)
at Object.Module._extensions..js (module.js:671:10)
at Module.load (module.js:573:32)
at tryModuleLoad (module.js:513:12)
at Function.Module._load (module.js:505:3)

webpack-cliがない?ので、インストール。

yarn install webpack-cli

ここまでやったら一応起動できた (。◉ᆺ◉)