2

I am trying to implement bootstrap v4.0 on magento 2 theme, but I getting popper.js error.

app/design/frontend/vendor/theme/requirejs-config.js

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

app/design/frontend/vendor/theme/web/js/theme.js

require(['jquery', 'popper'], function($, Popper) {
    window.Popper = Popper; // re-attach to global scope
    require(['bootstrap4'], 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.
            alert('ok');
        });
    });
});

Error:

GET http://127.0.0.1/default/popper.js net::ERR_ABORTED require.js:1895

Uncaught Error: Script error for: popper.js require.js:166

Obs:

My bootstrap js files are in app/design/frontend/vendor/theme/web/js/bootstrap4 dir

I am running:

php -f bin/magento setup:upgrade;
sudo chown `whoami`:www-data /var/www/ -R;
cd vendor/snowdog/frontools/;
gulp styles;
0

Try this one

var config = {
    deps: [
        'js/theme'
    ],
    paths: {
        'popper': 'Package_Module/js/bootstrap4/popper.min',
        'bootstrap4': 'Package_Module/js/bootstrap4/bootstrap.min'
    },
    shim: {
        'popper': {
            'deps': ['jquery'],
            'exports': 'Popper'
        },
        'bootstrap4': {
            'deps': ['jquery', 'popper']
        }
    }
};
2

If anyone else is unable to resolve this issue, I got it using bootstrap.bundle.js and simple config workaround:

var config = {
    deps: [
        'js/category-slider'
    ],
    paths: {
        'bootstrap4': 'js/vendor/bootstrap.bundle.min'
    },
    shim: {
        'bootstrap4': {
            'deps': ['jquery']
        }
    }
};

Here is a cdn link for the bundle file: https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min

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.