0

I am using the Radix Bootstrap Theme and Drupal 9.1.5. I have a Navigation Block with Children (using Bootstrap Dropdown) and some JS in radix_aur_scipt.js. I use that JS to open a Bootstrap Modal

import 'bootstrap';

...

  function createPdfModal (element) {   
    ...       
    $('.modal').modal();    
  }

To use that JS I import bootstrap.min.js with Webpack

mix.js('src/js/radix_aur.script.js', 'js');
mix.copy('node_modules/bootstrap/dist/js/bootstrap.min.js', 'assets/js');

And radix_aur.libraries.yml

  js:
    assets/js/radix_aur.script.js: {}
    assets/js/bootstrap.min.js: {}

When I am logged in as admin everything works as expected (Dropdown opens, Modal opens). As a non admin user I cant open the dropdown in the navigation. So I imported bootstrap.bundle.min.js in webpack assuming that popper.js was missing. I forgott to change that in the radix_aur.libraries.yml which then didnt deliver bootstrap at all. However that fixed the problem with the dropdown for non admin users but then I cant open the modal

Uncaught TypeError: $(...).modal is not a function

When I realized my mistacke I changed the radix_aur.libraries.yml that fixed the problem for the modal but then I am left with not beeing able to open the dropdown as non admin. I also tried using bootstrap.min.js and popper.js with the same outcome.

1 Answer 1

0

There were one additional import in the radix_aur_script.js

import bootstrap

I deleted that and then everything worked as expected with the bootstrap.bundle.min.js Still dont know why this would block the whole thing from working.

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.