対象者

Rails5 + webpack のプロジェクトを作成したが、以下エラーが出現する方

エラー

$ bin/webpack-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 '@rails/webpacker'
    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> (.../appname/node_modules/webpack-dev-server/bin/webpack-dev-server.js:64: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)

原因

@rails/webpackerがインストールされていない。

(私の場合、yarnがインストールいなかった為、rails new app --webpack=vue実行後にrails/webpackerがインストール出来ない旨のエラーが出力されていた。)

解決

yarnをインストールし、Railsプロジェクトを再作成する。

手順

1. yarnをインストール

# インストール
$ brew install yarn

# インストール出来たか確認
$ yarn -v
1.17.3

2. Rails + webpackプロジェクトを新規作成

$ rails new app --webpack=vue
$ cd app
$ rails g scaffold pages
$ rails db:migrate

3. ファイルを編集

2.のコマンド実行により作成された以下２つのファイル
index.html.erb, routes.rb
を下記のように置き換える。

app/views/pages/index.html.erb

<%= javascript_pack_tag "hello_vue" %>

config/routes.rb

Rails.application.routes.draw do
  root "pages#index"
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end

4. Railsサーバーを起動

$ rails server

5. ローカルホストを確認

http://localhost:3000/ にアクセス

以下のように表示されたら成功。

以上。

参考