Rails6 Webpackerでエラーが出た

はじめに

Rails６で新しくアプリを作ろうと思ったがハマってしまったので、備忘録を残していきます。

アプリ作成開始

いつも通りrails newをしていきます。

$ rails new hoge_app 

さてサーバー起動をさせよう。

$ rails s

するとエラー発生。

$ rails s

=> Booting Puma
=> Rails 6.0.0 application starting in development 
=> Run `rails server --help` for more startup options
RAILS_ENV=development environment is not defined in config/webpacker.yml, falling back to production environment
Exiting
Traceback (most recent call last):
    80: from bin/rails:3:in `<main>'
    79: from bin/rails:3:in `load'
    78: from /Users/app/task_app/bin/spring:15:in `<top (required)>'
    77: from /Users/hoge/.rbenv/versions/2.6.3/lib/ruby/2.6.0/rubygems/core_ext/kernel_require.rb:54:in `require'
    76: from /Users/hoge/.rbenv/versions/2.6.3/lib/ruby/2.6.0/rubygems/core_ext/kernel_require.rb:54:in `require'
　　　　　　　　　　　　　　　　　　　　　　・
　　　　　　　　　　　　　　　　　　　　　　・
                                  (省略)
　　　　　　　　　　　　　　　　　　　　　　・
　　　　　　　　　　　　　　　　　　　　　　・
/Users/.rbenv/versions/2.6.3/lib/ruby/gems/2.6.0/gems/webpacker-4.0.7/lib/webpacker/configuration.rb:91:in `rescue in load': Webpacker configuration file not found /Users/app/task_app/config/webpacker.yml. Please run rails webpacker:install Error: No such file or directory @ rb_sysopen - /Users/app/task_app/config/webpacker.yml (RuntimeError)

下記コマンド実行しろと言われているので実行します。

$ rails webpacker:install

Yarn not installed. Please download and install Yarn from https://yarnpkg.com/lang/en/docs/install/

yarnがインストールされてないと言われているので、インストールします。

$ brew install yarn

yarnもインストールできたので、再度webpackerをインストール

$ rails webpacker:install
   identical  config/webpacker.yml
Copying webpack core config
       exist  config/webpack
   identical  config/webpack/development.js
   identical  config/webpack/environment.js
   identical  config/webpack/production.js
   identical  config/webpack/test.js
Copying postcss.config.js to app root directory
   identical  postcss.config.js
Copying babel.config.js to app root directory
   identical  babel.config.js
Copying .browserslistrc to app root directory
   identical  .browserslistrc
The JavaScript app source directory already exists
       apply  /Users/.rbenv/versions/2.6.3/lib/ruby/gems/2.6.0/gems/webpacker-4.0.7/lib/install/binstubs.rb
  Copying binstubs
       exist    bin
   identical    bin/webpack
   identical    bin/webpack-dev-server
      append  .gitignore
Installing all JavaScript dependencies [4.0.7]
         run  yarn add @rails/webpacker from "."
yarn add v1.17.3
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning " > webpack-dev-server@3.8.0" has unmet peer dependency "webpack@^4.0.0".
warning "webpack-dev-server > webpack-dev-middleware@3.7.0" has unmet peer dependency "webpack@^4.0.0".
[4/4] 🔨  Building fresh packages...
success Saved 1 new dependency.
info Direct dependencies
└─ @rails/webpacker@4.0.7
info All dependencies
└─ @rails/webpacker@4.0.7
✨  Done in 3.92s.
Installing dev server for live reloading
         run  yarn add --dev webpack-dev-server from "."
yarn add v1.17.3
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning "webpack-dev-server > webpack-dev-middleware@3.7.0" has unmet peer dependency "webpack@^4.0.0".
warning " > webpack-dev-server@3.8.0" has unmet peer dependency "webpack@^4.0.0".
[4/4] 🔨  Building fresh packages...
success Saved 1 new dependency.
info Direct dependencies
└─ webpack-dev-server@3.8.0
info All dependencies
└─ webpack-dev-server@3.8.0
✨  Done in 3.25s.
Webpacker successfully installed 🎉 🍰

webpackerがインストール出来たので、もう一度サーバーを起動してみる。

$ rails s

無事いつもの画面がでました！

まとめ

rails6からWebpackerがデフォルトでインストールされているので、webpackerやyarnをインストールしていない人は僕と同じようにハマるかもしれないので、参考にしてみてください！