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

Rails6 Webpackerでエラーが出た

はじめに

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

アプリ作成開始

いつも通り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

無事いつもの画面がでました!
image.png

まとめ

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

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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした