대상자

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.의 커멘드 실행에 의해 작성된 이하 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/ 방문

아래와 같이 표시되면 성공.


이상.

참고