Bootstrap 5.1 not working in JSBundling Rails 7?

Question

2023-01-09 – SOLVED

I started using the default Rails template, and now I want to use Bootstrap v5.1 with Rails. I've removed Importmap-Rails and proceeded with adding JSBundling-Rails and CSSBundling-Rails. The styling works properly, but none of the Bootstrap JavaScript commands seem to be working. What am I doing wrong?

Reproduction from rails new

rails new Xyz --css=bootstrap --javascript=esbuild && cd Xyz/ && ./bin/setup && git add . && git commit -m "initial commit"

rails generate controller Articles &&
echo "hello world" > app/views/articles/index.erb &&
sed -i '' -e  's/# root "articles#index"/root "articles#index"/g' config/routes.rb && 
git add . && git commit -m "generates Articles controller"

add to this file the default bootstrap nav: 2023-01-09 – SOLVED—-- this is the old Bootstrap 4 markup which is why it wasn't working for me

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

clobber & setup rake assets:clobber && ./bin/setup && yarn install && bundle install

then run ./bin/dev

Result: (no js interactions work)

Expected Result: (JS interactions work)

Answer 1

When migrating from Importmap to JSBundling + CSSBundling, make sure that you remove the remnant files. Delete config/importmap.rb and bin/importmap.

There will also be some remnants containing Hotwire Turbo and Hotwire Stimulus. If you're not planning to use them, delete app/javascript/controllers and clear the lines inside of app/javascript/application.js. If in case, you want the hotwire libraries, first add jsbundling-rails and cssbundling-rails to the Gemfile. Complete their setup first using rails javascript:install:[esbuild|rollup|webpack] and rails css:install:bootstrap

There might be some conflict in bin/dev, but I haven't noticed anything different. So you can either discard, or keep the conflicted version of the file.

Most of the required files will be auto-generated, and lines auto-appended in pre-existing files, but if Bootstrap v5.1 still isn't working in rails, with JSBundling and CSSBundling:

• Make sure that:

  import * as bootstrap from "bootstrap"
  

  has been added to the app/javascript/application.js file.

• See if app/assets/stylesheets has *.scss (could be application.bootstrap.scss or application.scss, doesn't matter as long as the same name is provided in package.json), and the content inside is:

  @import 'bootstrap/scss/bootstrap';
  @import 'bootstrap-icons/font/bootstrap-icons';
  

• In the app/assets/config/manifest.js file, make sure that the builds directory is included:

  //= link_tree ../images
  //= link_tree ../../javascript .js
  //= link_tree ../../../vendor/javascript .js
  
  // Add the line below, with the double slashes and equal sign, followed by spaces.
  //= link_tree ../builds
  

• Don't forget to include assets in assets.rb file. Mentioned below in the comments on how to setup the same.

Answer 2

I had some major problems getting bootstrap 5.1.3 javascripts working in rails 7.0.2.4. Tooltips and dropdowns were intermittent.

Firstly always use bin/dev to start the rails server in development (rather than the rails server command).

What I had to do to get javascript functionality back into my rails 7 app was go into app/javascript/application.js and change this

import "@hotwired/turbo-rails"

to this

import { Turbo } from "@hotwired/turbo-rails"
Turbo.session.drive = false

and everything began to work as expected!

References

• Turbo docs mention it
• This question also mentions it
• This issue, and this and this PRs.

---

Things you may also try

• Each time before starting the server, use these commands to clear everything:

rake assets:clean
rake assets:clobber
rake tmp:clear

• Hard refresh (ctrl + click on refresh) on every page load, or command + shift + r

Answer 3

Be sure you are using the right markup with Bootstrap 5. The Bootstrap 4 markup won't work. Specifically, the data attribute to find dropdown elements was changed to:

:data => { "bs-toggle" => "dropdown"}