【Rails5】bootstrap4の導入エラー

Question

rails5 ruby2.5.1

困っていること

gem 'bootstrap', '~> 4.1.3'をインストールしたらRuntimeErrorが表示されます。

現状

これまではbootstrap-sassを使用してきましたが、Bootstrap4を導入したいと思っています。

Gemfile

gem 'bootstrap-sass'
gem 'bootstrap', '~> 4.1.3'

bundle install後にrailsサーバーに繋げたらwaringがでてきたのでこの２つは一緒にいてはダメなのかなと思い

gem 'bootstrap-sass'　←削除
gem 'bootstrap', '~> 4.1.3'

一先ずwarningは消えましたがRuntimeErrorが出てる状態です。

試してみたこと

GitHubの内容に従ってファイルの中身を修正していきました。
1
app/assets/stylesheets/application.scss

*= require font-awesome
 *= require_tree .
 *= require_self
 *= require 'css/lightbox'
 */

// Custom bootstrap variables must be set or imported *before* bootstrap.
 @import "bootstrap";

2　拡張子をcssからscssへ

$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss

３
javascripts/application.js

//
//= require rails-ujs
//= require jquery3
//= require popper
//= require bootstrap
//= require activestorage
//= require turbolinks
//= require_tree .
//= require js/lightbox
//= require bootstrap-sprockets
//= require data-confirm-modal

4
現在のGemfile

gem 'activeadmin'
gem 'bootsnap', '>= 1.1.0', require: false
gem 'bootstrap-will_paginate'
gem 'cancancan'
gem 'carrierwave'
gem 'coffee-rails', '~> 4.2'
gem 'devise'
gem 'execjs'
gem 'jbuilder', '~> 2.5'
gem 'jquery-rails'
gem 'kaminari'
gem 'less-rails', git: 'https://github.com/MustafaZain/less-rails'
gem 'paperclip'
gem 'puma', '~> 3.11'
gem 'rails', '~> 5.2.1'
gem 'rails_admin'
gem 'ransack'
gem 'sass-rails', '~> 5.0.6'
gem 'sprockets', '3.7.2'
gem 'therubyracer'
gem 'turbolinks', '~> 5'
gem 'twitter-bootstrap-rails'
gem 'uglifier', '>= 1.3.0'
gem 'will_paginate'
gem 'annotate'
gem 'data-confirm-modal'
gem "font-awesome-rails"
gem 'bootstrap', '~> 4.1.3'

まとめ

RuntimeErrorについて調べてみましたが、？っと言う感じになりました。
こちらにもやさしく導入方法が書いてありましたが同じことをしているのにエラーがでてしまいます。

質問投稿後に気が付いたこと

ExecJS::RubyRacerRuntime is not supported. Please replace therubyracer with mini_racer in your Gemfile or use Node.js as ExecJS runtime.

とは、therubyracerをmini_racerに置き換えるないとNode.jsで依存性がない。
と言うことだと考えています。

けれど、
therubyracerをmini_racerに置き換える方法がわかりません。
調べてみましたが…
参考サイト

Gemfile修正

-gem 'therubyracer'
+gem 'mini_racer', '~> 0.2.4'

bundle install で以下のエラーがでました。


![]

赤文字

An error occurred while installing mini_racer (0.2.4), and Bundler cannot continue.
Make sure that `gem install mini_racer -v '0.2.4' --source 'https://rubygems.org/'` succeeds before bundling.

mini_racerに従ってインストールしてもエラーが出ます。

Gemfile.lock

     -therubyracer (0.12.3)
     +mini_racer (0.2.4)
       libv8 (~> 3.16.14.15)
      ref

を変更してみましたがエラーがうまくいきません。

libv8のバージョンをあげてみました。

それでもやっぱりだめみたいですね。

Answer 1

原因かどうかはわかりませんが
selfとtreeの順番が逆になっているのは意図的ですかね...
あとうろ覚えなんですが、importが必要ではなかったですか？

* application.scss

*= require_self
*= require font-awesome
*= require 'css/lightbox'
*= require_tree .
*/

@import "bootstrap";

エラーとは関係ないと思いますが、

// application.js

//= require bootstrap
//= require bootstrap-sprockets

は片方だけでいいのでは？

Comments

[退会済みユーザー]

回答ありがとうございます！
そうなんですね！ちょっと試してみたいと思います。

Answer 2

therubyracerをmini_racerに置き換える方法がわかりません。

Gemfileにある、gem 'therubyracer'という行をgem 'mini_racer'と書き換えて、bundle installしてください。

Comments

[退会済みユーザー]

回答ありがとうございます！
試したところエラーがでてうまくインストールされませんでした。
エラー内容や、それから試してみたことを質問内容にまとめてみましたので、
もしよければ教えていただきたいです。

[退会済みユーザー]

libv8のバージョンが低かったです。一度バージョンアップしてもう一度試してみます。

[退会済みユーザー]

バージョンをあげてもエラーがでました…