2

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 ?

Improve this question
1
  • Solution is just to use the full bootstrap bundled js. Not quit the best solution though
    – CompactCode
    Commented Apr 27, 2018 at 18:31

1 Answer 1

Reset to default
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>
Improve this answer
6
  • 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
    Commented Sep 12, 2017 at 16:33
  • i agree with @BenCrook any idea how to solve it?
    – CompactCode
    Commented Apr 11, 2018 at 16:12
  • I don't sorry, I don't even know what Popper is :(
    – Ben Crook
    Commented Apr 11, 2018 at 16:14
  • 3
    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 Rhyne
    Commented Apr 11, 2018 at 16:20
  • 1
    @ManojDeswal you can find it here github.com/twbs/bootstrap/tree/v4-dev/dist/js
    – Justin Rhyne
    Commented Apr 17, 2018 at 17:53

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.