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

# はじめに

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

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

# 開発環境

Rails 6.0.0.rc2
Ubuntu Server 18.04 LTS

# もくじ

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

---
<br><br><br>

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

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

## エラー

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

```shell-session
$ 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**がインストールできないとログ上に警告が出ます

```shell-session
$ 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/
```

---
<br><br><br>


# ⚠️ 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 がインストールされてない場合、

```shell-session
 $ 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 がインストールされているか確認

```shell-session
$ yarn -v

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

yarn をインストールする

```shell-session
# 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の[公式ドキュメント](https://yarnpkg.com/lang/ja/docs/install)に掲載されてます


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

```shell-session
$ yarn -v
1.17.3
```

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

```shell-session
$ 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.
```

---
<br><br><br>

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

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

## エラー

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

```shell-session
$ 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 内にインストールする。

```shell-session 
$ 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の解説（公式ドキュメント）](https://yarnpkg.com/lang/ja/docs/cli/install/)

---
<br><br><br>

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

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

## エラー

```shell-session
$ 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.
```

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

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

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

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

## 解決方法

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

```shell-session
# 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

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

```

---
<br><br><br>

# 💡 おまけ

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

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

```shell-session
# 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
```