jQuery and Bootstrap compatibility issues

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!