jQuery undefined error - Githubissues

NickHeiner commented 7 years ago

Found on: 01d83faae1857ec9e5059cc8e482b3cf6be431aa

When I put components.js on the page, I get the following error:

Uncaught TypeError: $ is not a function
    at components.js?v=8.2.4:334

Here is my theme yaml file:

irs.libraries.yml:

assets:
  version: VERSION
  css:
    theme:
      assets/css/uswds.css: {}
      assets/css/application.css: {}
  js:
    assets/js/components.js: {}
    assets/js/vendor/html5shiv.js: {}
    assets/js/vendor/jquery-1.11.3.min.js: {}
    assets/js/vendor/jquery-1.11.3.min.map: {}
    assets/js/vendor/rem.min.js: {}
    assets/js/vendor/respond.js: {}
    assets/js/vendor/selectivizr-min.js: {}
  dependencies:
    - core/jquery
    - core/jquery.once
    - core/drupal.ajax
    - core/drupal
    - core/drupalSettings

I am pretty sure irs.libraries.yml in my project was just copied / slightly modified from usa.libraries.yml in this project.

Why does core/jquery appear in dependencies, and assets/js/vendor/jquery-1.11.3.min.js appear in js?

This is the code that causes the error on line 334:

$(function() {

We see that $ is undefined, which is surprising to me because jquery-1.11.3.min.js is run first on the page, which should be setting window.$. I also see that elsewhere in the file, $ is not used directly, but it's used in the form:

(function( $ ) {
    // ...
}( jQuery ));

Is it a mistake to be using $ directly on line 334?

I have not fully investigated this error to see why it happens or to exclude the possibility that it's my fault. But I wanted to share this with you anyway, in case this is a broader problem, because it seems like it very well may be.

🇺🇸 #1

fureigh commented 7 years ago

Thanks for the bug report, @NickHeiner, and for noticing the dependencies-vs.-assets issue! I'll look into it this week.

fureigh commented 7 years ago

(If anyone watching has time to get to it sooner, go for it. 🎉 )

18F / web-design-standards-drupal

jQuery undefined error #65