How do I lock down a child theme to use jQuery 3.6.0?

Mr.C

12/27/23, 7:05 PM

My older site uses bootstrap 3 and has been working great when accessed from a mobile phone and the hamburger menu kicks in, but something has happened in jQuery 3.6.2 (In Drupal 9.5.0) that causes the menu click to fire and then immediately close the menu. I can see this when setting breakpoints in the Drupal behaviors script. Looks like some kind of race condition. How would I lock down the child theme to use only jQuery 3.6.0? Most of what is on Drupal site about using different libraries is old or the code does not work at all. I've tried the suggestion below and jQuery never loads in the theme. I could see it core/assets/vendor folder when not overridden.

name: Visitor Permits
type: theme
core_version_requirement: ^8 || ^9
description: Child theme for Visitor Permits.
base theme: bootstrap
screenshot: profile-vpermits.jpg

# Libraries
libraries:
  - vpermits/vpermits

libraries-override:
  core/jquery: vpermits/jquery

# Regions
regions:
  mobile: "Mobile"
  header_left: "Header Left"
  header_right: "Header Right"
  navigation: "Navigation"
  sidebar_left: "Sidebar Left"
  content: "Content"
  sidebar_right: "Sidebar Right"
  footer: "Footer"
  disabled: "Disabled"

And the .libraries.yml

vpermits:
  version: VERSION
  js:
    dist/vpermits.js: {}
  css:
    theme:
      dist/style.css: {}
  dependencies:
    - core/drupal
    - core/modernizr
    - vpermits/babel-polyfill
    - core/drupal.dialog.ajax
    - core/jquery.form

permit-form-app:
  version: 1.x
  js:
    dist/permit-form-app.js: {}
  css:
    theme:
      dist/app-style.css: {}
  dependencies:
    - vpermits/babel-polyfill

babel-polyfill:
  version: 1.x
  js:
    dist/polyfill.js: {}

jquery:
  remote: https://github.com/jquery/jquery
  version: "3.6.0"
  license:
    name: MIT
    url: https://raw.githubusercontent.com/jquery/jquery/3.6.0/LICENSE.txt
    gpl-compatible: true
  js:
    assets/vendor/jquery/jquery.min.js: { minified: true, weight: -20 }

1 + 0

javascript

bootstrap-theme

Score:0

Drupal

cilefen

12/27/23, 7:35 PM

Override the core/jquery library in the theme. Its primary definition in Drupal 9.5.0 is:

jquery:
  remote: https://github.com/jquery/jquery
  version: "3.6.2"
  license:
    name: MIT
    url: https://raw.githubusercontent.com/jquery/jquery/3.6.2/LICENSE.txt
    gpl-compatible: true
  js:
    assets/vendor/jquery/jquery.min.js: { minified: true, weight: -20 }

+ 6

Mr.C

12/27/23, 9:44 PM

Will give it a shot, but that is one that I had tried earlier. I probably missed something somewhere in the theme.info or...

Mr.C

12/27/23, 11:41 PM

No joy as it appears jquery never loads. BTW I put the core/jquery dependency back in the dependencies section in the .libraries.yml. Since core/jquery does not load and the theme jquery does not load, all the menus are broken. I believe core needs 3.6.2 but the theme needs 3.6.0 and still not sure how to accomplish.

cilefen

12/27/23, 11:52 PM

Why did you use `assets/vendor/jquery/jquery.min.js` in your override? You need to reference the version you want. There may be other problems but that stands out.

Mr.C

12/28/23, 11:42 AM

Because I don't understand what happens with the override. To someone with no experience with this, js: assets/vendor/jquery/jquery.min.js is all about the remote. I just copy/pasted the example you showed. Now, if js: is where it is supposed to live on my repo when downloaded at runtime, I'll create a path for it to live and see if that works. I'm not a themer, and my understanding is the browser caches this stuff on page load, so I'm pretty clueless. :)

Mr.C

12/28/23, 12:13 PM

I'm working through this link to try and figure out how all this works (you themers must suffer burnout!!! :) https://www.drupal.org/docs/theming-drupal/adding-assets-css-js-to-a-drupal-theme-via-librariesyml#override-extend. The guys who built the theme used webpack and I found this in there ``` externals: { jquery: 'jQuery', },``` so I have no idea what is happening on npm run build with this.

Mr.C

12/29/23, 6:09 PM

Many thanks to Jaypan for cleaning up my code and text errors! I see so many areas in the Drupal world where you have contributed and you've helped countless people!

Elon Musk

I sit in a Tesla and translated this thread with Ai:

EN: How do I lock down a child theme to use jQuery 3.6.0?

Post an answer

Most people don’t grasp that asking a lot of questions unlocks learning and improves interpersonal bonding. In Alison’s studies, for example, though people could accurately recall how many questions had been asked in their conversations, they didn’t intuit the link between questions and liking. Across four studies, in which participants were engaged in conversations themselves or read transcripts of others’ conversations, people tended not to realize that question asking would influence—or had influenced—the level of amity between the conversationalists.