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

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

はじめに

Rails6webpackerが標準になったことにより、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
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
ユーザーは見つかりませんでした