1

super beginner here to both JS/Bootstrap AND webpack (familiar with HTML, (S)CSS and PHP, trying RoR now...)

I am trying to connect Bootstrap-5 to Rails-6. I have read at least 10 blog posts and many A&A here but still no luck. All Styles work, but the scripts don't. I want to create a super simple navbar - copied more or less directly from the Bootstrap template, but the drop down and the collapsed menu do not work. I linked the bootstrap scripts manually with a <script> tag from their CDN - that did the trick but of course should not be the solution. So what stupid thing am I overlooking for making the bootstrap scripts work with Rails 6? In particular, I was looking at this post here - but still with no success :(

I have this line in my app/javascript/packs/application.js:

import 'bootstrap'

and I added these lines to my config/webpack/environment.js:

const webpack = require("webpack")
environment.plugins.append("Provide",
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        jquery: 'jquery',
        'window.jQuery': 'jquery',
        Popper: ['popper.js', 'default']
    })
)

In app/stylesheets/application.scss (yes I renamed to scss) I have

@import "bootstrap/scss/bootstrap";

In app/views/layouts/application.html.erb, I wasn't sure what to include - I currently have three lines (added the third one):

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

The webpack compiler gives no errors. What am I doing wrong?

tkhobbes
  • 368
  • 3
  • 16
  • How are you adding bootstrap, gem or cdn? I used the cdn on a recent project and had to include the js by following this https://getbootstrap.com/docs/5.0/getting-started/introduction/ – Int'l Man Of Coding Mystery Apr 07 '21 at 21:24
  • I used yarn to add bootstrap and popper.js - I found this in many resources including the link I quoted, this seemed to be the recommended way? – tkhobbes Apr 08 '21 at 07:11
  • I've never used the yarn installation. I've only ever used the gem and the script tag or the cdn and the script tag – Int'l Man Of Coding Mystery Apr 08 '21 at 12:52
  • Check this repo: https://github.com/fabioaraujo121/dockerbase it's working fine. Maybe with the working example, you can see the error... – Fábio Araújo Apr 20 '21 at 17:05
  • Thanks both. I followed Int'l Man Of Coding Mystery's first advice and simply added them via CDN. :) – tkhobbes Apr 22 '21 at 06:00

1 Answers1

0

You can add the scripts in your layouts/application.html.erb file like so

 <%= javascript_pack_tag 'lightbox', 'data-turbolinks-track': 'reload', defer: true %>
    <%= javascript_pack_tag 'tiny-slider', 'data-turbolinks-track': 'reload', defer: true %>
    <%= javascript_pack_tag 'main', 'data-turbolinks-track': 'reload', defer: true %>

(changing the file names to suit your application/filenames), this is the preferred (and working) way to include extra js files in Rails 6 with webpacker/webpack

Paul Anthony McGowan
  • 177
  • 2
  • 15