Disabled bootstrap js saying "$" is not a function

sage
#1

So I really don’t know what might be going on here. In my theme, I have all of the bootstrap js disabled via the bower.json. However when I view my site I am getting the following in the console: “Uncaught TypeError: $ is not a function” in carousel.js. When debugging, here is the path my browser is giving me for the file in question: localhost/mytheme/wp-content/themes/mytheme/dist/scripts/assets/bower_components/bootstrap-sass/assets/javascripts/bootstrap/carousel.js.

Now the first problem is this error appears whether or not I have any overrides in my bower.json. In fact, even when I remove bootstrap as a dependency altogether the problem still occurs. This is after running gulp build, gulp --production, etc.

Second problem is that I have no idea what is generating this path, and there is definitely nothing in the dist directory that resembles this.

Has anyone run into similar bugs, or have any idea what might be going on here?

#2

Never seen this and that path having bower_components in it makes no sense. We have no clue what sort of modifications you’ve made to your theme, but you should at least share your bower.json file, the manifest.json file in the assets directory, as well as your enqueued assets.

#3

If source maps are turned on in Chrome, it would probably show the correct link to the JS file in bower_components.

Also, it’s probably an oversight, but there is no gulp build, there’s only gulp and gulp --production, and gulp watch with Sage’s gulpfile

#4

Sorry, I mean to attach them. Here you go…

bower.json

 {
      "name": "sage",
       "homepage": "https://roots.io/sage/",
       "authors": [
        "Ben Word <ben@benword.com>"
       ],
       "license": "MIT",
       "private": true,
       "dependencies": {
         "matchheight": "~0.6.0"
       }
    }

manifest.json

{
  "dependencies": {
    "main.js": {
      "files": [
        "scripts/find-doctor.js",
        "scripts/main.js"
      ],
      "vendor": [
        "assets/scripts/jquery.matchHeight.js"
      ],
      "main": true
    },
    "ajax-find-doctor.js": {
      "files": [
        "scripts/ajax-find-doctor.js"
      ]
    },
    "main.css": {
      "files": [
        "styles/main.scss"
      ],
      "main": true
    },
     "editor-style.css": {
      "files": [
        "styles/editor-style.scss"
      ]
    },
    "jquery.js": {
      "bower": ["jquery"]
    }
  },
  "config": {
    "devUrl": "http://localhost/sbh2"
  }
}

As for assets, nothing fancy

function assets() {

  // Google Fonts
  wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css?family=PT+Sans:400,700|Source+Sans+Pro:400,300,700,600,400italic' );

  // Default Styles
  wp_enqueue_style('sage/css', asset_path('styles/main.css'), false, null);

  // Scripts
  wp_enqueue_script( 'mmenu/js', 'https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.5.3/core/js/jquery.mmenu.min.all.js', 'jquery', '', false );


  if (is_single() && comments_open() && get_option('thread_comments')) {
    wp_enqueue_script('comment-reply');
  }

  wp_enqueue_script('sage/js', asset_path('scripts/main.js'), ['jquery'], null, true);
}
add_action('wp_enqueue_scripts', __NAMESPACE__ . '\\assets', 100);
#5

Hi, this is probable because jQuery is not loaded or loaded after the script file where you used $().

load the comment-reply script at the end of the file also try wp_enqueue_script('jquery'); at the top of all js scripts (on top of allwp_enqueue_script() )

#6

OK, so turns out I forgot to wrap my find-doctor.js in a no conflict function. I’m still not sure why the console was giving me the crazy paths though? Thanks for the input.