Roots Discourse

Bootstrap plugins not included in main.js

I’m trying to track down why the bootstrap plugins are not available for one of my Sage projects. I first noticed they are not being included in my main.js file. The bower package is installed and the overrides appear to be intact in my bower.js file from initial setup. No gulp errors.

This project was installed and set up months ago and I’ve never noticed any other issues since then. I checked another couple projects and there are no issues with the BS plugins being included there. I installed via bower owl-carousel and it’s being utilized without any issues.

bower.json

    {
  "name": "sage",
  "homepage": "https://roots.io/sage/",
  "authors": [
    "Ben Word <ben@benword.com>"
  ],
  "license": "MIT",
  "private": true,
  "dependencies": {
    "bootstrap-sass": "3.3.6",
    "font-awesome": "^4.6.3",
    "owlcarousel": "^1.3.2"
  },
  "overrides": {
    "bootstrap-sass": {
      "main": [
        "./assets/stylesheets/_bootstrap.scss",
        "./assets/javascripts/bootstrap/transition.js",
        "./assets/javascripts/bootstrap/alert.js",
        "./assets/javascripts/bootstrap/button.js",
        "./assets/javascripts/bootstrap/carousel.js",
        "./assets/javascripts/bootstrap/collapse.js",
        "./assets/javascripts/bootstrap/dropdown.js",
        "./assets/javascripts/bootstrap/modal.js",
        "./assets/javascripts/bootstrap/tooltip.js",
        "./assets/javascripts/bootstrap/popover.js",
        "./assets/javascripts/bootstrap/scrollspy.js",
        "./assets/javascripts/bootstrap/tab.js",
        "./assets/javascripts/bootstrap/affix.js",
        "./assets/fonts/bootstrap/glyphicons-halflings-regular.eot",
        "./assets/fonts/bootstrap/glyphicons-halflings-regular.svg",
        "./assets/fonts/bootstrap/glyphicons-halflings-regular.ttf",
        "./assets/fonts/bootstrap/glyphicons-halflings-regular.woff",
        "./assets/fonts/bootstrap/glyphicons-halflings-regular.woff2"
      ]
    },
    "font-awesome": {
      "main": [
        "./scss/font-awesome.scss",
        "./fonts/*"
      ]
    },
    "owlcarousel": {
      "main": [
        "./owl-carousel/owl.carousel.js",
        "./owl-carousel/owl.carousel.css",
        "./owl-carousel/owl.theme.css",
        "./owl-carousel/owl.transitions.css"
      ]
    }
  }
}

I’m not sure where to proceed in troubleshooting next. Is this a bower package issue or an asset-pipeling / gulp compiling oversight?

By the looks of your bower.json they are included. What are the symptoms of their absence? Please be specific and paste any console errors along with the function calls you’re using to invoke the Bootstrap JS.

It started out when I attempted to use a BS plugin such as modal, tooltip, tab, etc. I would attempt to initialize it via main.js common, and eventually directly in the head. Every attempt so far returns (modal/tooltip/tab/etc.) is not a function.

I then searched my main.js and none of the plugins listed in in the bower file are included.

No other console errors.

This project was installed and set up months ago

When is the last time you actually ran gulp to compile the frontend assets? Perhaps a refresh is in order.

Also try some more debugging to ensure everything is actually getting pulled in.

I had been running gulp a handful of times hoping for different results, however a solution was discovered while debugging using node as recommended. Thanks for that, btw.

So, running node and require('asset-builder')('./assets/manifest.json').globs.js confirmed my suspicions that none of those assets were included in the build. However, owl-carousel was being included and that was added by me which was helpful to confirm further.

[ { type: 'js',
    name: 'main.js',
    globs:
     [ 'C:\\Users\\jasen\\dev\\team-rehab\\public\\wp-content\\themes\\team-rehab\\bower_components\\owlcarousel\\owl-carousel\\ow
l.carousel.js',
       'assets/scripts/main.js' ] },
  { type: 'js',
    name: 'customizer.js',
    globs: [ 'assets/scripts/customizer.js' ] },
  { type: 'js',
    name: 'nav.js',
    globs: [ 'assets/scripts/nav.js' ] },
  { type: 'js',
    name: 'jquery.js',
    globs: [ 'C:\\Users\\jasen\\dev\\team-rehab\\public\\wp-content\\themes\\team-rehab\\bower_components\\jquery\\dist\\jquery.js
' ] } ]

Owl-Carousel was being included as overrides in manifest.json, just like the bootstrap plugins.

"dependencies": {
"main.js": {
  "files": [
    "scripts/main.js"
  ],
  "bower": [
    "owlcarousel"
  ],
  "main": true
},

So, I added in bootstrap.

"dependencies": {
"main.js": {
  "files": [
    "scripts/main.js"
  ],
  "bower": [
    "bootstrap-sass",
    "owlcarousel"
  ],
  "main": true
},

My question now is what am I missing about how these plugins are added in my other projects automatically without the "bower": ["bootstrap-sass"], line?

Thanks again.

That’s not your bower.js file, that’s your manifest.json file.

Is the Bootstrap JS present after you made these changes?

For both adding Owl Carousel and enabling Bootstrap JS you don’t need to touch manifest.json at all.

My guess is that the Bootstrap JS source files themselves may be missing and may need to re-run bower install.

You are correct, and that just illustrates how brain-dead I feel today. I’ve edited my comment as not to confuse further.

So, in my manifest.json file:

"bower": [
    "bootstrap-sass",
    "owlcarousel"
  ],

It works when I have those line, but neither are included in the build without it.
So, I’m with you on the bower suspicion.

In my earlier troubleshooting, I confirmed that the packages were installed and I even believe I tried doing a bower install. However because of aforementioned dead-brain, I will try it again.

Did bower install.
Removed both bootstrap-sass and owl-carousel lines from manifest.json.
Ran gulp.

No errors. Plugins work.