jQuery and Bootstrap compatibility issues

Frontend Web Development: The Big Nerd Ranch Guide Chapter 19: Introduction to MVC and Ember
1

Hi all,

Just wanted to say that as someone doing this course in 2020, I’ve found that some of the libraries used in this book have undergone breaking changes, so I thought it might help if I share my own experience in fixing some of these.

Problem – Bootstrap not loading correctly:
In your ember-cli-build.js instead of adding app.import(bootstrapPath + 'javascripts/bootstrap.js') as the book recommends, try the following:

app.import(app.bowerDirectory + '/bootstrap/dist/js/bootstrap.js');
app.import(app.bowerDirectory + '/bootstrap/dist/css/bootstrap.css');

Problem – Navbar doesn’t work:
I’m not entirely sure what’s going on there, I think that some of the bootstrap classes could have changed, so I got it working with the following code inside my application.hbs:

<header>
  <div class="pos-f-t">
    <nav class="navbar navbar-light bg-light">
      <a class="navbar-brand" href="#">Tracker</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#top-navbar-collapse" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
    </nav>
    <div class="collapse" id="top-navbar-collapse">
      <div class="bg-light p-4">
        <ul class="nav navbar-nav">
          <li>
            <a href="#">Test Link</a>
          </li>
          <li>
            <a href="#">Test Link</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</header>
<div class="container">
  {{outlet}}
</div>

Problem – jQuery is complaining about stuff:
First try to install the ember jQuery addon with ember install @ember/jquery . Then remove jquery via NPM npm remove jquery and install an older version with npm install jquery@~3.4.1. Lastly, as kelilao recommended in a different post, inside your config/optional-features.json set jquery-integration to true.

Hope it helps!

2

Working through this project in August 2021 and lots more breaking changes :frowning:

Installing jquery 3.4.1 didn’t work for me, because that broke something else within Ember.

My solution was to dive in and update everything to the latest versions. (Which will stay compatible for oh, six months?) Worked for me, but I had a lot of spare time and I’m experienced at figuring out weird error messages and finding the right solution on Stack Overflow.

Current web trend seems to be to specify exact package versions for everything in your project, freezing it in time. Suggest that next edition / online errata should hardcode version numbers.

1 Like