Rails6 開発時につまづきそうな webpacker, yarn 関係のエラーと解決方法

はじめに

Rails6でwebpackerが標準になったことにより、Railsアプリの開発環境にyarnのインストールが必要になりました。

webpacker,yarnがインストールされてない環境で発生するエラーと解決方法について備忘録として投稿させていただきます。

開発環境

Rails 6.0.0.rc2
Ubuntu Server 18.04 LTS

もくじ

• webpacker がインストールされてない
• yarn がインストールされてない
• node_modules がインストールされてない
• パッケージのバージョンが不一致(？)

---

⚠️ webpacker がインストールされてない

rails6のアプリを新規作成したときに発生します。

エラー

rails s などの時点で webpacker がインストールされてない場合、

$ rails s

=> Booting Puma
=> Rails 6.0.0.rc2 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
...
/home/ubuntu/.rvm/gems/ruby-2.6.3/gems/webpacker-4.0.7/lib/webpacker/configuration.rb:91:in `rescue in load': Webpacker configuration file not found /home/ubuntu/environment/test-app1/config/webpacker.yml. 
Please run rails webpacker:install Error: No such file or directory @ rb_sysopen - /home/ubuntu/environment/test-app1/config/webpacker.yml (RuntimeError)

補足

bundle install時点でwebpackerがインストールできないとログ上に警告が出ます

$ bundle install

...
         run  bundle exec spring binstub --all
* bin/rake: Spring inserted
* bin/rails: Spring inserted
       rails   :install

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


https://yarnpkg.com/ja/docs/install

解決方法

webpackerをインストールする

$ rails webpacker:install 

...
Done in 7.00s.
Webpacker successfully installed 🎉 🍰

yarnがインストールされてない場合は、以下のようなエラーが表示されるので、yarn がインストールされてないの解決方法を実施したあとで再度rails webpacker:installを実行してください。

$ rails webpacker:install

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

---

⚠️ yarn がインストールされてない

yarn がインストールされてない環境でrails6アプリの開発を始める時に発生します。

エラー

webpackerのインストール時点で yarn がインストールされてない場合、

$ rails webpacker:install

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

rails s などの時点で yarn がインストールされてない場合、

 $ rails s # または、rails db:migrate など

=> Booting Puma
=> Rails 6.0.0.rc2 application starting in development 
=> Run `rails server --help` for more startup options

sh: 1: yarn: not found
# sh: yarn: command not found と表示されるケースもある

========================================
  Your Yarn packages are out of date!
  Please run `yarn install --check-files` to update.
========================================


To disable this check, please change `check_yarn_integrity`
to `false` in your webpacker config file (config/webpacker.yml).

解決方法

yarn をインストールする

yarn がインストールされているか確認

$ yarn -v

Command 'yarn' not found, but can be installed with:
sudo apt install cmdtest

yarn をインストールする

# mac 
$ brew install yarn

# ubuntu
$ curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
$ echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
$ sudo apt-get update && sudo apt-get install yarn

# など

補足：OS毎のインストール方法はyarnの公式ドキュメントに掲載されてます

yarn がインストールされたことを確認

$ yarn -v
1.17.3

yarn installを実行して、package.json にリスト化されている全ての依存関係を node_modules 内にインストールする。

$ yarn install

yarn install v1.17.3
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 3.36s.

---

⚠️ node_modules がインストールされてない

yarnがインストールされている環境でrails6のプロジェクトをgit cloneした後などに発生します。

エラー

rails s などの時点で node_modules がインストールされてない場合、

$ rails s # または、rails db:migrate など

error Couldn't find an integrity file                                                                                                     
error Found 1 errors.                                                                                                                     


========================================
  Your Yarn packages are out of date!
  Please run `yarn install --check-files` to update.
========================================


To disable this check, please change `check_yarn_integrity`
to `false` in your webpacker config file (config/webpacker.yml).

解決方法

yarn installを実行して、package.json にリスト化されている全ての依存関係を node_modules 内にインストールする。

$ yarn install

yarn install v1.17.3
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 3.36s.

補足：yarn installの解説（公式ドキュメント）

---

⚠️ パッケージのバージョンが不一致(？)

rails new して作成した Rails6アプリ を起動した際に発生しました。

エラー

$ yarn install
...

# ----------

$ rails s
...

========================================
  Your Yarn packages are out of date!
  Please run `yarn install --check-files` to update.
========================================


To disable this check, please change `check_yarn_integrity`
to `false` in your webpacker config file (config/webpacker.yml).


yarn check v1.6.0
success Folder in sync.
Done in 0.10s.
yarn check v1.6.0
error "webpack-dev-server#yargs#cliui" is wrong version: expected "^4.0.0", got "5.0.0"
error "webpack-dev-server#yargs#yargs-parser" is wrong version: expected "^11.1.1", got "13.1.1"
error Found 2 errors.
info Visit https://yarnpkg.com/en/docs/cli/check for documentation about this command.

メッセージに表示されているコマンドを実行しても解決しなかった。

$ yarn install --check-files
# => 解決しなかった

$ yarn install
# => 解決しなかった

$ yarn upgrade
# => 解決しなかった

解決方法

yarn を アップグレードした後に yarn upgradeを実行したら解決した。

# yarn の アップグレード
# mac の場合
$ brew upgrade yarn

==> Upgrading 1 outdated package:
yarn 1.6.0 -> 1.17.3
==> Upgrading yarn 
...

# ----------

$ yarn upgrade
yarn upgrade v1.17.3

[1/4] 🔍  Resolving packages...
warning @rails/webpacker > postcss-preset-env > postcss-color-functional-notation > postcss-values-parser > flatten@1.0.2: I wrote this module a very long time ago; you should use something else.
[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] 🔨  Rebuilding all packages...
success Saved lockfile.
success Saved 673 new dependencies.
info Direct dependencies
...
✨  Done in 42.59s.

# ----------

$ rails s

# => エラーが発生しなくなった

---

💡 おまけ

gem install rails で rails6 がインストールされない

正式リリースまでは以下のコマンドでインストールする

# gem install rails でインストールされるバージョンを確認
$ gem search -r ^rails$

*** REMOTE GEMS ***

rails (5.2.3)

# ----------

# 上記コマンド実行時に 6.x が表示されない場合は以下のコマンドでインストール
$ gem install rails --prerelease

# 上記コマンド実行時に 6.x が表示された場合は以下のコマンドでOK
$ gem install rails

# ----------

# インストールされたバージョンを確認
$ rails -v
Rails 6.0.0.rc2