Using Bootstrap gem with Rails

2019-06-23 22:13发布

问题:

I have a fresh rails project where I only generated a controller. I've followed the directions to install bootstrap according to the bootstrap gem, and I keep getting the following error:

ActionView::Template::Error (identifier '(function(opts, pluginOpts) {return eva
l(process' undefined):
     5:     <%= csrf_meta_tags %>
     6:     <%= csp_meta_tag %>
     7:
     8:     <%= stylesheet_link_tag    'application', media: 'all', 'data-turbol
inks-track': 'reload' %>
     9:     <%= javascript_include_tag 'application', 'data-turbolinks-track': '
reload' %>
    10:   </head>
    11:

(execjs):1
app/views/layouts/application.html.erb:8:in `_app_views_layouts_application_html
_erb__511219785_80461480'

I've followed all the instructions according to this webpage: https://github.com/twbs/bootstrap-rubygem

My code:

# Gemfile
gem 'bootstrap', '~> 4.1.1'
gem 'jquery-rails'

# app/assets/javascripts/application.js
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require jquery3
//= require popper
//= require bootstrap
//= require_tree .

# app/assets/stylesheets/application.scss
@import "bootstrap";

Note, I also did remove *= require and *= require_tree from the application.scss and I did make sure that it's a scss file and not a css file.

回答1:

This seems to be a current issue with ExecJS and duktape on Windows.

See the following link for more information: https://github.com/twbs/bootstrap-rubygem/issues/157

In short, to resolve this issue you can simply remove/comment out duktape from your Gemfile. If you're going for Node.js as your JS runtime, remember to actually install it (Node.js).

If you still have problems, remove all //= require directives from your application.scss and keep those in application.js instead.

application.js

//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .
//= require jquery3
//= require popper
//= require bootstrap-sprockets

application.scss

@import "bootstrap";

Gemfile

Remove gem 'duktape'

gem 'autoprefixer-rails'
gem 'bootstrap', '~> 4.1.1'
gem 'jquery-rails'

From a comment on the issue:

duktape has become the default JS Runtime in Windows sometime ago in rails/rails#30014.

If you look into other similar issues involving Exejs you might found out that duktape is actually the culprit (however its execjs here for definition of duktape context). If you change your runtime environment to use Nodejs, the error would be resolved, as the case with @yasunari89

In config/boot.rb ENV['EXECJS_RUNTIME'] = 'Node'

You can find more info in #152 , #153 and #155 . However, above issues with invalid regex was fixed with new version of duktape, for more info visit judofyr/duktape.rb#41 The new version which resolved the invalid regex issue , started causing issue which you are encountering now. This issue happens because ( as defined in execjs) duktape doesn't support complex contexts and full JS as identifier.

However a PR is under review that will possibly resolve the issue, thanks to @judofyr

You should also make sure that your application.html.erb is setup correctly. Here is an example:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <title>title</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>
        <div class="container">
            <%= yield %>
        </div>
  </body>
</html>

ExecJS supports several runtimes, not just duktape and NodeJS. https://github.com/rails/execjs

ExecJS supports these runtimes:

therubyracer - Google V8 embedded within Ruby
therubyrhino - Mozilla Rhino embedded within JRuby
Duktape.rb - Duktape JavaScript interpreter
Node.js
Apple JavaScriptCore - Included with Mac OS X
Microsoft Windows Script Host (JScript)
Google V8
mini_racer - Google V8 embedded within Ruby