Encountering a problem with loading popper.js in Bootstrap 4 while utilizing require.js for loading

Question

Encountering a problem with loading popper.js in Bootstrap 4 while utilizing require.js for loading

After installing bootstrap 4, jquery, and popper via npm, I encountered an error in the console when loading my website. The error indicated that the file popper.js could not be retrieved. Upon further inspection, I found that there were two instances of popper.js - one loaded successfully by require.js with a path of

http://localhost:9000/Libs/popper.js/dist/umd/popper.js

, and another one not found by bootstrap with a path of http://localhost:9000/popper.js.

In the images below, pic 1 displays the configured paths for the JS library, pic 2 shows the successful loading of libraries, and pic 3 highlights the failure to load popper.js.

I am puzzled as to why bootstrap is unable to recognize that popper.js has been loaded by require.js.

If anyone could offer insight into this issue, I would greatly appreciate it. Thank you!

https://i.sstatic.net/kLc6f.png

javascript typescript requirejs bootstrap-4

Answer 1

Answer №1

Consider the following options:

bootstrap.bundle.js

or:

bootstrap.bundle.min.js

https://getbootstrap.com/docs/4.0/getting-started/contents/

The documentation specifies that these files include popper, eliminating the need for a separate requirement.

If you encounter issues, check your source files for /popper.js as it might be a simple reference correction elsewhere.

Instead of:

require(["bootstrap"], function(bootstrap) {
    // do nothing
});

Try this approach to load popper first:

require(["popper"], function(popper) {
    window.Popper = pop
    require(["bootstrap"]);
});

Alternatively, you can utilize the CDN links recommended by Bootstrap before adding the compiled bootstrap code.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

Answer 2

Consider the following options:

bootstrap.bundle.js

or:

bootstrap.bundle.min.js

https://getbootstrap.com/docs/4.0/getting-started/contents/

The documentation specifies that these files include popper, eliminating the need for a separate requirement.

If you encounter issues, check your source files for /popper.js as it might be a simple reference correction elsewhere.

Instead of:

require(["bootstrap"], function(bootstrap) {
    // do nothing
});

Try this approach to load popper first:

require(["popper"], function(popper) {
    window.Popper = pop
    require(["bootstrap"]);
});

Alternatively, you can utilize the CDN links recommended by Bootstrap before adding the compiled bootstrap code.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

Answer 3

Answer №2

Greetings! This marks my debut response on a stackoverflow inquiry, and given my personal battle with it, I felt compelled to share my solution. As echoed by previous responses, bootstrap necessitates the presence of popper js. However, bootstrap locates popper at the root level—regardless of its actual location in the directory structure. Dive into the code snippet below, showcasing the utilization of require('popper.js'):

bootstrap.js

The resolution lies in specifying the module "popper.js" using require function, precisely as follows:

require.config({
baseUrl: 'lib',
paths: {
    main: 'main',
    jquery: 'jquery/dist/jquery',
    'jquery-slim': 'jquery/dist/jquery-3.3.1.slim.min',
    'jqueryUnobtrusive': 'jquery-validation-unobtrusive/jquery.validate.unobtrusive',
    'bootstrap': 'bootstrap/dist/js/bootstrap',
    'knockout': 'knockout/knockout-latest',
    'ajax': 'jquery-ajax/jquery.unobtrusive-ajax',
    'shop': '/scripts/shop/shop',
    'domready': 'requirejs/domready',
    'shoporder': '/scripts/shoporder/shoporder',
    'popper': 'popper.js/dist/umd/popper'
}});

