・Ruby on Rails 5にbootstrapを導入したらランタイムエラー発生解消方法の紹介
初めに
Ruby on Railsの勉強をUdemyで行っていたらbootstrapの導入も紹介していました。
その流れから動画で紹介している方法をもとに導入したら下記のようなランタイムエラーが発生しました。
bootstrap-rubygemに記載されていた導入方法をそのままコピペした感じなのに詰まったのでメモ用として残しました。
なお教材であるUdemyのコースは下記となります。
はじめてのRuby on Rails入門-RubyとRailsを基礎から学びWebアプリケーションをネットに公開しよう
https://www.udemy.com/course/the-ultimate-ruby-on-rails-bootcamp/
また、bootstrap導入で参考にした bootstrap-rubygem は下記となります。
https://github.com/twbs/bootstrap-rubygem
エラー内容
RuntimeError in Questions#index
Showing /app/rails_projects/qanda/app/views/layouts/application.html.erb where line #8 raised:
Your nodejs binary failed to load autoprefixer script file,
please check if you’re running a supported version (10, 12, 14+)
ENV[“PATH”] = /usr/local/bundle/bin:/root/.vscode-server/bin/c3f126316369cd610563c75b1b1725e0679adfb3/bin:/usr/local/bundle/gems/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin
binary = node
Extracted source (around line #8):
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>app/views/layouts/application.html.erb:8:in `_app_views_layouts_application_html_erb__4499109026024849228_70296367328320′
エラー発生直後の印象
エラー内容を見た印象、「application.html.erb」ファイルの8行目(上記赤色箇所）が原因なんだなという印象でした。
ただ、当該箇所は変更しておらず、そもそもやったことは bootstrap-rubygem にある手順のみでした。
（bundle install、scssとjsに追記）
次アクションとしてはbootstrap導入手順を1つずつコメントアウトして該当箇所を探るようにしました。
エラー解決アクション
①： application.html.erb の8行目をコメントアウト
まずは本当に8行目が怪しいのか、また8行目のみなのか確認も含めて8行目をコメントアウトしました。
html.erbのコメントアウトは#をつければ大丈夫そうです。
<!DOCTYPE html>
<html>
<head>
<title>Qanda</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%#= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= yield %>
</body>
</html>
結果、9行目を対象にエラーが発生しました。
ちなみに9行目もコメントアウトしたら無事表示されました。当然bootstrapは適用されていませんでした。
8行目9行目が無いと bootstrapは適用されないので元に戻しました。
②：application.jsに追加した3行を削除
bootstrap-rubygem の手順に、application.jsに以下3行を追加してください。とあったので削除しました。
//= require jquery3
//= require popper
//= require bootstrap-sprockets結果は変わらず。
組み合わせた原因かもしれませんので削除した3行は戻さず、次に進みました。
③：application.scssの@importを削除
②と同様、 application.scssの初期値を削除して@import文に置き換えていましたがこれを削除します。
@import "bootstrap";
結果は変わらず。
こちらも原因が分からないため削除した1行は戻さず、次に進みました。
④： application.scss を application.cssに戻す（初期状態にする）
残すところこの④の手順とbundle installしか残っていませんがひとまずやってみます。
結果は変わらず。
半分諦めてきましたが何とか解決したいので頑張ってみます。
⑤：Gemfileのbootstrapをコメントアウトしてbundle updateする
bootstrap-rubygem にはbootstrapとjquery-railsをGemfileに追加してください。と書かれています。
jquery-rails は関係無いと思って 下記bootstrap をコメントアウトしてbundle updateしました。
gem 'bootstrap', '~> 5.0.1'結果は正常表示されました。当然bootstrapは適用されていません。
該当箇所は分かったので、あとはGemfileの書き方の問題と考えました。
解決方法（恥ずかしい）
結果から申し上げると、Nodejsのバージョンが古いせいでした。
一息置いてエラー画面を見ていたら、Nodejsのバージョン云々をようやく視認しました。
Your nodejs binary failed to load autoprefixer script file,
please check if you’re running a supported version (10, 12, 14+)
その後自身の環境（Dockerfile）を見たらバージョン7をインストールされていました・・・
Nodejsのバージョンを14にして、Rubyのバージョンを2.6にしたら解消しました。
最後に
エラー内容はしっかりと読まないと改めて感じました。
そもそも今回の学習用に準備した環境のバージョンを失念していたのも原因ですね・・・
慢心駄目絶対
