Magento 2 - Use Bootstrap 4 (Uncaught Error: Script error for: bootstrap)

magento.stackexchange https://magento.stackexchange.com/questions/297153

Question

I try to install bootstrap 4.

Note: THEME_LOCATION => app\design\frontend\company\base

First I downloaded the Compiled CSS and JS from here.

I moved the file bootstrap.min.css to THEME_LOCATION\web\css\bootstrap.min.css

and bootstrap.bundle.min.js to \web\js\bootstrap.bundle.min.js

Then I added the requirement to

THEME_LOCATION\Magento_Theme\requirejs-config.js

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

Then in default_head_blocks.xml I added the css:

THEME_LOCATION\Magento_Theme\layout\default_head_blocks.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="css/bootstrap.min.css" />
    </head>
</page>

And at last but not least I added this line:

<script type="text/javascript">require(['bootstrap']);</script>

to

THEME_LOCATION\Magento_Theme\templates\html\header.phtml

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile

/**
 * @var \Magento\Theme\Block\Html\Header $block
 */
$welcomeMessage = $block->getWelcome();
?>



<?php switch ($block->getShowPart()):
    case 'welcome': ?>
        <li class="greet welcome" data-bind="scope: 'customer'">
            <!-- ko if: customer().fullname  -->
            <span class="logged-in" data-bind="text: new String('<?= $block->escapeHtml(__('Welcome, %1!', '%1')) ?>').replace('%1', customer().fullname)">
            </span>
            <!-- /ko -->
            <!-- ko ifnot: customer().fullname  -->
            <span class="not-logged-in" data-bind='html:"<?= $block->escapeHtml($welcomeMessage) ?>"'></span>
            <?= $block->getBlockHtml('header.additional') ?>
            <!-- /ko -->
        </li>
        <script type="text/x-magento-init">
        {
            "*": {
                "Magento_Ui/js/core/app": {
                    "components": {
                        "customer": {
                            "component": "Magento_Customer/js/view/customer"
                        }
                    }
                }
            }
        }
        </script>
        <script type="text/javascript">require(['bootstrap']);</script>

    <?php break; ?>

    <?php case 'other': ?>
        <?= $block->getChildHtml() ?>
    <?php break; ?>

<?php endswitch; ?>

At the end I executed php bin/magento cache:flush to clear the cache.

But I get require.js:166 Uncaught Error: Script error for: bootstrap if I load a site.

No correct solution

OTHER TIPS

The error was thrown, because magento was unable to load the script, because it is expected to be in THEME_LOCATION\Magento_Theme\web\js instead of THEME_LOCATION\web\js

Another error source was because I had to use bootstrap.bundle.js instead of bootstrap.bundle.min.js !

Also don't forget to change the path:

THEME_LOCATION\Magento_Theme\requirejs-config.js

var config = {
    paths: {
        'bootstrap':'Magento_Theme/js/bootstrap.bundle'
    },
    shim: {
        'bootstrap': {
            'deps': ['jquery']
        }
    }
};
Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top