define("popper.js", ['popper'], () => {
require(['popper'], () => {
    require(['bootstrap']);
});

define(['main', 'jquery', 'jquery-slim'], () => {
 require(['jqueryUnobtrusive', 'ajax']);
 require(['knockout']);
 require(['jquery']);
 require(['popper.js']);
});

This approach ensures that bootstrap successfully navigates to the correct directory.

Answer 4

Greetings! This marks my debut response on a stackoverflow inquiry, and given my personal battle with it, I felt compelled to share my solution. As echoed by previous responses, bootstrap necessitates the presence of popper js. However, bootstrap locates popper at the root level—regardless of its actual location in the directory structure. Dive into the code snippet below, showcasing the utilization of require('popper.js'):

bootstrap.js

The resolution lies in specifying the module "popper.js" using require function, precisely as follows:

require.config({
baseUrl: 'lib',
paths: {
    main: 'main',
    jquery: 'jquery/dist/jquery',
    'jquery-slim': 'jquery/dist/jquery-3.3.1.slim.min',
    'jqueryUnobtrusive': 'jquery-validation-unobtrusive/jquery.validate.unobtrusive',
    'bootstrap': 'bootstrap/dist/js/bootstrap',
    'knockout': 'knockout/knockout-latest',
    'ajax': 'jquery-ajax/jquery.unobtrusive-ajax',
    'shop': '/scripts/shop/shop',
    'domready': 'requirejs/domready',
    'shoporder': '/scripts/shoporder/shoporder',
    'popper': 'popper.js/dist/umd/popper'
}});

define("popper.js", ['popper'], () => {
require(['popper'], () => {
    require(['bootstrap']);
});

define(['main', 'jquery', 'jquery-slim'], () => {
 require(['jqueryUnobtrusive', 'ajax']);
 require(['knockout']);
 require(['jquery']);
 require(['popper.js']);
});

This approach ensures that bootstrap successfully navigates to the correct directory.

Answer 5

Answer №3

To ensure Bootstrap works properly, Popper must be accessible in the global scope. You can resolve this issue by including exports in the shim configuration:

shim: {
    bootstrap: {
        deps: ['jquery','popper']
    },
    popper: {
        exports: "Popper"
    }
}

Additionally, it's important to confirm that Bootstrap correctly specifies the module name. This can be verified at the beginning of the bootstrap.js file.

(function (global, factory) {   
  typeof exports === 'object' && typeof module !== 'undefined' 
  ?  factory(exports, require('jquery'), require('popper')) 
  :  typeof define === 'function' && define.amd 
  ? define(['exports', 'jquery', **'popper'**], factory) 
  : (...)

Answer 6

To ensure Bootstrap works properly, Popper must be accessible in the global scope. You can resolve this issue by including exports in the shim configuration:

shim: {
    bootstrap: {
        deps: ['jquery','popper']
    },
    popper: {
        exports: "Popper"
    }
}

Additionally, it's important to confirm that Bootstrap correctly specifies the module name. This can be verified at the beginning of the bootstrap.js file.

(function (global, factory) {   
  typeof exports === 'object' && typeof module !== 'undefined' 
  ?  factory(exports, require('jquery'), require('popper')) 
  :  typeof define === 'function' && define.amd 
  ? define(['exports', 'jquery', **'popper'**], factory) 
  : (...)

Encountering a problem with loading popper.js in Bootstrap 4 while utilizing require.js for loading

Answer №1

Answer №2

Answer №3

Similar questions

Enhancing User Experience with AJAX-loaded Navigation Bar

What is the best way to control the iteration of a JavaScript 'for' loop based on specific conditions?

Activate a .click() event on a hyperlink exclusively in mobile view

I'm having trouble finding the solution to setting a token in my request header

Does angular-sortablejs work with angular 5?

Jquery ripple effect does not function properly with background-attachment: fixed style

What steps can be taken to diagnose the cause of a failed Jquery AJAX request?

What is the best way to transfer a value to v-model using emit?

Error on my React website: Exceeded the maximum call stack size

Displaying an IP camera feed on a three.js canvas

What is the best way to prevent state persistence in Next.js dynamic routes?

Encountered an issue when executing "npm start": The system does not recognize 'next' as a valid internal or external command

The getBBox() method of SVG:g is returning an incorrect width value

Blurry text issue observed on certain mobile devices with Next.js components

Altering the Color of Items in an ASP.NET ListBox

What is the process for embedding a Vue app within another Vue app?

What is the process for transferring a JavaScript variable to a Java servlet?

One module triggers nodeMailer to send an email, while the other does not request it

What impact do the input values of an Angular reactive form have on the DOM?

Struggling to reach the same level of bundle optimization with webpack + angular when compared to angular-cli