Rails6 の履歴(No.14)

&tag(Rails6);

目次†[edit]

目次
関連ページ
参考情報
基本
Tips
- yarn関連
- master.keyがなくデプロイ失敗する
トラブルシューティング

↑

参考情報†[edit]

↑

基本†[edit]

JavaScriptの管理はyarnに。
css等その他はいままで通り
Bootstrapを使った基本プロジェクトの作成方法はRails/Bootstrap4を参照のこと。

↑

Tips†[edit]

↑

yarn関連†[edit]

インストール
```
yarn install
```
アップグレード
```
yarn upgrade
```

↑

master.keyがなくデプロイ失敗する†[edit]

新規プロジェクトだとmaster.keyが.gitignoreで指定されている。
Capistrano3でgit_copyを実行するとmaster.keyが含まれずエラーが発生する。

これを解消するためにdeploy.rbに以下のタスクを追加する。

namespace :deploy do
  # サーバーにファイルをアップロードする
  task upload_file: [:set_rails_env] do
    on roles(:app) do |host|
      upload!('config/master.key', "#{shared_path}/config/master.key")
#      upload!('config/credentials.yml.enc', "#{shared_path}/config/credentials.yml.enc")
      #      execute 'echo "credentials.yml.enc upload!!"'
      execute 'echo "master.key upload!!"'
    end
  end
  before 'deploy:starting', 'deploy:upload_file'
end

↑

トラブルシューティング†[edit]

↑

rails-factoryが動かない†[edit]

railsプロジェクトを作成するためのfactoryが動かない。
以下のコマンドで「bootsnap」や「webpacker」などさまざまなエラーがでる。
```
bundle exec rails new $project_path  --skip-bundle --database=mysql
```
「port install yarn」でyarnをインストールし、rails-factoryのGemfileを修正することが必要。
```
source "http://rubygems.org"
gem "rails", "6.0.3.5"
gem 'bootsnap'
gem 'webpacker'
gem 'listen'
```

↑

ActionView::Template::Error (invalid base64)†[edit]

Rails 6にアップグレード後に発生。
ブラウザを何回リロードしても直らないが、ブラウザを一端終了して再起動すれば修正された。
ブラウザのキャッシュとCookieが原因らしい。

↑

Uncaught TypeError: $(...).modal is not a functionエラーが発生†[edit]

Bootstrap4のモーダルを表示しようとすると「Uncaught TypeError: $(...).modal is not a function」が発生。
jQuery自体のメソッドであるshow/hideは呼び出せるがそれは根本的な原因ではない。JavaScript - モーダル画面でエラー Uncaught TypeError: $(...).modal is not a function が出てしまう｜teratail
modal('show')が呼び出せないとshowだと背景が暗くならな、閉じれないなど不具合が発生する。
Methods like modal() not working if Bootstrap loaded with Webpack (Rails) - Stack OverflowにあるようにjQueryを複数回ロードしているのが原因。application.jsとenvironment.jsの両方でjQueryを呼び出していないかチェックする。以下を削除する。
```
new webpack.ProvidePlugin({
 $: 'jquery',
 jQuery: 'jquery',  // taking this out doesn't fix it
...
```

↑

Bootstrap4のModalが呼び出せない(remoteがtrueの場合)†[edit]

Bootstrap4のモーダルで、remote modalが呼び出せない(ajaxのリンク経由で)。
jquery_ujsからrails-ujsに変更になったせいで、ajax処理は呼び出せるが、Bootstrapの処理が呼び出せてないっぽい。
ajaxから呼び出すjs.erbでmodal('show')を呼び出すようにしたら表示はできることを確認。
```
$("#my-modal").modal('show');
```

↑

表示されない場合†[edit]

以下のようなシンプルな呼び出しボタンを作成。data-remoteありで表示できず、data-remoteなしで表示できた場合、rails-ujsが原因だと思われる。
```
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#my-modal" data-remote="true">
  Launch demo modal
</button>
```
js.erbに「$("#my-modal").modal('show');」があることを確認。
書いているのにもかかわらず表示されない場合、jQueryがエラーになっている可能性あり。
window.alert("abc")などが表示でき、modalがきかない場合、application.jsに以下の記述があるか確認。
```
import jQuery from 'jquery'
window.jQuery = window.$ = jQuery
```

↑