0

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 Answer 1

0

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
  • 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
    Dec 27, 2022 at 21:44
  • 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.
    – Mr.C
    Dec 27, 2022 at 23:41
  • 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.
    – mona lisa
    Dec 27, 2022 at 23:52
  • 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
    Dec 28, 2022 at 11:42
  • I'm working through this link to try and figure out how all this works (you themers must suffer burnout!!! :) drupal.org/docs/theming-drupal/…. 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
    Dec 28, 2022 at 12:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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