0

So i have a question for you guys.

I'm trying to use Bootstrap 4 in my theme for Magento 2. So i have created a requirejs-config.js (in my theme dir) with the next items :

var config = {
    paths: {
        "popper": "js/popper.min",
        "jquery.bootstrap": "js/bootstrap.min"
    },
    shim: {
        'jquery.bootstrap': {
            'deps':['jquery' , 'popper']
        }
    }
};

And i want to use Bootstrap for my Carousel now like this :

<script type="text/javascript">
    requirejs(['jquery' , 'popper' , 'jquery.bootstrap'], function ($ , Popper , jQueryBootstrap) {
        $('#DesignitCarousel').carousel();
    });
</script>

I do use popper 1.12.3 from the dist/umd directory and its loaded great. But i still get this error :

bootstrap.min.js:6 Uncaught Error: Bootstrap dropdown require Popper.js (https://popper.js.org) at bootstrap.min.js:6 at bootstrap.min.js:6 at bootstrap.min.js:6

Anyone any idea why my dependencies OR my requirejs in my phtml fille is not working ?

  • Solution is just to use the full bootstrap bundled js. Not quit the best solution though – CompactCode Apr 27 '18 at 18:31
1

I had the same problem and just solved it by re-attaching Popper to the global scope and nesting the bootstrap dependency in my javascript.

app.js

require(['jquery', 'popper'], function($, Popper) {
    window.Popper = Popper; // re-attach to global scope
    require(['bootstrap'], function() {
        $(function() {
            // This function is needed (even if empty) to force RequireJS to load Twitter Bootstrap and its Data API.
            // You can make calls to bootstrap functions here.
        });
    });
});

I'm requiring a little different so I'll attach these just in case.

requirejs-config.js

var config = {
    paths: {
        'popper': 'js/popper',
        'bootstrap': 'js/bootstrap'
    },
    shim: {
        'popper': {
            'deps': ['jquery'],
            'exports': 'Popper'
        },
        'bootstrap': {
            'deps': ['jquery', 'popper']
        }
    }
};

default_head_blocks.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

    <head>
        <css src="css/app.css" />
        <script src="js/app.js" type="text/javascript" />
    </head>

</page>
  • Whilst this may work I don't think it's the best solution, the whole point of using require is so you can avoid polluting the global scope. And following M2 best practices JS should be loaded via x-magento-init tags or data-mage-init and not loaded via XML. – Ben Crook Sep 12 '17 at 16:33
  • i agree with @BenCrook any idea how to solve it? – CompactCode Apr 11 '18 at 16:12
  • I don't sorry, I don't even know what Popper is :( – Ben Crook Apr 11 '18 at 16:14
  • 1
    Oh 100% agree with you. Luckily, bootstrap now ships with a bundled javascript file that includes popper, so you can avoid this entire process. – Justin Apr 11 '18 at 16:20
  • 1
    @ManojDeswal you can find it here github.com/twbs/bootstrap/tree/v4-dev/dist/js – Justin Apr 17 '18 at 17:53

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.