0

Drupal 8.5 requires jQuery 3, which has some site breaking features. I would rather like to use version 2.2.4. I have tried the libraries-override approach suggested in How do I use a jQuery version different from the default one used by core? After applying that answer, the theme.libraries.yml file content is the following one.

global-styling:
  css:
    theme: 
      css/main.css: {}

jquery-custom:
  remote: https://github.com/jquery/jquery
  version: "2.2.4"
  license:
    name: MIT
    url: https://github.com/jquery/jquery/blob/2.2.4/LICENSE.txt
    gpl-compatible: true

global-scripts:
  js:
    js/plugins.js: {}
    js/drupal-main.js: {}
    js/vendor/modernizr-3.3.1.min.js: {}
    js/jquery-2.2.4.min.js: { minified: true, weight: -20 }

  dependencies:
    - core/drupal
    - core/jquery
    - core/jquery.once

The theme.info.yml file content is the following one.

libraries:
  - theme/global-styling
  - theme/global-scripts
libraries-override:
  core/jquery: theme/jquery-custom

However, it gives me a reference error saying that jQuery is not defined. I have checked the path and there is no problem there. What am I missing here?

Is there any other way to downgrade from jQuery 3 to jQuery 2 in Drupal 8?

I also tried using the following code, but I still getting a reference error.

jquery-custom:
  remote: https://github.com/jquery/jquery.js
  version: "2.2.4"
  license:
    name: MIT
    url: https://github.com/jquery/jquery/blob/2.2.4/LICENSE.txt
    gpl-compatible: true
  js:
    js/jquery-2.2.4.min.js: { minified: true, weight: -20 }

global-scripts:
  js:
    js/plugins.js: {}
    js/drupal-main.js: {}
    js/vendor/modernizr-3.3.1.min.js: {}
6
  • 1
    Your custom jQuery library jquery-custom is missing the important js part. Additionally, you should remove jQuery from your global-scripts js. Aug 20 '18 at 16:03
  • @MarioSteinitz Thanks for your answer. Yes I tried that: jquery-custom: remote: https://github.com/jquery/jquery.js version: "2.2.4" license: name: MIT url: https://github.com/jquery/jquery/blob/2.2.4/LICENSE.txt gpl-compatible: true js: js/jquery-2.2.4.min.js: { minified: true, weight: -20 } global-scripts: js: js/plugins.js: {} js/drupal-main.js: {} js/vendor/modernizr-3.3.1.min.js: {} However, I still get the jqeury is not defined error.
    – DarkMatter
    Aug 20 '18 at 16:40
  • Is the empty line between the js part and dependencies a paste error, or what you actually have in your definition? If so, remove that too. YAML is very sensitive to indents. - And omit the remote part of your jquery-custom library. A version and the js should do. Aug 20 '18 at 16:46
  • @MarioSteinitz That was a pasting error. I just checked the yaml file using a parser: imgur.com/a/JPyQKXU I didn't get any error.
    – DarkMatter
    Aug 20 '18 at 16:58
  • Just to verify, you are using the actual theme key in place of theme/ right?
    – Kevin
    Aug 20 '18 at 17:22
1

I had the same issue with some older Google tags plugins that did not work with jquery 3.0. You basically have to use the D8 library override methods in your theme to do this.

This actually goes into the theme info.yml file. You need to have the other version of jquery defined in your library.yml file as well. Here's some excerpts from my theme files.

my_theme.info.yml

libraries-override:
  #downgrade jquery / force jquery into header
  core/jquery: my_theme/jquery

The core/jquery was found by searching thru the core to find the jquery library definition.

my_theme.libraries.yml

jquery:
  header: true
  remote: https://github.com/jquery/jquery
  version: "2.2.4"
  license:
    name: MIT
    url: https://github.com/jquery/jquery/blob/2.2.4/LICENSE.txt
    gpl-compatible: true
  js:
    js/jquery-2.2.4.min.js: { minified: true, weight: -20 }

Note: The header: true loads jquery in the header and not the footer. Helps a bit with embedded jQuery code that complains that jquery does not exist. I have a local copy of jquery in the js directory of my theme as well.

This technique can override any CSS or javascript included by any module or core.

7
  • Did you do anything else? I keep getting the jquery not defined error.
    – DarkMatter
    Aug 21 '18 at 17:50
  • Is the jquery not defined coming from JS code using jquery? If so, make sure you have the header: true option above. D8's default is to load jQuery in the footer so js using it might look for it before it's loaded (Marketo stuff in our case). Having it in the header loads it before most other JS code. Also, you should be able to see which jQuery is being loaded via Chrome's sources tab in the dev tools. This will verify which version / if it's loaded.
    – CG Monroe
    Aug 21 '18 at 18:30
  • I used header: true. However, I am still getting the error. jQuery is not loading at all. I used jQuery.fn.jquery to find the version, and I got the jQuery not defined again.
    – DarkMatter
    Aug 21 '18 at 18:33
  • You did not show any dependencies in your libraries.yml. D8 only loads jquery when needed as defined by dependencies. You may need to add dependencies: - core/jquery To your global js scripts (or specific script) to tell D8 to load it.
    – CG Monroe
    Aug 21 '18 at 18:36
  • I have. I added this question in the forum as well with my current files: drupal.org/forum/support/theme-development/2018-08-21/… There you can see the complete file.
    – DarkMatter
    Aug 21 '18 at 18:40
0

You need to download jquery 3.5.1 min into your themes js folder for this to work. Maybe people are expecting it to be referenced to an external source?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.