Help us understand the problem. What is going on with this article?

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

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

shinichinomura
クラウドソーシングサービス「クラウドワークス」を開発しています。
http://crowdworks.jp/
crowdworks
21世紀の新しいワークスタイルを提供する日本最大級のクラウドソーシング「クラウドワークス」のエンジニアチームです!
https://crowdworks.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away