The jquery and bootstrap not included

I run the bower install for bootstrap:

bower install bootstrap4-dist --save

And include the css and js in my base.nunjucks file like this

<link rel="stylesheet" href="../../bower_components/bootstrap4-dist/dist/css/bootstrap.css">
<link rel="stylesheet" href="{{baseUrl}}styles/main.css"/>
<script src="{{baseUrl}}scripts/main.js"></script>

… {% block scripts %}{% endblock %} <script src="../../bower_components/bootstrap4-dist/dist/js/bootstrap.min.js"></script>

The path is correct but it shows the files can’t be loaded. So I changed the link to cdn. The bootstrap style works. But it shows another error message:

Uncaught Error: Bootstrap’s JavaScript requires jQuery

Isn’t JQuery preinstalled by the generator? Please help. Thanks.

[DDaems]

Try this:

npm install browserify-shim --save-dev

package.json

  "browserify": {
    "transform": [
      "browserify-shim"
    ]
  },
  "browser": {
    "bootstrap": "./bower_components/bootstrap-sass/assets/javascript/bootstrap.js",
    "jquery": "./node_modules/jquery/dist/jquery.js"
  },
  "browserify-shim": {
    "jquery": "$",
    "bootstrap": {
      "exports": null,
      "depends": "jquery:jQuery"
    }
  },

main.js

import ‘jquery’; import ‘bootstrap-sass’;

[DDaems]

This is how i got it working: npm install bootstrap-sass --save

@import node_modules/bootstrap/dist/css/bootstrap

for the javascript part:

npm install browserify-shim --save-dev

package.json

  "browserify": {
    "transform": [ "browserify-shim" ]
  },
  "browser": {
    "bootstrap": "./node_modules/bootstrap/dist/js/bootstrap.js"
  },
  "browserify-shim": {
    "bootstrap": {
      "exports": null,
      "depends": "jquery:jQuery" // note: bootstrap uses jQuery instead of $
    }
  },

main.js

import ‘bootstrap’;

I though the block appends styles/scripts where supposed to be used. But apperently i was wrong, this took me a while to figure out though.

@bagusflyer