2
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Webpackerとは (Rails6で rails s してエラーが出た時の話)

Last updated at Posted at 2020-09-10

Rails6で新規アプリを作成しようとし、データベース作成後に
rails sでサーバを起動しようとしたところ、以下のようなエラーが出ました。

$ rails s
=> Booting Puma
=> Rails 6.0.3.3 application starting in development 
=> Run `rails server --help` for more startup options
Exiting
Traceback (most recent call last):
	77: from bin/rails:3:in `<main>'
	76: from bin/rails:3:in `load'
          ・
          ・
          ・
Webpacker configuration file not found /Users/<ユーザー名>/<アプリ名>/config/webpacker.yml.
Please run rails webpacker:install
Error: No such file or directory @ rb_sysopen - 
/Users/<ユーザー名>/<アプリ名>/config/webpacker.yml (RuntimeError)

「Webpackerの設定ファイルが見つかりません」とのこと。
/config/webpacker.ymlがあるべきだそう(なかった)。

Webpackerとは

JavaScriptのビルドツール「Webpack」のラッパーで、RailsアプリケーションでWebpackを使ってJavaScriptを管理することを簡単にしてくれるGem
現場で使えるRuby on Rails5 速習実践ガイド

私は「RailsでJavaScriptを使えるようにする為に色々よしなにしてくれるGem」と理解しました・・・。
(この辺りの理解は今後深めていけたら。)

またRailsガイドv6.0によると、「WebpackerがRails 6のデフォルトJavaScriptコンパイラになる」とあり、
rails newした時点で「gem 'webpacker'」がGemfileに書かれている理由がわかります。
以前はSprockets (スプロケッツ)というものがJavaScriptの標準ビルドツールとなっていたようです。

rails webpacker:installしてみる

どうしてGemfileに書いてあったのにWebpackerがインストールされてないんだっ、と思うところですが、
大人しく「rails webpacker:install」してみると

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

「Yarnがインストールされていません」と言われてしまいました。
この為にrails newした時にWebpackerがインストールされなかったのでしょう。

Yarnとは

JavaScriptのパッケージマネージャのこと。
下記の記事がわかりやすかったです。
JavaScriptのパッケージマネージャーnpmとYarnについて解説します!

Yarnのインストール

$ brew install yarn

もう一度 rails webpacker:install をしてみる

$ rails webpacker:install
      create  config/webpacker.yml
Copying webpack core config
      create  config/webpack
      create  config/webpack/development.js
      create  config/webpack/environment.js
      create  config/webpack/production.js
      create  config/webpack/test.js
          ・
          ・
          ・
Webpacker successfully installed 🎉 🍰

無事にWebpackerをインストールできました。

あらためて rails s してみる

スクリーンショット 2020-09-10 22.57.21.png
エラー回避できました。

次回予告

webpackerのしくみ

参考にさせていただきました

Rails6 Webpackerでエラーが出た

2
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?