Magento 2 – Fix Error Loading popper.js on Theme (require js)

errorjavascriptmagento2requirejs

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;

Best Answer

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']
        }
    }
};
Related Topic